GoogleタグマネージャーをWordPressに導入する3つの方法【プラグインあり・なし両方】

Googleが無料で提供しているタグ管理システム「Googleタグマネージャー」は、サイトやアプリの分析や測定を効率的に行える便利なツールです。

Googleタグマネージャーの解説はこちら

今回は、そんなGoogleタグマネージャーをWordPressで構築したサイトへ導入する方法を解説いたします。
それには、3通りの設置方法があります。

  1. プラグインを使用する
  2. テーマの設定で挿入する
  3. ソースコード(PHP)で挿入する
目次はこちら

プラグインを使用する

最も設定しやすいのは、プラグインを利用する方法です。
Googleタグマネージャーを挿入できるプラグインでオススメなのは下記の2つです。

Site Kit by Google

WordPressプラグイン Site Kit

Googleが提供している公式のWordPressプラグインです。Googleタグマネージャーだけでなく、GA4やサーチコンソール、Googleアドセンスなども設置できます。更にアクセス推移もWordPress上で確認できます。

GTM4WP

WordPressプラグイン GTM4WP

WordPressにGoogleタグマネージャーを入れるだけのシンプルなプラグインです。
「Site Kit」のような複数の機能が不要であれば、こちらがおすすめです。

目的に合わせて、どちらか一つダウンロードします。
ただし、どちらも日本語の対応があまりできていないため、ブラウザの翻訳機能を使いながら設定すると良いでしょう。

プラグインに関するお問い合わせは受け付けておりません。ご了承ください。

プラグインをインストールする方法

WordPressにログインしたら、左メニュー「プラグイン」→「新規プラグインを追加」を選択します。
WordPress 管理画面 プラグイン→新規プラグインを追加
インストールしたいプラグインを検索し、目当てのものが表示されたら「今すぐインストール」をクリックします。
インストールできたら、「有効化」ボタンをクリックします。
WordPress プラグイン 有効化 クリック

「インストール済みプラグイン」の一覧に追加したプラグインが表示されました。

Site Kitでの導入方法

Google公式のSite Kitプラグインを使ったGoogleタグマネージャーの導入方法をご紹介いたします。

WordPressプラグイン Site Kit
プラグインをインストールしたら、「プラグイン」の一番上に表示される「セットアップを開始」をクリックします。
WordPress プラグイン Site Kit「セットアップを開始」ボタン
チェック項目を確認し、「Googleアカウントでログイン」をクリックします。

GoogleタグマネージャーでGoogleアナリティクスを設定するため、「設定の一環でGoogle Analyticsを接続します。」のチェックは外しておきましょう。でなければ、Googleアナリティクスの設定も合わせて自動的に行われてしまいます。Googleアナリティクスも同時に設置すると二重計測されてしまうため、Googleタグマネージャーに1本化する方が望ましいです。ただGoogleアナリティクスの連携をしてしまっても、後ほど削除できますのでご安心ください。

その下の「Site Kitの改善に役立たせていただきますので、よろしければ匿名の使用データを共有してください。」のチェックは、もし匿名データを共有しないのであれば外したままで構いません。セットアップ完了後、「設定」画面にて変更できます。

Googleタグマネージャーを設定しているGoogleアカウントを選択し、画面に従って次に進みます。
確認事項が表示されるので、引き続き画面に従って次に進んでいきます。
Googleアカウントとの連携が完了したら、「設定」画面に移動します。
設定画面に移動したら、「ほかのサービスに接続」→「タグマネージャーのセットアップ」をクリックします。
Googleタグマネージャーを設定しているGoogleアカウントを再度選択し、画面に従って進みます。
「アカウント」と「コンテナ」を選択し、「アナリティクスは設定せずに完了」をクリックします。

以上でGoogleタグマネージャーの設定は完了です。

Site Kit タグマネージャーを設定完了しました。
設定が完了するとこのような画面が表示されます。

Googleアナリティクスの連携解除方法

各Googleサービスとの接続は後で解除できます。今回は、Googleアナリティクスを例にご説明いたします。

