Googleタグマネージャー（GTM）とはGoogleが提供している無料のタグマネージャ。
Googleアナリティクスの管理に向いている。
目次
設置
タグは2個あり、両方設置する。それぞれ設置個所が決まっている。
～内<body>開始タグの直後
ここにないとSearch Consoleなどの認証で失敗する。
タグの設定
タグ＋トリガー＋変数
のセット→これら設定の一式をコンテナという
- タグ→実行するタグ
- トリガー→タグの実行（発火）条件
- 変数
- トリガーの中での条件判定に使う
- タグに動的に値を渡す（データレイヤー）
条件判定で使う変数は、たとえば
- クリックしたリンクのURL
- ログイン済みかどうか（フラグ）
など、その値によってタグを実行するかどうかの扱いが変わるもの。
タグに動的に値を渡すというのはサーバから出力される問合せ番号や注文番号など。
サーバで処理をした結果をGoogleアナリティクスや広告のコンバージョンタグなどに送りたい場合に使う。
コンテナ
- 現在のタグ一式（タグ＋トリガー＋変数）をまとめたもの
- タグ（＋トリガー＋変数）を登録しただけでは本サイト上では有効にならず、公開（パブリッシュ）するとはじめて本番環境に反映される
- コンテナのバージョン管理の仕組みがある
- 過去のバージョンを保存しているため以前のバージョンに戻すことも容易。過去のバージョンに戻した後、最新版に戻すこともできる
- 複数人で更新可能（ワークスペース）
タグにより不具合が発生しの際などにすぐ戻せる。ここがYahoo!タグマネージャー（YTM）などとの違い。YTMにはバージョン管理機能がない。
ワークスペース
- 複数人で同時に一つのコンテナを管理、更新できる
- その際の各人の作業用のコンテナをワークスペースという
- 自分のワークスペースで行った設定をコンテナに反映し、公開する
ワークスペースと現在のコンテナとの差分を管理する。
コンテナは複数人で更新するため、現在のコンテナは必ずしも自分がワークスペースを作成した時点のバージョンと一致するわけではない（自分がコンテナを取得した以降に他人がコンテナを更新している可能性がある）。他人がコンテナへのマージをした後、自分の変更点のみマージすることが可能。
公開
設定の流れ
- 現在公開されている（最新の）コンテナからコピーしてワークスペースを作る
- 自分のワークスペースで設定
- 動作確認（プレビュー）
- 「送信」して変更を最新のバージョンのコンテナ（自分が変更している間に他人が更新しているかもしれない）と比較、確認（GitでいうPush）
- 「公開」
という順番。
送信→公開するのを忘れずに。初心者あるある。
タグ
名前は超重要。
タグやトリガーをフォルダに入れて分類することもできるが、
結局名前を見ればタグの一覧画面で一目何のタグかわかる。管理のすべてともいえる。
何のサービスのタグか、何の目的で使っているのか、もしくは使っていないのか、それは名前でわかるようにしておきたい。
- カタログのタグ
- GoogleアナリティクスとAdWordsを使うことがほとんど
- Googleのサービスのタグ以外はほとんど海外のプロダクト・サービス
- カスタムタグ
- 通常はカスタムHTML
- Google以外の広告のリマーケティングタグ、コンバージョンタグもカスタムHTML
document.write()のサポート- 基本的にONにしておいたほうが安全
- Yahoo!プロモーション広告の場合は絶対にON
JavaScriptのdocument.write()という関数自体古いもので、いろいろ問題を抱えている。
他に代替の機能がない時代からよく使われてきたものでもあり、今でも一部のタグで使われている。
今後なくなっていくが、完全になくなるまでには時間がかかるだろう。
タグの実行に依存関係がある場合に、
特定のタグの前に発火する、後に発火するなど、実行順序を指定することができる。
Googleアナリティクス
- GAのデフォルトのタグは「ページビュー」。トラッカーの生成とsend pageviewを行う
- イベントトラッキングなどは別にタグを設定する
設定項目はGoogleアナリティクスに準拠。
https://support.google.com/tagmanager/answer/6107124?hl=ja
トリガー
タグの実行条件をトリガーという。
- ページビュー
- クリック
- エンゲージメント
- その他
ページビュー
簡単なのは特定のページ、階層を見た時にタグが発火するというもの。「ページビュー」でURLを指定する。
※URLの指定の仕方はこちらを参照
※ページ表示時といっても異なる3種類のタイミングがある
ページ上の特定の要素をクリック
- すべての要素→
aタグに限らない。input、buttonなど。- リンク先のURLで指定する
- リンクのみ→
aタグはこちら。ただしaタグにJavaScriptでクリックイベントを設定して何かの動きを発生させる場合は「すべての要素」を使う。特にソーシャルボタンはこちらになる。
エンゲージメント
- YouTube 動画→Youtubeの埋め込み動画をページ内に設置した場合、そこでの再生などの行動をトリガーにできる
- スクロール距離→ページ内で一定（ピクセル／パーセント）以上スクロールしたとき
- フォームの送信
- 要素の表示→ページ内の特定のエレメント（広告枠など）が表示されたとき
その他
- カスタムイベント→JavaScriptで捕捉できる任意のイベントを指定できる。
- タイマー→○秒おきに実行
- トリガーグループ→設定済みの複数のトリガーをすべて満たしたとき（AND条件）にタグを発火できる。
- 履歴の変更→AJAX処理
JavaScriptエラーは普通使わない。
カスタムイベントは何でもあり。ブラウザ上で発生するあらゆる事象を捕捉できる。スマホで画面を回転させたらなどというのも可能。
タグの設定画面では複数のトリガーのOR条件でタグの発火タイミングを指定できたが、AND条件を指定できない。複数のトリガーのAND条件でタグを発火させてい場合にトリガーグループを使う。
トリガーも管理のため名前が重要。
よくある間違いが、サービスの名前をトリガーの名前に入れてしまうこと。たとえば
「YDNサイトリターゲティング用フォームページ」
これだとこのトリガーはYDNでしか使わないものと認識してしまう。
しかし実はフォームページで発火する条件なので他の広告プラットフォームでも使うかもしれない。
それなのに「YDN」という名前が入ってしまうと、YDN以外では使わないものと勘違いして、
新しい広告プラットフォームで同じ条件のリマーケティングを設定するとき、同じ条件で別のトリガーを作ってしまうことになる。
命名規則が統一されていないとこのような間違いが起こり、設定が無駄に複雑になっていく。
変数
- トリガーの中での条件判定に使う
- タグに動的に値を渡す（データレイヤー）
※チェックが入っていないと無効。デフォルトだと少ないので、追加でチェックする必要がある。
使う変数のチェックを入れていく。GTMを古くから使ってきたケースでは上のチェックがないことがある。本来上の一覧にある役割の変数もすべてカスタム変数になっている。
一覧にない場合はカスタム変数を作る。
個々の変数は難しいが、カスタムJavaScript、カスタムイベント、データレイヤー変数あたりがよく使われる。
データレイヤー変数（アドバンスト）
ページのHTMLからGTMに何らかのデータを渡すとき、データレイヤー変数を使う。データレイヤー変数はJavaScriptのグローバル変数window.dataLayerとして格納される。
データレイヤーへの値の格納はページのJavaScriptの中で以下のようにして行う。
window.dataLayer = window.dataLayer || [];
dataLayer.push({'変数名1': '値1'});
dataLayer.push({'変数名2': '値2'});
GTMの「データレイヤー変数」ではこのdataLayerにアクセスして値を取得できる。
GTMでよく実装する設定
タグ
- Googleアナリティクス
- 基本タグと追加設定項目
- イベントトラッキング
- 広告のタグ
- リマーケティング
- コンバージョン
トリガー
- 特定のURL
- 個別ページ
- 階層指定
- イベントハンドリング（ページ内）
- 特定の要素をクリックしたらタグを発火
- 一定以上スクロールしたら発火
- セッションの動的な条件
- 特定の流入元で発火
- ヒットの動的な条件
- 3ページ目の閲覧で発火
設定の確認
管理画面では設定項目がいろいろな画面に分散されているため、設定を確認しにくい。
そこでバックアップ用のJSONファイルからExcelファイルに設定（変数、トリガー、タグ）の一覧を出力できるものを作った。
コンテナJSONをExcelに変換するツール
※現時点でweb版のコンテナのみ対応。
サンプルのアウトプット
さまざまな設定のケースに対応したつもりですが、未検証の設定に対してはエラーが発生する可能性があります。もしエラーが発生したらTwitterのDM（@mrtec_y）でいただけると助かります！（すぐに対応できるかわかりませんが）
GTMのコンテナJSONは管理画面から以下の手順で取得できる
GTMからコンテナのJSONを取得する
- ヘッダメニューの「管理」の「コンテナ」から「コンテナをエクスポート」をクリック
- バージョンを選択するとJSONが表示されるので、その下の「エクスポート」をクリックするとダウンロードできる
計測実装 の記事一覧
