WordPressにGoogleタグマネージャーとGA4を導入する3つの方法

2023年5月4日2024年4月25日

屋嘉比馨

GA4とWordPressを連携させたい
WordPressにGA4を導入する方法がたくさんあってよくわからない
WordPressにGoogleタグマネージャーを導入したい

そんな疑問をお持ちの方向けの記事です。

WordPressにGA4やGoogleタグマネージャーを導入する方法は何通りもあり、慣れていない方はどれを選べばいいのかわからないとお悩みのことでしょう。

この記事では、WordPressにGA4を導入する際のベストプラクティスをお伝えします。

結論、WordPressにGA4を導入する場合には、「Site Kit」プラグインを使いGoogleタグマネージャー経由で設定するのが一番おすすめです。

プラグインを使用することで、以下のようなメリットがあります。

設定が簡単
どんなWordPressテーマでも導入できる
テーマを変えても再設定の必要がない

また、Googleタグマネージャー経由で設定することで、以下も可能になります。

広告タグやマーケティングツール導入時の作業効率化
GA4のカスタムイベントによるクリックやスクロールなどのユーザー行動データ収集

GoogleタグマネージャーでGA4を設定するメリットはたくさんありすぎるためここでは割愛しますが、詳しく知りたい方は以下の記事もあわせてご覧ください。

WordPressにGTMを導入する3つの方法

ここからは、WordPressにGTMを設置する方法を、おすすめ順に解説します。

それぞれの方法のメリットデメリットを表にまとめると以下のようになります。それぞれを鑑みて、ご自身のサイトに最適な方法で導入しましょう。

導入方法	メリット	デメリット
プラグイン	どんな環境でも対応可能。WordPressテーマを変えても再設定不要。	ページスピードに影響がある可能性（気にするほどではない）
テーマの機能	設定が簡単。ページスピードに影響が少ない。	推奨とは異なる位置に設置される場合がある。WordPressテーマを変えると再度設定が必要。
header.phpの編集	推奨位置に確実に設置できる。	WordPressテーマを変えると再度設定が必要。

プラグインを使う

最も簡単でテーマに関わらず設定できるのが、プラグインを使う方法です。ここでは、Googleが公式にリリースしている「Site Kit by Google」の設定方法を紹介します。

STEP

プラグインの追加

WordPressの管理画面から「プラグイン＞新規追加」と進みます。

プラグインの新規追加画面の検索窓に「Site Kit」と入力し検索し、「Site Kit by Google」という名前のGoogleアイコンのプラグインを追加します。

有効化すると、WordPressのサイドバーにSite Kitのメニューが追加されます。

STEP

Googleアカウント連携

Site Kitメニューの「設定」をクリックし、「ほかのサービスに接続」タブを選択します。

「タグマネージャーのセットアップ」リンクをクリックします。

Googleアカウントへのログイン画面が表示されたら、アカウントを選択し「続行」をクリックします。

STEP

Googleタグマネージャーを有効化

タグマネージャーのアカウントとコンテナをプルダウンから選択します。

ここで、必ず「Site Kitでサイトにコードを設置する」のチェックをオンにしましょう。これを忘れると、WebサイトにGTMのコードが設置されません。

最後に「アナリティクスは設定せずに完了」をクリックして完了です（GoogleアナリティクスはGTM経由で設定するため、ここではアナリティクス設定は行いません）。

注意点

すでにWebサイトに別の方法でGTMが設定されている場合、「選択されたコンテナのタグは、すでにサイトに存在します」というエラーが出ます。その場合には、別のプラグインやテーマファイルにGTMのコードが設定されていないか確認しましょう。

GA4のタグを直接設定したい場合（非推奨）

どうしてもGTM経由ではなくGA4のタグを直接設定したい場合には、Site Kitのメニュー内にGA4を有効にする機能がありますので、こちらをセットアップにすれば完了です。タグマネージャーを有効にしている場合は不要です（重複カウントされてしまいます）。

繰り返しになりますが、GA4はGoogleタグマネージャー経由で設定しなければ機能の半分も活用できません。特別な事情がない限りは、GTMを利用するようにしましょう。

WordPressテーマの機能を使う

WordPressテーマの中には、headタグ内とbodyタグ内にタグを埋め込める機能のあるものもあります。例えば当Webサイトでも使用しているSwellであれば、カスタマイズ機能から設定できます。

注意点としてはheadタグだけでなく、bodyタグの中にもタグを埋め込まなければならないということです。headのみしか編集できないというテーマも多いので、その際には他の方法で設定しましょう。お使いのWordPressテーマでこうした機能があるかどうかは、テーマのヘルプページなどをご覧ください。

ここではSwellの場合の方法を紹介します。

STEP

Googleタグマネージャーのタグを取得する

Googleタグマネージャー管理画面の「GTM-XXXXXXXXX」から始まるIDをクリックします。

ポップアップが開き、GTMのコードが表示されます。次のステップで、このコードをWordPressに設定していきます。

STEP

カスタマイズメニューを開く

WordPress管理画面から「外観＞カスタマイズ」を選択します。

