【GA】WordPressにトラッキングコードを埋め込む方法と設置場所を解説

発行されたトラッキングコードをWordPressに設置すれば、グーグルアナリティクスの導入もついに完了です!

「Google Analytics(GA)」への登録がすんだら、発行されたトラッキングコードというデータの計測に使用するタグを、WordPressの本体に埋め込むことで、アナリティクスは導入が完了となりますが、このコードを設置する場所はどこなのか? という問題が発生するのではないかと思います。

じつは、初期状態の子テーマを使用しているWordPressには、タグ(コード)の貼り付け場所として指定されている<head>というものがまだないから。

そのため、コードを埋め込む前に、それを設置する場所をつくってあげなければならないのですが、これは、ここまでの作業が進んでいれば、なにもむずかしいことはありません。今回は、そんなトラッキングコードを設置する場所の作成方法と、設置のしかたについて解説していきます。

また、コードを張る位置に関して、<head>の直後・直前など、なぜか人によって意見が分かれたりするという話もあるので、これについても、あわせて見ていくことにしましょう。

関連記事

アナリティクスの登録方法はこちら
「Google Analytics」の登録方法と初期設定&コードの取得手順までを解説

グーグルアナリティクスのトラッキングコードの確認方法

グーグルアナリティクスの管理画面

今回の作業は、いってしまえば「発行されたトラッキングコードをWordPressに設置する」というだけのものなのでご安心を。まずは取得したコードを確認するところから始めていきましょう。

グーグルアナリティクス(GA4)の登録が完了すると、このように管理画面にアクセスできるようになっていて、左側にはメニューがならんでいると思うのですが、ここでは左下にある「管理」をクリックしてください。

グーグルアナリティクスの管理メニュー

管理メニューが表示されたら、「プロパティ」という項目の中にある「データストリーム」をクリック。

グーグルアナリティクスのデータストリーム

右側に表示された自身のブログをクリックします。

グーグルアナリティクスのトラッキングコードの場所

すると、アナリティクスへの登録が完了したときに表示された画面が出てくるので、「タグ設定手順」という項目の上側にある「グローバルサイトタグ(gtag.js)を……設定」をクリックしましょう。

アナリティクストラッキングコード(グローバルサイトタグ)

展開された部分に書かれているコード、これこそが、グーグルアナリティクスのトラッキングコード(計測タグ)です。

あとは、コードの上に書いてある説明のとおり、HTMLの<HEAD>セクションにコピーする、つまりWordPressの<head>という場所にこれをコピーしてはりつけるだけなのですが、冒頭のとおり、とくに公式テーマなどを利用している場合は、この段階では子テーマには<head>はないので、さきにそれをつくってあげる必要があります。

ということで、この画面はいったんそのままにしておき、子テーマに<head>をつくる作業を始めていきましょう!

WordPressにトラッキングコードを設置する方法

ここからが今回の作業の本番。コードを埋め込む<head>という部分は、WordPressでは「header.php」というファイルの中にあるので、子テーマにその「header.php」を作成し、そこにトラッキングコードを設置するという作業をおこなっていきます。

ちなみに、無料テーマの「Cocoon」を利用している場合は以下のとおりで、

コクーンでのトラッキングコードを張る場所

「Cocoon設定 アクセス解析・認証  その他のアクセス解析・認証コード設定」と進んでいくと、「ヘッド用コード」という欄がすでに用意されているので、このさきの作業をおこなう必要はどうやらないようです。

とはいえ、一般的なのは「header.php」を作成する方法であって、「Twenty」シリーズなどの公式テーマにはそういった便利な機能はなく、この作業の内容を知っておけば、どのテーマでも対応できるようになると思うので、今回はこのまま話を進めていきたいと思います。

それでは、作業開始!

イブスター店長
イブスター店長

オールドスタイル、知っておいて、損はなしだ

1. 親テーマの「header.php」を用意する

ワードプレスのテーマエディターで親テーマを選択

子テーマに「header.php」を作成するというのは、つまるところ、親テーマの同ファイルを複製して子テーマに受け継がせるというだけの話なので、まずはダッシュボードからテーマエディターをひらき、「編集するテーマを選択」の中から、使用しているテーマの親テーマを選択します。

テーマエディターの使い方を忘れてしまった方は、以下の作業内容をふりかえっておいてください。

関連記事

テーマエディターの使い方はこちら
【CSS】WordPressでのブログのカスタマイズ&スタイルシートの使い方

ワードプレスの親テーマのヘッダー

編集するテーマが親テーマに切り替わったら、「テーマファイル」を下にスクロールしながら「テーマヘッダー(header.php)」をさがしていき、見つけたらそれをクリックしましょう。

テーマヘッダーの内容

「テーマヘッダー」をクリックすると、このようにファイルの中身が表示されると思います。この中身を子テーマにコピーしてあげれば、子テーマ側でも「header.php」が使えるようになるというわけですね。

そんなわけで、この画面もあとで使うのでそのままにしておき、つぎの作業に移行しましょう!

2.「FTP」を利用して子テーマに「header.php」を作る

ロリポップFTPの最初の画面

ここからの作業は、レンタルサーバー(ロリポップ! )の「FTP」を操作しておこなっていきます。まずは簡単インストールで作成した、自身のブログのフォルダをクリック。

「child」のフォルダをクリック

「wp-content  themes」と進んでいき、子テーマをつくるさいに作成した「child」のフォルダをクリックします。

