Googleタグマネージャーの使い方

この記事は連載「タグマネジメント完全マニュアル」の全 2 ページ中 2 ページ目です。
連載の記事一覧

Googleタグマネージャー(GTM)とはGoogleが提供している無料のタグマネージャ。
Googleアナリティクスの管理に向いている。

設置

タグは2個あり、両方設置する。それぞれ設置個所が決まっている。

  1. <body>開始タグの直後

ここにないとSearch Consoleなどの認証で失敗する。

タグの設定

コンテナ

タグ+トリガー+変数

のセット→これら設定の一式をコンテナという

  • タグ→実行するタグ
  • トリガー→タグの実行(発火)条件
  • 変数
  • トリガーの中での条件判定に使う
  • タグに動的に値を渡す(データレイヤー)

条件判定で使う変数は、たとえば

  • クリックしたリンクのURL
  • ログイン済みかどうか(フラグ)

など、その値によってタグを実行するかどうかの扱いが変わるもの。

タグに動的に値を渡すというのはサーバから出力される問合せ番号や注文番号など。
サーバで処理をした結果をGoogleアナリティクスや広告のコンバージョンタグなどに送りたい場合に使う。

コンテナ

  • 現在のタグ一式(タグ+トリガー+変数)をまとめたもの
  • タグ(+トリガー+変数)を登録しただけでは本サイト上では有効にならず、公開(パブリッシュ)するとはじめて本番環境に反映される
  • コンテナのバージョン管理の仕組みがある
  • 過去のバージョンを保存しているため以前のバージョンに戻すことも容易。過去のバージョンに戻した後、最新版に戻すこともできる
  • 複数人で更新可能(ワークスペース)

タグにより不具合が発生しの際などにすぐ戻せる。ここがYahoo!タグマネージャー(YTM)などとの違い。YTMにはバージョン管理機能がない。

ワークスペース

  • 複数人で同時に一つのコンテナを管理、更新できる
  • その際の各人の作業用のコンテナをワークスペースという
  • 自分のワークスペースで行った設定をコンテナに反映し、公開する

ワークスペースと現在のコンテナとの差分を管理する。
コンテナは複数人で更新するため、現在のコンテナは必ずしも自分がワークスペースを作成した時点のバージョンと一致するわけではない(自分がコンテナを取得した以降に他人がコンテナを更新している可能性がある)。他人がコンテナへのマージをした後、自分の変更点のみマージすることが可能。

ワークスペース

公開

送信

公開