STEP

「高度な設定」にタグを記述する

「高度な設定」を開くとタグを埋め込めるフォームが現れます。

GTMの管理画面で表示したタグを設置します。head用のタグを「直前」に、body用のタグは直後の方に設定しましょう。

STEP

公開

最後に「公開」ボタンを押せば完了です。

GA4のタグを直接設定したい場合（非推奨）

やむをえずGA4を直接WordPressに設置する場合には、headタグの中にGA4のトラッキングコードを設定すれば完了です。この場合は、bodyタグ内の設定は必要ありません。

GA4のトラッキングコードは、GA4管理画面の「データストリーム＞タグの実装手順を表示する」から取得できます。

テーマファイルに書き込む

少し難易度は上がりますが、プラグインやWordPressの機能を使えない場合には、テーマファイルを直接編集することでGTMタグを埋め込むことも可能です。ちなみに当サイトもこの方法で設定しています。

誰にでもおすすめできる方法ではありませんので、「HTMLやPHPが何のことかわからない」という方は他の方法で設定するのが無難です。

テーマファイルを編集するときの注意点

WordPressのテーマファイルを編集する場合には、必ずファイルのバックアップをとるようにしてください。ちょっとしたエラーでも、Webサイトそのものが表示されなくなる場合があります（経験済み）。

テーマファイルに直接GTMを設定する方法は、次の2通りの方法があります。

header.phpに書き込む
function.phpにadd_action関数を書き込む

結果はどちらも同じになります。好きな方で設定しましょう。

header.phpに書き込む場合

テーマファイルに書き込む方法の中でわかりやすいのが、header.phpに書き込む方法です。タグが出力される場所に書き込めるので、「HTMLは読めるけどPHPはよくわからない」という方でも対応できるはずです。

STEP

テーマファイルエディタを開く

WordPress管理画面から「外観＞テーマファイルエディタ」と進みます。

※子テーマを使っている場合には、親テーマのheader.phpをFTPソフトなどを使い子テーマのフォルダに移動します。

STEP

header.phpにタグを追加する

子テーマのheader.phpの中からタグを探し、その直後にhead用のGTMタグを貼り付けます。

さらにheader.phpの中からタグを探し、直後にbody用のGTMタグを貼ります。

STEP

公開

「ファイルを更新」ボタンを押して完了です。

add_action関数で設定する場合

function.phpにadd_action関数を追加して設定する方法もあります。add_action関数は、WordPressが特定のタイミングで処理を実行することができます。

今回の例であれば、headタグやbodyタグが呼び出されるタイミングでGTMのタグを出力するという処理を行うことができます。

この方法のメリットは、「ログインしている際にはタグを呼び出さない」など、条件によって細かく出力方法を指定できる点です。プログラミングが得意な方は色々応用できるはずです。

STEP

テーマファイルエディタを開く

WordPress管理画面から「外観＞テーマファイルエディタ」と進みます。

※子テーマを使っている場合には、親テーマのfunctions.phpをFTPソフトなどを使い子テーマのフォルダに移動します。

STEP

functions.phpにタグを追加する

子テーマのfunctions.phpの末尾に、次のコードを貼り付けます。

※[ここにGTMのhead用コードを記述][ここにGTMのbody用コードを記述]のそれぞれにご自身のGTMコードを記述してください。

//GTMコンテナ出力（head用）
add_action('wp_head', function() {
	?>

  [ここにGTMのhead用コードを記述]

	<?php
  }, 0);

//GTMコンテナ出力（body用）
add_action('wp_body_open', function() {
	?>
  
  [ここにGTMのbody用コードを記述]

	<?php
  }, 0);

コードの解説

GTMコンテナ出力（head用）：wp_head関数を使ってheadタグ内にコードを出力しています。
GTMコンテナ出力（body用）：wp_body_open関数を使ってbodyタグ開始直後にコードを出力しています。

実際に書き込んだものが以下です。

STEP

公開

「ファイルを更新」ボタンを押して完了です。

注意

上記コードを設置したことによる不具合については自己責任にてお願いいたします。

補足

技術的な話をすると、GTMをWebサイトに導入するには、HTMLのheadタグ内とbodyタグ内にそれぞれタグを埋め込む必要があります。これらを簡単にするのがプラグインやWordPressテーマの機能です。どの方法を使っても、「Webサイト上にGTMのタグが出力される」という結果自体は同じになるということは知っておきましょう。

それぞれの設定が終わった後に、Webサイトのソースコードを見てみましょう。ページ内検索で「GTM」と入力すれば、GTMのタグを見つけられるはずです。

GTMをWordPressに設置して終わりではありません。GTMはタグを設定する土台でしかないため、GTM上にGA4のタグを設定する必要があります。次の章でGTMにGA4を設定する方法を解説します。

GTMにGA4のタグを設定する方法

WordPressにGoogleタグマネージャーの設置が完了したら、GA4のタグを設定しトラッキングできる状態にしておきましょう。

STEP

タグの作成

GTM管理画面で「新しいタグを追加」をクリックします。

