アクセス解析やコンバージョン計測によく使われるscriptタグですが、埋め込む位置によって読み込まれるタイミングが変わります。場合によってはページの表示速度にも影響してくるんですよね。
そこで今回は、WordPressでscriptタグを使う方法と、埋め込み位置による違いについて解説いたします。
scriptタグとは
scriptタグとは、「<script></script>」というタグで、主にJavaScriptをHTMLファイルやサイト内で実行するために使用されます。サイトのヘッダーやフッター、もしくはページごと埋め込んで使います。
例えば当サイトでは、テーマの販売ページから遷移する購入完了ページごとにコンバージョン解析用のscriptタグが埋め込まれています。
WordPressでscriptタグを使う方法
WordPressでscriptタグを使うには、サイト内に<script></script>を埋め込む必要があります。埋め込み位置によって実行されるタイミングも変わりますので、それぞれ解説いたします。
記事のエディタ内に埋め込む
まずは、最もシンプルな方法です。特定の記事やページのみでJavaScriptを実行したい場合は、エディタ内に直接scriptタグを埋め込みます。WordPressのクラシックエディタ（テキストエディタ）であれば、このように直接コピペするだけでOKです。
エディタ内に書かれたTwitterのscriptタグの例。※ツイート埋め込み時に自動で出力されます（WordPressにTwitterを埋め込む方法）。
ビジュアルエディタやブロックエディタ（Gutenberg）の場合は、scriptタグが正常に動作しませんのでご注意ください。WordPressのエスケープ処理によって余計なタグや空行が入力されてしまうためです。なお、ブロックエディタの「カスタムHTMLブロック」を使えば、そのまま埋め込むことも可能です。
ヘッダー（<head>内）に埋め込む
scriptタグの種類によっては、headタグ内に埋め込むことが推奨されているものもあります。Googleアナリティクス（GA）のトラッキングタグがその一例ですね（参照：Googleのヘルプ記事）。
GAのトラッキングタグは、単にコンバージョンを確認するだけではなく、どのような経路によって成果に結びついたかも分析できます。弊社も活用していますが、詳しい設定方法は下記よりご覧いただけます。
Webサイトのアクセス解析に欠かすことのできないGoogleアナリティクス。 しかし、Webサイトを始めたばかりの初心者からするとハードルが高いと感じるでしょう。専門用語が多く、何をどう設定すれば良いのか悩んでいる人も多いかもしれません。 本記事では初心者ユーザーに向けてGoogleアナ...
WordPressの場合は、外観>テーマエディターからテーマファイルを編集します。header.phpを開き、その中にある<head>内に貼り付ければOKです。
ただこの方法では、テーマファイルを直接編集しているため、テーマを更新すると記述が削除されます。特別な理由がない限り、下記プラグインやテーマの機能をご活用ください。テーマファイルの編集不要で、アップデート時に記述が削除される心配がありません。
アクセス解析や広告のコンバージョンタグをWordPressサイトに導入する場合、ヘッダーやフッターにコードを直書きすることも多いと思います。でも、WordPressテーマをそのままアップデートすると、コードが書き換えられてしまうためにこれらのタグも上書きされてしまう問題があります。その場合、再度タグ...
TCDテーマをお使いの場合は、テーマオプションのカスタムスクリプト機能をご活用いただけます。テーマファイルの編集やプラグイン不要でscriptタグを埋め込み可能です。※一部対応していないテーマもございます。
フッター（</body>の直前）に埋め込む
WordPressサイトにscriptタグを埋め込む場合、基本的にはこの位置がベストです。ここに埋め込んだscriptタグは、ページ内の他の要素を読み込んだ後に実行されるからです。
こちらも、外観>テーマエディターからfooter.phpを開き、</body>の直前にコードを貼り付ければOKですが、テーマの機能や先述のプラグインを使ってフッターに埋め込むことをオススメいたします。
scriptタグを活用すれば、JavaScriptを使って様々なことを実現できます。ご興味のある方はぜひ下記記事をご覧ください。
JavaScriptは、数あるプログラミング言語の中の一つです。 一般的に、動的なWebページやアプリを開発する際に使われてるというイメージがありますが、時代と共に進化していき、今ではJavaScript一つとってもできることは多様です。 今回は第一回目として、そもそもJavaScriptと...
まとめ
WordPressでscriptタグを使う場合は、その埋め込み位置によって実行されるタイミングが変わります。ページの表示速度に影響しないように、基本的にはフッター（</body>の直前）に埋め込むのがベストですね。
| 埋め込む位置 | 実行されるタイミング | 備考 |
| エディタ内 | ヘッダーを読み込んだ後 | ページごとにscriptを実行したい際にテキストエディタで使う |
| ヘッダー（<head>内） | ページ内で最初に実行される | 他のHTMLなどの読み込みが遅れる可能性がある |
| フッター（</body>の直前） | 他の要素を読み込んだ後 | ページ表示速度に影響しない |
コメント