設定の流れ

  1. 現在公開されている(最新の)コンテナからコピーしてワークスペースを作る
  2. 自分のワークスペースで設定
  3. 動作確認(プレビュー
  4. 送信」して変更を最新のバージョンのコンテナ(自分が変更している間に他人が更新しているかもしれない)と比較、確認(GitでいうPush)
  5. 公開

という順番。

送信→公開するのを忘れずに。初心者あるある。

タグ

名前は超重要
タグやトリガーをフォルダに入れて分類することもできるが、
結局名前を見ればタグの一覧画面で一目何のタグかわかる。管理のすべてともいえる。
何のサービスのタグか、何の目的で使っているのか、もしくは使っていないのか、それは名前でわかるようにしておきたい。

  • カタログのタグ
  • GoogleアナリティクスとAdWordsを使うことがほとんど
  • Googleのサービスのタグ以外はほとんど海外のプロダクト・サービス
  • カスタムタグ
  • 通常はカスタムHTML
  • Google以外の広告のリマーケティングタグ、コンバージョンタグもカスタムHTML
  • document.write()のサポート
  • 基本的にONにしておいたほうが安全
  • Yahoo!プロモーション広告の場合は絶対にON

document.write()

JavaScriptのdocument.write()という関数自体古いもので、いろいろ問題を抱えている。
他に代替の機能がない時代からよく使われてきたものでもあり、今でも一部のタグで使われている。
今後なくなっていくが、完全になくなるまでには時間がかかるだろう。

タグの実行に依存関係がある場合に、
特定のタグの前に発火する、後に発火するなど、実行順序を指定することができる。

タグの実行順序の指定

Googleアナリティクス

  • GAのデフォルトのタグは「ページビュー」。トラッカーの生成とsend pageviewを行う
  • イベントトラッキングなどは別にタグを設定する

GAの設定

設定項目はGoogleアナリティクスに準拠。

https://support.google.com/tagmanager/answer/6107124?hl=ja

トリガー

タグの実行条件をトリガーという。

  • ページビュー
  • クリック
  • その他

トリガーの種類:ページビューとクリック

ページビュー

簡単なのは特定のページ、階層を見た時にタグが発火するというもの。「ページビュー」でURLを指定する。
URLの指定の仕方はこちらを参照
※ページ表示時といっても異なる3種類のタイミングがある

ページ上の特定の要素をクリック

  • すべての要素→<a>タグに限らない。<input><button>など。
  • リンクのみ→<a>タグはこちら。ただし<a>タグにJavaScriptでクリックイベントを設定して何かの動きを発生させる場合は「すべての要素」を使う。特にソーシャルボタンはこちらになる。

トリガーの種類:その他

その他

それ以外にも

  • カスタムイベント→任意のイベントを指定できる。たとえばスクロールなど
  • タイマー→○秒おきに実行
  • フォーム送信
  • 履歴の変更→AJAX処理

カスタムイベントは何でもあり。ブラウザ上で発生するあらゆる事象を捕捉できる。スマホで画面を回転させたらなどというのも可能。JavaScriptエラーは普通使わない。

トリガーも管理のため名前が重要。
よくある間違いが、サービスの名前をトリガーの名前に入れてしまうこと。たとえば

「YDNサイトリターゲティング用フォームページ」

これだとこのトリガーはYDNでしか使わないものと認識してしまう。
しかし実はフォームページで発火する条件なので他の広告プラットフォームでも使うかもしれない。
それなのに「YDN」という名前が入ってしまうと、YDN以外では使わないものと勘違いして、
新しい広告プラットフォームで同じ条件のリマーケティングを設定するとき、同じ条件で別のトリガーを作ってしまうことになる。

命名規則が統一されていないとこのような間違いが起こり、設定が無駄に複雑になっていく。

変数

  • トリガーの中での条件判定に使う
  • タグに動的に値を渡す(データレイヤー)

組込済変数一覧

※チェックが入っていないと無効。デフォルトだと少ないので、追加でチェックする必要がある。

使う変数のチェックを入れていく。GTMを古くから使ってきたケースでは上のチェックがないことがある。本来上の一覧にある役割の変数もすべてカスタム変数になっている。

一覧にない場合はカスタム変数を作る。

カスタム変数の種類

個々の変数は難しいが、カスタムJavaScript、カスタムイベント、データレイヤー変数あたりがよく使われる。

データレイヤー変数(アドバンスト)

ページのHTMLからGTMに何らかのデータを渡すとき、データレイヤー変数を使う。
データレイヤー変数はJavaScriptのグローバル変数window.dataLayerとして格納される、以下のような形式の変数である。

dataLayer = [
{'変数名1': '値1'},
{'変数名2': '値2'}
];

配列形式で、各要素が変数名と値のペアのオブジェクトになる。
データレイヤーへの値の格納はページのJavaScriptの中で以下のようにして行う。

window.dataLayer = window.dataLayer || [];
dataLayer.push({'変数名1': '値1'});
dataLayer.push({'変数名2': '値2'});

GTMの「データレイヤー変数」ではこのdataLayerにアクセスして値を取得できる。

GTMでよく実装する設定

タグ

  • Googleアナリティクス
    • 基本タグと追加設定項目
    • イベントトラッキング
  • 広告のタグ
    • リマーケティング
    • コンバージョン

トリガー

  • 特定のURL
    • 個別ページ
    • 階層指定
  • イベントハンドリング(ページ内)
    • 特定の要素をクリックしたらタグを発火
    • 一定以上スクロールしたら発火
  • セッションの動的な条件
    • 特定の流入元で発火
  • ヒットの動的な条件
    • 3ページ目の閲覧で発火

Series Navigation<< タグ管理のポイント、タグマネージャーの種類と導入のメリット