最初にタグの名前をつけておきましょう。ここでは「GA4設定」とします。

名前をつけたら、「タグの設定」エリアの中央部分をクリックします。

「タグタイプを選択」のメニュー内から、「Google アナリティクス：GA4設定」を選択します。

「測定ID」に、GA4の測定IDを記入します。

GA4の測定IDがどこにあるかわからない場合は、以下の手順で取得してください。

GA4測定IDの取得方法

GA4の測定IDは、以下の方法で取得できます。

GA4管理画面左下の歯車アイコンをクリックし、「データストリーム」を選択します。

データストリーム名をクリックします。

表示された「ウェブストリームの詳細」の中の「G -XXXXXXXXXX」という文字列がGA4の測定IDです。これをGTMに設定します。

STEP

トリガーの作成

次はトリガーの作成です。

トリガーとは、タグを動かす条件のことを指します。今回は「GA4のタグを全ページで動かす」という条件を設定します。

タグ設定画面「トリガー」エリアの中央付近をクリックします。

「トリガーの選択」画面で、「Initialization – All Pages」を選択します。

「Initialization – All Pages」は、GA4のタグをGTMが設置されたWebサイト内の全ページで最初に動かすという働きをするトリガーです。これを設定することで、すべてのページでGA4のトラッキングコードを動かすことができるようになります。

トリガーを設定したら、「保存」ボタンを押して完了です。

STEP

プレビュー

公開前に、タグが正しく設定されたかどうかプレビュー機能で確認します。

GTM管理画面右上の「プレビュー」ボタンを押します。

新しく「Tag Assistant」というタブが開くので、入力欄に検証したいサイトのURLを記入し「Connect」ボタンを押します。

新しいタブが立ち上がり、検証するWebサイトが表示されたら、Tag Assistantタブに戻り、「Continue」ボタンを押します。

Tag Assistantの画面で、タグが正しく動いているかを確認していきます。

画面内には「Tags Fired」と「Tags Not Fired」という二つのエリアがあり、現在動いているタグは「Tags Fired」側に表示されます（マーケティング界隈では、タグが「発火している」という表現をします）。

以下の画像のように、先ほど設定した「GA4設定」タグがTags Firedのエリアにあれば、正しく動いている証拠です。

念の為、GA4のリアルタイムレポートでも確認しておきましょう。

GTMのプレビューを起動した状態でGA4のリアルタイムレポートにアクセスすると、tagassistant.google.comを経由したアクセスがカウントされているはずです（数秒のタイムラグがあります）。

STEP

公開

タグ設定が完了しプレビューで動作確認をしたら、設定内容を本番公開しましょう。

GTM管理画面右上の「公開」ボタンを押します。

開いた画面で「バージョン名」にわかりやすい名前を記入します。後でどんな作業を行ったか確認しやすいよう、バージョン名には作業内容を記入するのがおすすめです。ここでは「GA4初期設定」としておきます。

右上の「公開」ボタンを押して完了です。

以上でGoogleタグマネージャー経由のGA4設定は完了です。GA4のリアルタイムレポートなどでアクセス状況を見てみましょう。GA4はデータの反映までに時間がかかるので、リアルタイムで見られないデータは翌日以降に確認できます。

WordPressにGTMを導入する際の注意点

Googleタグマネージャーを導入する際には注意点もあります。WordPress以外に導入する場合にも共通することなので押さえておきましょう。

直接設定しているGoogleアナリティクスタグを停止する

これまでにGA4のタグを直接設定していた場合には、GTM上でGA4設定が終わった後に削除しておきましょう。これを忘れてしまうと、ページビューなどのデータが重複カウントされてしまいます。直接設定しているかどうかわからない場合には、ソースコードを表示して「gtag」と検索してみましょう。

コンテナを忘れずに公開する

タグを設定したら、コンテナを忘れず公開するようにしましょう。よくありがちなのが、プレビューで検証して満足し、そのまま公開を忘れてしまうというもの。GTMの設定は公開するまではWebサイトに反映されませんので注意しましょう。

正しい位置にタグを設定する

GTMの導入でやりがちなのが、headタグ内に埋めるべきものをbodyに埋めてしまうなど、タグの設定位置の誤りです。GTMのタグはheadタグ用とbodyタグ用の2つに分かれているため、正しい場所に設定するよう注意しましょう。
自信がない方は、Site Kitプラグインによる設定が無難です。

まとめ

WordPressにGoogleタグマネージャー経由でGA4を導入する方法について解説しました。

WordPressは自由度が高い分、GTMを設定する方法も複数あります。プラグインを使うのが最も簡単でおすすめですが、ご自身の環境に合った方法で導入するのが良いでしょう。

GTMは、GA4の機能を最大限に活かすための必須アイテムです。導入後はカスタムイベントを設定し、ユーザー行動の可視化にもトライしてみてください。

GTMによるGA4カスタムイベントの設定方法は以下の記事で詳しく解説しています。こちらもあわせてご覧ください。

WordPressにGoogleタグマネージャーとGA4を導入する3つの方法