Google アナリティクスのタグを、Google Tag Manager を使って設置する方法

Webサイトに設置するタグの種類や設置箇所などの複雑性がマシマシな昨今。

Google アナリティクスを使いこなすだけでも、コンバージョンイベント計測やら訪問者属性のカスタムディメンションやらの計測→検証→修正のためのコード変更は結構大変です。さくさくくるくる回したいけど、毎回エンジニアにお願いするのも申し訳ないあなたのためのGoogle謹製タグ管理ツール、Google Tag Managerを試してみました。

まずは、基本の基本。Google アナリティクスのページ計測を、Google Tag Managerでやるところから、はじめます。

以下、Google アナリティクスはGA、Google Tag ManagerはGTMと表記します。

1. GTM画面にて、アカウントとコンテナを作る

アカウントはユーザ名。コンテナはサイトごとに作ると良さそうです。

2. サイトにGTMのコードを設置

コンテナを作ると、サイトがGTMを呼び出すためのコードが表示されます。

これを対象となるサイトの全ページに貼ってしまいましょう。この時点ではこのコードは、何の仕事もしないので、気にせず貼っちゃってOK。

まずは、MTでGTMのタグが入ったテンプレートモジュールを一個作ります。

で、このモジュールを <mt:Include module="Body Header"> という形で、ページを生成するすべてのテンプレート(※1)の<body>直後に埋め込んでいきます。なお、この時点では設置済みのGAのコードは削除せずそのままで。

※1 トップページ、タグや月別やカテゴリなどのアーカイブページ、検索結果ページ、記事ページ、ウェブページなど。

そして、再構築。

各ページのHTMLソースを表示して、コードが入っていればOK。

3. GTM画面にて、GA計測のためのタグを追加

では、先ほど設置したコードにGAのトラッキングのためのタグを追加し、トラッキングできるようにしていきます。

GTM画面で、[新しいタグを追加]にして、以下の設定で作ります。

UA-XXXX のトラッキングIDのビーコンを、All Pages(すべてのページ)に配信します。

拡張リンクのアトリビューションを有効化を「真」にしたのは、ページ解析などでリンク先が同じリンククリックの数字をそれぞれ別にトラッキングするためです。

4. プレビューで動作確認

新規タグを保存しただけでは、まだ本番サイトには反映されていません。公開前に、プレビューで動作確認しましょう。

GTM 画面で、[プレビュー]をONにします。

で、同じブラウザでサイトを開きます。

こんな風に、ページの下にどのタグがFiredされてるか、つまり動いてるかということがわかります。

さっき作った「GA計測」のタグがこのページで動作しているようです。

5. 公開

問題なさそうなので、公開しちゃいましょう。

公開するたび、バージョン番号が振られます。失敗したら過去のバージョンに戻せるようで便利です。

6. 設置済みのGAのトラッキングコードを削除

というわけで、用済みになってしまったコードを撤去してしまいましょう。

MTでGA連携していると以下のテンプレートタグで、GAコードを設置してくれています。

MTStatsSnippet | テンプレートタグリファレンス - CMSプラットフォーム Movable Type

今回不要になったので、全部削除してしまいましょう。

7. 本番サイトで動作確認

この時点で、サイトのHTMLソースには、GAのコードが消えGTMのコードだけになっているはず。

では、ちゃんとGTM経由でGAのトラッカーが動いているか確認してみましょう。確認方法は2つ。

ChromeのGAデバッガーで確認

Google Analytics Debugger - Chrome ウェブストア をインストール。これをONにした状態で、ページをロードし、開発者ツールのConsoleのところを確認します。

GTM-XXXX というGTMのコンテナID、UA-XXXX というGAのトラッキングIDの両方が表示されています。問題なさそう。

GAのリアルタイムで確認

念のため、GAでも確認。

ページビュー発生してますね。

というわけで、完了でした!

ここまでの操作については、日本語ではほぼ唯一といっていいGTM入門本、以下の本を参考に行いました。

本の内容の抜粋は以下ページにもあるそうなので、参考までに。
実践 Googleタグマネージャ入門 コーナーの記事一覧 | Web担当者Forum