Site Kitの「設定」に移動したら「接続済みサービス」の一覧から「アナリティクス」を選択し、下の方にある「編集」をクリックします。
編集画面が開いたら、一番下の右端にある「アナリティクスをSite Kitから切断」をクリックします。
本当に切断するか確認のポップアップが表示されたら、「接続解除」をクリックします。
アナリティクスをSite Kitから切断しますか? 接続解除

これでGoogleアナリティクスとの接続は解除されました。

Site Kit 設定 接続済みサービス
Site Kitの「設定」の「接続済みサービス」から「アナリティクス」が消えているのが確認できます。

GTM4WPでの導入方法

GTM4WPプラグインでGoogleタグマネージャーを導入する方法を解説いたします。こちらはSite Kitよりもシンプルで早く導入できます。

WordPressプラグイン GTM4WP
GTM4WPをインストールして有効化したら、設定画面を開きます。

設定画面を開く方法は2通りあります。

いずれかの方法で構いません。どちらの場合でも同じ画面が開きます。

「Google Tag Manager ID」にGoogleタグマネージャーのコンテナIDを記入し、「Container code ON/OFF」を「On」、「Container code compatibility mode」を「Off」にしたら、一番下にある「変更を保存」をクリックします。

Container code ON/OFF」を「On」にしなければ、Googleタグマネージャーのコードは挿入されません。
Container code compatibility mode」はGoogleタグマネージャーのコードの挿入場所を調整するための項目です。特別な理由がない限り、基本的に「Off」で構いません。

コンテナIDはGoogleタグマネージャーの管理画面で確認できます。

保存後、「Container code ON/OFF」が「Off」になっていることがあるため、再度「On」を選択して「変更を保存」をクリックします。

保存後、「Container code ON/OFF」が「On」のままになっていたら完了です。

【番外編】ソースコード管理プラグインで挿入する

他には、ソースコードを管理するプラグインでGoogleタグマネージャーのコードを挿入する方法があります。

WordPressの共通部分や特定ページに挿入するソースコードを作成して管理できるプラグインです。

WordPressプラグイン WPCode
WPCodeをインストールして有効化したら、左メニューの「コードスニペット」→「スニペットを追加」をクリックします。
「カスタムコード (新規スニペット) を追加」の「スニペットを使用」をクリックします。
Googleタグマネージャーの<head><body>タグ内に挿入するコードをそれぞれ作成します。
Googleタグマネージャーのコードは2つ挿入する必要があります。

Googleタグマネージャーの導入時に作成するカスタムコードスニペットの設定内容を詳しく説明したします。

<head>タグ内に挿入するコード

<body>タグ内に挿入するコード

両方に共通する設定

ここからは<head>タグと<body>タグに挿入するコードの両方とも同じ設定です。

WPCode デバイスタイプ すべて/スマートな条件付きロジック ログイン中は非表示
「デバイスタイプ」は「すべてのデバイスタイプ」のままにします。
「スマートな条件付きロジック」は「ロジックを有効化」にチェックを入れ、「ログイン中がTrue」のとき「非表示」に設定します。すると、WordPressにログインしているユーザーはGoogleタグマネージャーでの計測が動作しないようになります。
WPCode 基本情報 優先順位 1
「基本情報」の「優先順位」を「1」にします。「優先順位」とは、コードを表示する順番です。これにより、他のカスタムスニペットより上にコードが出力されます。
WPCode 有効 スニペットを保存
すべての設定が完了したら一番上の「スニペットを保存」をクリックし、その左のスイッチボタンを「有効」にします。「無効」のままだとコードが挿入されませんので、必ず「有効」にしましょう。
「コードスニペット」→「ヘッダーとフッター」からも挿入できます。

今回紹介した方法以外にも、「ヘッダーとフッター」というWordPressの共通部分を編集する機能があります。

この方法でGoogleタグマネージャーのコードを挿入しても問題ございません。
ただし、この場合は「ログイン中は計測しない」という設定ができませんのでご注意ください。

プラグインに関するお問い合わせは受け付けておりません。ご了承ください。

テーマの設定で挿入する

弊社では「Snow Monkey」というWordPressテーマを使用しています。このSnow Monkeyでは、Googleタグマネージャーを挿入できるカスタマイズが可能です。

WordPress Snow Monkeyテーマ タグマネージャー設定方法

