WordPressにGoogleタグマネージャーを設定する方法【初心者向け】
WordPressにGoogleタグマネージャー（GTM）を導入したい
そんな疑問をお持ちの方向けの記事です。
WordPressにGoogleタグマネージャー（GTM）を導入する方法は何通りもあり、慣れていない方はどれを選べばいいのかわからないとお悩みのことでしょう。
この記事では、WordPressにGoogleタグマネージャーを導入する際のベストプラクティスをお伝えします。
結論、WordPressにGTMを導入する場合には、プラグインを使って設定するのが一番おすすめです。
プラグインを使用する方法には、以下のようなメリットがあります。
- 設定が簡単
- どんなWordPressテーマでも導入できる
- テーマを変えても再設定の必要がない
さて、プラグインを使用したGTM経由の設定がベストプラクティスとお伝えしましたが、「プラグインを増やしたくない」「サイトの速度を少しでも早くしたい」など何らかの理由でこの方法を使いたくない方もいることでしょう。
そこでこの記事では、以下の2つも加えて紹介します。
- WordPressテーマの機能を使う方法
- テーマファイルを編集する方法
ご自身に合った方法で、Googleタグマネージャーを導入してみてください。
「そもそもGoogleタグマネージャーを導入した方がいいの？」という方は、以下の記事で詳しく解説していますので、あわせてご覧ください。
本記事の内容を包括的に解説した動画もあります。以下からご覧ください。
Googleタグマネージャーのアカウント作成
Googleタグマネージャーを初めて使う場合には、アカウントを作成しておきましょう。
アカウント作成
コンテナ作成
続けてコンテナを作成します。
GTMは、「アカウント > コンテナ」という階層構造になっています。アカウントは会社、コンテナはサイトを管理する単位と理解しておくとわかりやすいはずです。1サイトしか持っていない場合には、1アカウントに1コンテナという構成で問題ありません。
利用規約が表示されたら、「はい」で進みましょう。
タグマネージャーIDの取得
コンテナを作成すると、以下のような画面が表示されます。プラグインで導入する場合、前面に表示されているポップアップは閉じて構いません。
GTM管理画面の上部にある「GTM-」から始まる文字列が、Googleタグマネージャーの固有のIDです。
WordPressにGTMを導入する3つの方法
ここからは、WordPressにGTMを設置する方法を、おすすめ順に解説します。
それぞれの方法のメリットデメリットを表にまとめると以下のようになります。それぞれを鑑みて、ご自身のサイトに最適な方法で導入しましょう。
最もおすすめなのは、プラグインを使った方法です。ここでは、「Site Kit」または「GTM4WP」というプラグインを使った方法を紹介します。
| 導入方法 | メリット | デメリット |
|---|---|---|
| プラグイン | どんな環境でも対応可能。WordPressテーマを変えても再設定不要。 | ページスピードに影響がある可能性（気にするほどではない） |
| テーマの機能 | 設定が簡単。ページスピードに影響が少ない。 | 推奨とは異なる位置に設置される場合がある。WordPressテーマを変えると再度設定が必要。 |
| header.phpの編集 | 推奨位置に確実に設置できる。 | WordPressテーマを変えると再度設定が必要。 |
Site Kitプラグインを使う（推奨）
最も簡単でテーマに関わらず設定できるのが、プラグインを使う方法です。ここでは、Googleが公式にリリースしている「Site Kit by Google」の設定方法を紹介します。
WordPressの管理画面から「プラグイン ＞ 新規追加」と進みます。
プラグインの新規追加画面の検索窓に「Site Kit」と入力し検索し、「Site Kit by Google」という名前のGoogleアイコンのプラグインを追加します。
有効化すると、WordPressのサイドバーにSite Kitのメニューが追加されます。
Site Kitメニューの「設定」をクリックし、「ほかのサービスに接続」タブを選択します。
「タグマネージャーのセットアップ」リンクをクリックします。
Googleアカウントへのログイン画面が表示されたら、アカウントを選択し「続行」をクリックします。
タグマネージャーのアカウントとコンテナをプルダウンから選択します。
ここで、必ず「Site Kitでサイトにコードを設置する」のチェックをオンにしましょう。これを忘れると、WebサイトにGTMのコードが設置されません。
最後に「アナリティクスは設定せずに完了」をクリックして完了です（GoogleアナリティクスはGTM経由で設定するため、ここではアナリティクス設定は行いません）。
以下の表示が出れば完了です。
すでにWebサイトに別の方法でGTMが設定されている場合、「選択されたコンテナのタグは、すでにサイトに存在します」というエラーが出ます。その場合には、別のプラグインやテーマファイルにGTMのコードが設定されていないか確認しましょう。
Googleタグマネージャーを使用してGA4のタグを設定する場合、Site Kit内のGoogleアナリティクスの設定は不要です。こちらを有効にすると、GA4のタグが重複し不具合が起こりますので注意しましょう。
GTM4WPプラグインを使う（Site Kitが使えない場合）
稀に、Site Kitプラグインが使用できない場合があります。その場合は代替案として、「GTM4WP」プラグインを使用しましょう。
設定手順は以下の通りです。
WordPressの管理画面から「プラグイン ＞ 新規追加」と進みます。
プラグインの新規追加画面の検索窓に「GTM4WP」と入力し検索し、プラグインの「今すぐインストール」ボタンを押し、さらに「有効化」します。
追加済みプラグイン画面内でGTM4WPを探し、「Settings」をクリックします。
設定メニューが表示されるので、以下の画像の通りに設定します。
| 設定項目 | 設定内容 |
|---|---|
| Google Tag Manager ID | 「GTM-」から始まるGoogleタグマネージャーのIDを入力する |
| Container code ON/OFF | 「On」に設定 |
| Container code compatibility mode | 「On」に設定 |
上記に設定したら、一度保存ボタンを押しましょう。※これで完了ではありません。以下の再保存の手順も行ってください。
「保存」ボタンを押すと、一見保存されたように見えますが、「Container code ON/OFF」が「Off」に切り替わってしまいます。
再度、「On」に設定し保存ボタンを押しましょう。
WordPressテーマの機能を使う
WordPressテーマの中には、headタグ内とbodyタグ内にタグを埋め込める機能のあるものもあります。例えば当Webサイトでも使用しているSWELLであれば、カスタマイズ機能から設定できます。
注意点としてはheadタグだけでなく、bodyタグの中にもタグを埋め込まなければならないということです。headのみしか編集できないというテーマも多いので、その際には他の方法で設定しましょう。お使いのWordPressテーマでこうした機能があるかどうかは、テーマのヘルプページなどをご覧ください。
ここでは SWELLの場合の方法を紹介します。
Googleタグマネージャー管理画面の「GTM-XXXXXXXXX」から始まるIDをクリックします。
ポップアップが開き、GTMのコードが表示されます。次のステップで、このコードをWordPressに設定していきます。
WordPress管理画面から「外観 ＞ カスタマイズ」を選択します。
「高度な設定」を開くとタグを埋め込めるフォームが現れます。
GTMの管理画面で表示したタグを設置します。head用のタグを「直前」に、body用のタグは直後の方に設定しましょう。
最後に「公開」ボタンを押せば完了です。
テーマファイルに書き込む（難易度：高）
少し難易度は上がりますが、プラグインやWordPressの機能を使えない場合には、テーマファイルを直接編集することでGTMタグを埋め込むことも可能です。ちなみに当サイトもこの方法で設定しています。
誰にでもおすすめできる方法ではありませんので、「HTMLやPHPが何のことかわからない」という方は他の方法で設定するのが無難です。
WordPressのテーマファイルを編集する場合には、必ずファイルのバックアップをとるようにしてください。ちょっとしたエラーでも、Webサイトそのものが表示されなくなる場合があります（経験済み）。
テーマファイルに直接GTMを設定する方法は、次の2通りの方法があります。
- header.phpに書き込む
- function.phpにadd_action関数を書き込む
結果はどちらも同じになります。好きな方で設定しましょう。
header.phpに書き込む場合
テーマファイルに書き込む方法の中でわかりやすいのが、header.phpに書き込む方法です。タグが出力される場所に書き込めるので、「HTMLは読めるけどPHPはよくわからない」という方でも対応できるはずです。
WordPress管理画面から「外観 ＞ テーマファイルエディタ」と進みます。
※子テーマを使っている場合には、親テーマのheader.phpをFTPソフトなどを使い子テーマのフォルダに移動します。
子テーマのheader.phpの中からタグを探し、その直後にhead用のGTMタグを貼り付けます。
さらにheader.phpの中からタグを探し、直後にbody用のGTMタグを貼ります。
「ファイルを更新」ボタンを押して完了です。
add_action関数で設定する場合
function.phpにadd_action関数を追加して設定する方法もあります。add_action関数は、WordPressが特定のタイミングで処理を実行することができます。
今回の例であれば、headタグやbodyタグが呼び出されるタイミングでGTMのタグを出力するという処理を行うことができます。
この方法のメリットは、「ログインしている際にはタグを呼び出さない」など、条件によって細かく出力方法を指定できる点です。プログラミングが得意な方は色々応用できるはずです。
WordPress管理画面から「外観 ＞ テーマファイルエディタ」と進みます。
※子テーマを使っている場合には、親テーマのfunctions.phpをFTPソフトなどを使い子テーマのフォルダに移動します。
子テーマの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タグ開始直後にコードを出力しています。
実際に書き込んだものが以下です。
「ファイルを更新」ボタンを押して完了です。
上記コードを設置したことによる不具合については自己責任にてお願いいたします。
GTMのタグが正しく設置されているか検証する
ここでは、GoogleタグマネージャーのタグがWebサイトに正しく設置されているか確認する方法について解説します。
GTMのタグを確認する方法は以下の2つがあります。
- Tag Assistantによる確認
- ソースコードの確認
GTMのタグが正しく設定されているか否かは非常に重要なため、上記のどちらか一方ではなく、両方とも行うことを推奨します。
Tag Assistantで確認する
Tag Assistantは、Google関連のタグを検証するためのChrome拡張機能です。以下のリンクからChromeブラウザに導入しておきましょう。
Chromeに導入したら、以下の手順で確認します。
Tag Assistantを起動
Googleタグマネージャーを設置したサイトを開いた状態で「Tag Assistant」のアイコンをクリックすると、右側にサイドメニューが開き、Google関連のタグが一覧表示されます。
各タグをクリックすると動作しているイベントの状況を見ることができますが、「タグのトラブルシューティング」をクリックすると、さらに詳細な情報を見ることができます。
結構な割合で「タグが見つかりませんでした」という表示が出ますが、「タグのトラブルシューティング」をクリックすると表示されることがほとんどです。
タグの詳細情報を確認
「タグのトラブルシューティング」をクリックすると、以下のようなページが開きますので、「続行」をクリックします。
ページ上部に、「GTM-」から始まるタグが表示されることを確認します。
Tag Assistantの使い方については、以下の記事で詳しく解説しています。
ソースコードを確認する
Tag Assistantで確認できたら、念の為ソースコードも確認しておきましょう。Googleタグマネージャーのタグがどのように設置されているのかを知っておくことで、今後のトラブル時にも対処しやすくなるはずです。
Chromeの場合、ページ上で右クリックし「ソースを表示」を選択すると、別タブでページのソースコード（HTML）が表示されます。
GoogleタグマネージャーのタグはHTMLソース内のheadタグとbodyタグ内に設置するので、それぞれ確認します。
headタグ内を確認する
ソースコード上でCtrlキー＋Fキー（Macの場合はCommand＋F）のショートカットキーを押すと、ページ内検索をすることができます。
「GTM」というキーワードでページ内検索してみましょう。
以下はGTM4WPプラグインを使用して設定したGTMタグの例です。設定方法により、タグが若干異なる場合がありますが、<script></script>タグで囲まれた以下のようなコードが見つかれば問題ありません。
bodyタグ内を確認する。
同じ容量で、さらにページ内検索してみましょう。
<body>というタグよりも下に、以下のような<noscript></noscript>で囲まれたコードが見つかれば問題ありません。
GTM上にさらに各種タグを設置する
GTMをWordPressに設置して終わりではありません。GTMはタグを設定する土台でしかないため、GTM上にGA4やGoogle広告などのタグを設定する必要があります。
Googleアナリティクス（GA4）のタグを設定する方法について、詳しくは以下の記事で解説しているので、設定が完了していない方は続けてご覧ください。
WordPressにGTMを導入する際の注意点
Googleタグマネージャーを導入する際には注意点もあります。WordPress以外に導入する場合にも共通することなので押さえておきましょう。
直接設定しているGoogleアナリティクスタグを停止する
これまでにGA4のタグを直接設定していた場合には、GTM上でGA4設定が終わった後に削除しておきましょう。これを忘れてしまうと、ページビューなどのデータが重複カウントされてしまいます。直接設定しているかどうかわからない場合には、ソースコードを表示して「gtag」と検索してみましょう。
コンテナを忘れずに公開する
タグを設定したら、コンテナを忘れず公開するようにしましょう。よくありがちなのが、プレビューで検証して満足し、そのまま公開を忘れてしまうというもの。GTMの設定は公開するまではWebサイトに反映されませんので注意しましょう。
正しい位置にタグを設定する
GTMの導入でやりがちなのが、headタグ内に埋めるべきものをbodyに埋めてしまうなど、タグの設定位置の誤りです。GTMのタグはheadタグ用とbodyタグ用の2つに分かれているため、正しい場所に設定するよう注意しましょう。
自信がない方は、Site Kitプラグインによる設定が無難です。
よくある質問（FAQ）
ここでは、WordPressにGoogleタグマネージャーを設定する方法について、よくある質問とその回答をまとめています。
- WordPressにGoogleタグマネージャー（GTM）を導入する一番おすすめの方法は何ですか？
-
プラグインを使って設定するのが一番おすすめです。設定が簡単で、どんなWordPressテーマでも導入でき、テーマを変更しても再設定の必要がないからです。
Googleも公式に「Site Kit by Google」というプラグインを出しています。公式のものでエラーが起きた際には「GTM4WP」プラグインを使用しましょう。
- プラグインを使わずテーマの機能やテーマファイルを編集する方法は、どんな場合に使いますか？
-
プラグインを増やしたくない、またはサイトの速度を少しでも早くしたいといった場合に使います。ただし、これらはテーマに依存することや、PHPなどの技術的な知識が必要なため、誰にでもおすすめできる方法ではありません。
- テーマファイルを直接編集してGTMを導入する方法は初心者でもできますか？
-
初心者にはおすすめしません。
テーマファイルを直接編集する方法は、難易度が高く、HTMLやPHPの知識が必要です。「HTMLやPHPのコードを見ても、何を書いているのかかわからない」という方は、プラグインなど他の方法を選ぶのが無難です。
もしもファイルを編集する際は、必ずバックアップを取るようにしてください。
- GTMのタグが正しく設置されているか確認する方法はありますか？
-
Tag Assistant（Chrome拡張機能）とソースコードの確認の2つの方法で検証しましょう。
Tag Assistantの使い方については、以下の記事で詳しく解説しています。
- GTMをWordPressに設定しましたが、GA4でデータが取れません。
-
GTMはタグを設定するための「土台」です。GTMの設置が完了したら、GTM上にGoogleアナリティクス（GA4）のタグを設定する必要があります。GA4の設定方法については以下の記事をご覧ください。
まとめ
WordPressにGoogleタグマネージャー経由でGA4を導入する方法について解説しました。
WordPressは自由度が高い分、GTMを設定する方法も複数あります。プラグインを使うのが最も簡単でおすすめですが、ご自身の環境に合った方法で導入するのが良いでしょう。
GTMは、GA4の機能を最大限に活かすための必須アイテムです。導入後はカスタムイベントを設定し、ユーザー行動の可視化にもトライしてみてください。
GTMによるGA4カスタムイベントの設定方法は以下の記事で詳しく解説しています。こちらもあわせてご覧ください。
GTM＆GA4を活用し、あなたのWebサイトの成果を最大化しましょう。
YouTubeチャンネル
本サイトの内容を動画でも発信中です。文章で見てもいまいちよくわからないという方はこちらもご覧ください。
