WordPress(ワードプレス)×SANGOにGoogleタグマネージャーを導入する方法

この記事を読むのに必要な時間は約 9 分です。

Adsenseの自動広告、AmazonのMobilePopover、Google広告のコンバージョン計測などタグを埋め込むことがちらほら出てきたのでこの際以前から導入を検討しては見送っていたGoogleタグマネージャーを導入しました。
導入に当たって明確な手順があまりなかったので調べながら対応したので備忘として記事に残しておきます。
SANGOだけでなくWordPressのブログやサイトに導入する際には同様の手順になるかと思うので参考にしてください。

　　　Content

1 Googleタグマネージャーとは
2 Googleタグマネージャーの導入手順
3 まとめ

Googleタグマネージャーとは

Googleタグマネージャーはブログなどに埋め込んでいる各種サービスのタグを一括管理するためのサービスです。
Adsenseの自動広告やGooglaアナリティクスなどを利用する際にheadにタグを埋め込む必要があるかと思いますが、タグの数が多くなったり複数サイトを運営しているとどのタグをどこに埋め込んだかわからなくなったりしますよね。
Googleタグマネージャーはサイト毎、タグ毎に名前をつけて一覧で管理を行うことができるので非常に便利です。
また、特定のページにだけ広告を表示させたいなど一定の条件にしたがって動的に広告を表示させたりすることもGoogleタグマネージャーなら可能です。
コンバージョンの計測などもサクッと行えるためより深くブログやサイトを分析したい方には導入をオススメです。

Googleタグマネージャーの導入手順

それではGoogleタグマネージャーの導入手順について解説していきます。
導入自体は30分程度あれば完了するかと思います。
導入手順はざっくりと記載すると以下のステップです。

Googleタグマネージャー導入手順

Googleタグマネージャーのアカウントを作成する
WordPressにタグマネージャーのプラグインを導入する
プラグインの設定を行う、header.phpの編集を行う
Googleタグマネージャーの動作確認を行う

1.Googleタグマネージャーのアカウントを作成する

Googleタグマネージャー公式

Google タグマネージャー

公式サイトにアクセスして画面の指示通りにアカウントを作成してください。
アカウント名は適当にわかりやすい名前をつけてください。
国は住んでいるところを選択します。（大半の人が日本だとは思いますが。）
入力が完了したら「続行」をクリックします。

続いてコンテナ名には自分のサイトのURLを指定してください。
コンテナの使用場所は「ウェブ」を選択して「作成」をクリックしてください。

利用規約が表示されるので下の「GDPRで・・・」にチェックを入れた上で右上の「はい」をクリックしてください。

これでGoogleタグマネージャーのアカウント作成は完了です。

2.WordPressにタグマネージャーのプラグインを導入する

Googleタグマネージャーの利用は以下のプラグインを使用しました。
「DuracellTomi’s Google Tag Manager for WordPress」

ワードプレスのGoogleタグマネージャーのプラグインで検索していると以下のプラグインを利用している人もいますが、最終更新など新しい方が安全なので上記の方を利用した方が良いかと思います。
※更に言えばプラグイン利用せずに直にソースに埋め込む方が安全。

正直ここはプラグインを使っても直接headとbodyにタグを埋め込んでもどちらでも良いです。
プラグインを利用する場合でもbodyへの埋め込みは自分で行う必要があるためです。
僕は最初よくわからなかったのでプラグインを入れて対応しましたが、後になってみると「プラグイン入れる意味ある…？」となったので自分でできる人はプラグイン使わなくても良い気はしています。

3.プラグインの設定を行う、header.phpの編集を行う

上記で有効化したプラグインで設定を行います。
Googleタグマネージャー上でIDを確認する。

確認したGoogleタグマネージャーのIDをプラグイン側に入力します。
また、「Container code placement」は「Custom」選択して、「変更を保存」をクリックしてください。
上記のIDを指定することでhead側にタグが自動的に挿入されるようになります。
続いてbody側へのタグを手動で追加します。
bodyの開始タグ直後にプラグインの設定画面で表示されている以下のコードを入力します。

コード

<?php if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) { gtm4wp_the_gtm_tag(); } ?>

実際にコードを追加しているのは以下の部分です。

※SANGOの子テーマを使用していて、この画面でheader.phpが表示されていないという人はheader.phpを子テーマ以下に配置する必要があります。FTPソフトなどを使う必要があります。

4.Googleタグマネージャーの動作確認を行う

プラグインでGoogleタグマネージャーのIDを指定して、header.phpのbody直下にもタグが追加できたら設定自体は完了なので動作確認を行います。
動作確認方法はいくつかありますが、ここでは「Tag Assistant (by Google)」というChromeのプラグインを用いて解説します。
Google ChromeでTag Assistantのプラグインを追加してください。
Tag Assistant (by Google)

使い方は簡単で、以下の通りです。

Googleタグマネージャーの動作確認

Chromeで新規タブを開く
Tag Assistantをクリックして「Enable」をクリック
同タブでタグを設置したサイトを開く
Tag Assistantでタグが読み込まれればOK

STEP.1

Chromeで新規タブを開く

Chromeで新規タブを開きます。

STEP.2

Tag Assistantをクリックして「Enable」をクリック

「Tag Assistant」をクリックして「Enable」をクリックします。

以下の表示になればOKです。

STEP.3

同タブでタグを設置したサイトを開く

同タブ上でタグを設置したサイトを開きます。
するとTag Assistant上に数値が表示されます。
この数値は開いたサイトに埋め込まれたタグの数が表示されています。

STEP.4

Tag Assistantでタグが読み込まれればOK

Tag Assistantをクリックして読み込まれたタグを確認します。
ここでGoogleタグマネージャーが表示されて入れば導入は完了です。
もし表示されていてもTagの色が赤や黄色の場合は設定が間違っているかまだ反映がされていない状態になります。
僕は最初表示させたときは赤色でエラーとなっていましたが、新しいウィンドウ開いたりキャッシュ消したりしてたら正常に認識されるようになりました。