無料のWordPressテーマである「Cocoon」にも、Googleタグマネージャーを設定できる項目があります。

WordPress Cocoonテーマ Googleタグマネージャー設定方法

このように、WordPressのテーマにはGoogleタグマネージャーを設定できるものもあります。
もし使用しているWordPressテーマがGoogleタグマネージャーに対応しているなら、新しくプラグインを導入する必要はありません。

ソースコード(PHP)で挿入する

こちらは、プラグインの利用によるサーバーの負荷を避けたい方や、Googleタグマネージャーに対応していないWordPressテーマを使用している方に最適です。コードを編集するため、基本的に上級者向けの方法となります。

ここからご紹介する方法を行う際は、自己責任でお願いいたします。

これからご紹介する方法は、ウェブの制作技術(PHP、HTML、FTPなど)やWordPress構造の基本的な知識がある方向けです。「PHP」「FTP」といった言葉の意味が分からない方には非推奨となります。ご紹介した方法を実行して起きたトラブルに関しましては、責任をおいかねますのでご了承ください。

WordPressテーマの設定ファイル(functions.php)に記述する

WordPressのテーマの機能や設定などを記載するファイル「functions.php」に追記する方法です。

header.phpに直接追記する方法もありますが、あまりおすすめできません。

header.phpの<head><body>内にGoogleタグマネージャーのコードを直接記入しても、計測自体は問題なく行われます。しかし、WordPressのシステムやプラグインで出力しているコードとの兼ね合いもあり、直接記述してしまうとメンテナンス性が悪くなります。そのため、なるべくfunctions.phpに追記しましょう。

使用しているテーマが、WordPressにデフォルトで入っているものや配布されているものであれば、編集するファイルの場所(ディレクトリ)はこのようになります。

[WordPressがインストールされているフォルダ]

wp-content

themes

[WordPressメインテーマフォルダ](例:twentytwentyfour)

functions.php(編集しない)

[WordPress子テーマ(Child)フォルダ](例:twentytwentyfour-child)

ただし、テーマによって違う場合がございますので、必ず配布サイトをご確認ください。

直接メインテーマファイルのfunctions.phpは編集しないでください。

WordPressのメインテーマファイルを編集してしまうと、テーマがシステム更新されたときに追加したコードが消えてしまう可能性があります。WordPressテーマファイルのカスタマイズは、子テーマを作成して行いましょう。

もし独自のオリジナルテーマを作成しているなら、そのfunctions.phpに追記しましょう。

[WordPressがインストールされているフォルダ]

wp-content

themes

[独自で作成したWordPressテーマ]

functions.php(編集するファイル)

functions.phpを編集する前に必ずバックアップをとっておきましょう。エラーが出たとき、すぐに戻せるようにするためです。

今回は、子テーマで編集する場合をご紹介いたします。
子テーマがすでに存在しており、それを編集するという前提で説明をいたします。

テキストエディタツールでfunctions.phpの一番下にコードを挿入します。

テキストエディタツール(Visual Studio CodeやSublime Text、サクラエディタなど)を使って、functions.phpの一番下にに下記のコードを記述します。

うまく編集できない場合もあるため、Windowsに標準で入っている「メモ帳」で編集するのは避けましょう。

もしWordPressログインユーザーを計測したくない場合は、下記のように記述します。

if (!is_user_logged_in())というコードが追加されました。これは「ログインユーザー以外には」という意味です。
これで「ログインユーザー以外にはこのコードを出力する」という命令になりました。

「外観」→「テーマファイルエディター」からコードを編集するのは非推奨です。
WordPress 外観→テーマファイルエディター

「外観」→「テーマファイルエディター」を開くとWordPressテーマのソースコードを編集できます。
ですが、この方法は以下の理由により紹介いたしません。

  • バックアップが取れないため、エラーが起きたときすぐに戻せない。
  • Twenty Twenty-One以降にリリースされたWordPress公式テーマでは対応できない。

WordPressにソースコードを挿入する際は他の方法で行いましょう。

<head><body>にいれるGoogleタグマネージャーのコードをそれぞれ指定の場所に挿入します。