「FTP」の使い方を忘れてしまった方は、こちらも子テーマをつくったときの作業を再確認しておいてください。

関連記事

ロリポップ「FTP」の使い方はこちら
WordPressの公式テーマ「Twenty」シリーズの使い方と子テーマの作り方

「child」のフォルダ内に新規ファイル作成

そして「child」のフォルダ内で、「新規ファイル作成」をクリックしたら、

「header.php」のファイルを作成

ファイルの名前を「header.php」と入力し、

親テーマのの「header.php」をファイルにコピー

ファイルの中身にさきほどWordPress本体で表示させた、親テーマの「header.php」の内容をそのままコピーしてはりつけ、あとは「保存する」をクリックすれば……

FTPに作成した「header.php」のファイル

子テーマで使用する「header.php」のファイル作成は完了! 

WordPressの本体にもどって、トラッキングコード設置の作業を完了させましょう!

3. <head>の中にトラッキングコードを貼り付ける

編集するテーマで子テーマを選択

レンタルサーバーの「FTP」で、「header.php」のファイル作成が完了したら、WordPressの画面にもどり、「編集するテーマを選択」から、エディターを子テーマにもどします。

新たに作成されたテーマヘッダーのファイル

そうすると、子テーマに新しく「テーマヘッダー(header.php)」のファイルが作成されているので、こちらをクリック。

テーマヘッダー内の<head>タグ

ファイルを確認していくと、親テーマとまったく同じ内容となっていて、その中に<head>……</head>という記述があると思うので、最後に、この中にアナリティクスのトラッキングコードを埋め込めば、今回の作業も完了となります。

ただ、ここでひとつ微妙な問題が。

テーマヘッダーの<head>開始タグと終了タグ

グーグルアナリティクスのトラッキングコードは、タグが始まった「開始タグ」の<head>の直後に設置するという意見と、「終了タグ」の</head>の直前に設置するという意見とで分かれているのです。

タグの設置場所は<head>の「直後」でOK!

さて、大詰めの段階で発生したこのなぞですが、グーグルの説明によると、はりつける場所は以下のとおりで、

グローバル サイトタグをコピーし、測定する各ウェブページの<head>タグ(開始タグ)の直後に貼り付けます。Google アナリティクスのグローバル サイトタグを設定する

トラッキングコードは<head>の直後となっています。

では、なぜ終了タグである</head>の直前という意見が散見されるのか私なりに調査したところ、「同期と非同期」、つまりコードを書く順番による読み込み速度の関係も考えられましたが、最終的には、情報がひとつ前の段階で止まっている、ようはそれ(終了タグの</head>の直前)は、古い情報なのではないかという結論にたどりつきました。

というのも、じつはグーグルアナリティクスのトラッキングコードは日々進化していて、2021年現在は5世代目(グローバルサイトタグ)となっているのですが、ひと世代まえの4世代目(ユニバーサルアナリティクスタグ)では、設置のしかたは以下のように説明されていたからです。

JavaScript スニペット
Google アナリティクスをサイト上で有効にするには、JavaScript コードをページの</head>終了タグの直前に追加する必要があります。高度な設定 – ウェブ トラッキング(analytics.js)

ようするに、トラッキングコードを終了タグの</head>の直前に設置するというのは、これの(4世代目)ことをいっているのではないかと思われるので、最新版の5世代目であるグローバルサイトタグを設置するのは、開始タグである<head>の直後、すなわち以下のようにしたほうがいいのではないかと思われます。

<head>の直後にトラッキングコードを設置

作業を始める前に確認したアナリティクスのトラッキングコードを、<head>の下に1行空けて(空けなくても問題はない)そのままコピペ。最後に「ファイルを更新」をクリックすれば、トラッキングコードの設置作業は完了です!

ためしにスマホなどでブログにアクセスし、管理画面の「リアルタイムを表示」という計測画面をクリックしてみれば、そのアクセス数がカウントされていると思いますよ。

今回のまとめ

・トラッキングコードはデータストリームから確認
・コードは「header.php」を作って<head>の直後に設置
・じつをいうと終了タグの</head>の前でも計測はできる

最後のトラッキングコードの設置場所については、じつは終了タグの直前でも計測はできるため、どちらでも問題はないのかもしれませんが、グーグルのヘルプを見るに、設置場所がまちがっていることで正常な計測がおこなわれないということもあるようなので、これはやはり開始タグの<head>の直後がいいのではないかと思います。

また、今回の作業でグーグルアナリティクスの導入は完了となりますが、ブログの運営作業を円滑に進めるには、あともう1つだけ計測ツールを入れておく必要があるので、次回は2つめの計測ツールである「サーチコンソール」というものを導入する作業をおこなっていくことにします。

そして次回の計測ツールの導入が完了すれば、しばらくつづいたWordPressの設定編もついに終了。もうひと踏ん張りなので、気合いを入れていきましょう!

関連記事

次回:サーチコンソールの導入はこちら
「Google Search Console」への登録とWordPressでの所有権の確認方法

ロリポップへの登録方法はこちらで解説
【登録】ロリポップ・レンタルサーバーでのブログの始め方と申し込み手順

スポンサーリンク
この記事をシェアする

コメントを残す

日本語が含まれない投稿は反映されませんのでご注意ください。なお、コメントは承認制となっているため、反映までにお時間をいただく場合などがございます。