先ほど紹介したソースコードの<!-- ▼ headタグ内にいれるコードを挿入 --><!-- ▲ headタグ内にいれるコードを挿入 -->の間に<head>内にいれるコードを、<!-- ▼ bodyタグ内にいれるコードを挿入 --><!-- ▲ bodyタグ内にいれるコードを挿入 -->の間に<body>内にいれるコードをそれぞれ挿入します。

実際に挿入すると、このようになります。

ファイルをアップロードします

編集が完了したら、FTPソフトやレンタルサーバーのFTPツールで編集したファイルをアップします。
/ [WordPressがインストールされたフォルダ] / wp-content / themes / [WordPress子テーマフォルダ]のディレクトリに移動し、functions.phpをアップロードしましょう。

アップロード場所を間違えると、エラーがでたりWordPressが表示されなくなったり、上書きされてしまったりと大変なことになります。アップする前に必ずサーバー側のディレクトリを確認しましょう。

アップが完了したら、WordPressに問題は起きていないか、タグは無事挿入されているか必ず確認しましょう。

この方法で気をつける点はこちらです。

  • 編集する前にバックアップを取る
  • メインテーマファイルのfunctions.phpは編集しない(独自で作成したものは除く)
  • コードを追記する場所は一番下
  • ファイルのアップロード場所を間違えないようディレクトリを必ず確認する
  • 更新後はサイトの動作確認を行う

なお、WordPressテーマを変えると挿入したコードは消えてしまうのでご注意ください。

WordPressテーマの設定ファイル(functions.php)をプラグインにする方法も

こちらは、先程のfunctions.phpに記述した内容をプラグインにする方法です。
この方法での利点は、以下の3点です。

  • WordPress公式でプラグインをインストールするよりも軽くなる。
  • プラグインを無効化しない限りコードは消えないため、テーマを変更しても影響がない。
  • エラーが出ても、作成したプラグインを無効化したり、サーバーから削除したりするだけで戻せる。

メンテナンス性も高く、functions.phpに記述するのは控えたい場合にオススメです。

プラグインにするファイルを作成します。

下記のフォルダ構成で作成します。

[オリジナルプラグイン(半角英数字・任意)] 例:my-plugin

ファイルの名前は、半角英数字とハイフンであれば何でも構いません。ただし、現時点でインストールされているものや、今後インストールするプラグインと絶対に被らない名前にしましょう。同じ名前のプラグインがインストールされると、上書きされてしまう可能性があるためです。
例えば、Googleタグマネージャーを入れるだけなら「my-gtm-tag-original-plugin」とすれば、今後新しいプラグインをいれるとしても、被る可能性は低いでしょう。

また、フォルダ名とその中にいれるファイル名は、それぞれ別の名前でも構いません。
フォルダ名が「my-gtm-tag-original-plugin」が長いなら、ファイル名を「my-gtm-tag.php」にしても問題ございません。

プラグインファイル.phpにプラグイン情報とコードを記述します。

テキストエディタツール(Visual Studio CodeやSublime Text、サクラエディタなど)を使って、プラグインのPHPファイルに下記のプラグイン情報を記述します。

うまく編集できない場合もあるため、Windowsに標準で入っている「メモ帳」で編集するのは避けましょう。

これは、WordPressに認識してもらうために必要なコードです。Plugin Name(プラグイン名)だけでも動作しますが、制作者以外にもこのプラグインが何か分かるように、Description(説明文)やAuthor(作成者)は記述すると良いでしょう。
その下のif (!defined('ABSPATH')) {exit;}というコードは、プラグインのファイルに直接アクセスしてくるのを防ぐためのものです。なるべく記述しておきましょう。

functions.phpに記述したコードを反映すると、このようになります。

  • こちらはログインユーザーを除いて計測する場合のコードです。
  • プラグイン情報はご自由に変更ください。

<!-- ▼ headタグ内にいれるコードを挿入 --><!-- ▲ headタグ内にいれるコードを挿入 -->の間には<head>内にいれるコードを、<!-- ▼ bodyタグ内にいれるコードを挿入 --><!-- ▲ bodyタグ内にいれるコードを挿入 -->の間に<body>内にいれるコードをそれぞれ挿入しておきましょう。

実際に挿入すると、このようになります。

作成したら、フォルダごとZIP形式に圧縮します。
WordPressにログインし、「プラグイン」→「新規プラグインを追加」を選択します。
「プラグインのアップロード」をクリックします。
「ファイルを選択」をクリックし、ZIP形式に圧縮したプラグインファイルを選択します。
ファイル名が表示されたら「今すぐインストール」をクリックします。
インストールが完了したら「プラグインを有効化」をクリックします。

これで問題なくWordPressが動作していれば完了です。
作成したプラグインはこのように表示されます。

もし何か問題が発生した場合は、作成したプラグインをサーバーから削除し、コードを見直してみましょう。
プラグインは下記のディレクトリに入っています。

[WordPressがインストールされているフォルダ]

wp-content

plugins

[オリジナルプラグイン(半角英数字・任意)] 例:my-plugin

WordPressテーマが入っているフォルダとは別なのでご注意ください。

二重計測に注意!

このように、WordPressにはGoogleタグマネージャーを導入する方法は複数ございます。
そのため、ときには下記のようなことが起きてしまいます。

  • Googleタグマネージャーを入れようとしたら前の担当者が別の方法で導入していた
  • Googleタグマネージャーを設定できるテーマなのにプラグインで入れてしまった
  • Googleアナリティクスのプラグインが入っている状態でGoogleタグマネージャーを導入してしまった

こうなると二重計測になり、正確な分析ができなくなります。
それを確認するには、Google Tag Assistant LegacyというChrome拡張機能を使いましょう。

Google Tag Assistant Legacy gtag.js 2つある

「gtag.js」とは、簡単に言うとGoogleサービスの計測タグのことです。
この画像では、Googleタグマネージャーが入っている状態でgtag.jsが2つも入っています。Googleタグマネージャーだけを入れた場合、gtag.jsは1つだけです。
そのため、二重で計測されている状態といえます。

Google Tag Assistant Legacyのダウンロードや使い方は、下記の記事でご紹介しています。

『動作確認はChrome拡張機能「Tag Assistant Legacy」が便利!』という項目で簡単に説明しています

もし重複している場合は、同じか似た機能(Googleアナリティクスの導入など)を持つプラグインを入れていないか確認しましょう。
ソースコードを管理するプラグインが入っていれば、その中にGoogleタグマネージャーもしくはGA4などの計測コードが入っている可能性があります。

プラグインでなければ、使用しているテーマの機能でGoogleタグマネージャーもしくはGA4を導入しているかチェックしてみます。
これはテーマによるため、制作元のサイトを確認したほうが良いでしょう。

「外観」→「テーマ」に移動し、「有効」となっているテーマをクリックします。

「作者」のリンクから制作元のサイトに移動すれば、テーマの仕様を確認できることがあります。

プラグインにもテーマにもない場合は、WordPressテーマのソースコードに記入されている可能性が高いです。
WordPressの知識がある方に、functions.phpやheader.phpなどにコードが入っていないか確認していただきましょう。

まとめ

GoogleタグマネージャーをWordPressに導入する3つの方法を詳しく解説いたしました。

初心者の方はプラグインを使うのがオススメです。もし使用しているテーマでGoogleタグマネージャーの設定ができるなら、そちらで行いましょう。その場合は、必ずテーマの配布元サイトをご確認ください。

さらにGoogleタグマネージャーを導入する前に、Googleアナリティクスのコードが既に入っていないか必ず確認しましょう。でなければ二重計測になり、正確な分析ができなくなります。

Googleタグマネージャーを利用すれば、GoogleアナリティクスだけでなくGoogle広告やMouseflow(マウスフロー)といったヒートマップツールなどの導入がスムーズに行えます。

WordPressでサイトを運営している方は、今回ご紹介した方法でGoogleタグマネージャーを導入してみてはいかがでしょうか。

Googleタグマネージャーの解説はこちら

Googleタグマネージャーを導入したら、是非こちらもお試しください!

受付時間 平日10:00~17:00(土日祝除く)

東京オフィス
香川オフィス
関連の事業・サービスの詳細はこちら!
動画を活用したコンサルティング
WordPressのログイン画面と投稿管理画面
WordPressの使い方 シリーズ
火燵でも利用しているCMS「WordPress」の使い方です。