Marketechlabo

Googleタグマネージャーの使い方＆設定をExcelで出力するツール

calendar Sep 17, 2019 / · 2 分で読了 · GTMタグマネジメントgoogle-analytics  ·
共有する: linkedin copy

概要

Googleタグマネージャー（GTM）を使ったタグマネジメントについて解説する。前半ではタグマネジメントの概念と仕組みの一般論、後半ではGTMの具体的な設定方法を説明する。

タグマネジメントとタグマネージャ

タグマネジメントとはwebサイトに設置するタグの一元管理である。管理すべきタグには以下のようなものがある。

  • アクセス解析ツールのタグ
  • 広告のコンバージョンタグ
  • リマーケティングタグ
  • 接客ツール（チャットなど）のタグ
  • ABテストツールのタグ

web施策が進んでいくと、これらのタグを複数、それぞれ異なるページに設置する必要が出てくる。どのタグをどんな条件で設置したか管理し、不要になったタグは削除するなどの運用を徹底しておかないと、同じ目的のタグを重複設置したり、古いタグがページ表示の不具合を引き起こしたりする。担当者が変わった際にも「どこにどのタグをどんな目的で設置したか」を把握できるようにしておく必要がある。

タグマネージャはこの管理を支援するツールで、サイトのHTMLにはタグマネージャのタグのみを設置し、個別のタグは管理画面上で設定する。ただしツール導入だけで管理が完結するわけではなく、人の手による運用ルールもセットで成立する。タグと発火条件（※タグが実行されることを「発火する」（fire）という）、名前と目的を一覧管理する管理表を作るといい。

タグマネージャを導入するメリット

  • タグの追加・削除時にHTMLの改修が不要→設置工数が大幅低減
  • 検証モードで本番公開前に動作確認できる
  • タグの実行順序を指定できる
  • 不具合発生時に過去の状態にロールバックできる

どのタグマネージャも共通して設定するのがタグ、発火条件（トリガー）、データレイヤー（タグマネージャにデータを渡す仕組み）の3点である。

タグマネージャの仕組み

GTMとは

Googleタグマネージャー（GTM）はGoogleが提供している無料のタグマネージャ。Googleアナリティクス（GA4）やGoogle広告との親和性が高く、無料でもあるので独立したタグマネージャとしても十分使える。

設置

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

  1. <head>～</head>内
  2. <body>開始タグの直後

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

タグの設定

コンテナ
タグ＋トリガー＋変数のセット→これら設定の一式をコンテナという。

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

条件判定で使う変数は、たとえばクリックしたリンクのURLやログイン済みかどうかのフラグなど、その値によってタグを実行するかどうかの扱いが変わるもの。 タグに動的に値を渡すというのはサーバから出力される問合せ番号や注文番号など。サーバで処理をした結果をGoogleアナリティクスや広告のコンバージョンタグなどに送りたい場合に使う。

コンテナ

  • 現在のタグ一式（タグ＋トリガー＋変数）をまとめたもの
  • タグを登録しただけでは有効にならず、公開（パブリッシュ）するとはじめて本番環境に反映される
  • バージョン管理の仕組みがあり、過去のバージョンへのロールバックも容易
  • 複数人で更新可能（ワークスペース）

ワークスペース

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

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

ワークスペース

公開

送信
公開

設定の流れ

  1. 現在公開されている（最新の）コンテナからコピーしてワークスペースを作る
  2. 自分のワークスペースで設定
  3. 動作確認（プレビュー）
  4. 「送信」して変更を最新のバージョンのコンテナと比較、確認
  5. 「公開」

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

タグ

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

  • カタログのタグ
    • Googleアナリティクス（GA4）とGoogle広告を使うことがほとんど
    • Googleのサービスのタグ以外はほとんど海外のプロダクト・サービス
  • カスタムタグ
    • 通常はカスタムHTML
    • Google以外の広告のリマーケティングタグ、コンバージョンタグもカスタムHTML

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

タグの実行順序の指定

Googleタグ

Googleタグは複数のGoogleサービスで共通して使う基盤のタグである。1つのGoogleタグにGA4とGoogle広告をリンクすることで、共通の設定（Cookie設定、クロスドメイン計測など）を一元管理できる。GA4の測定ID（G-XXXXXXX）またはGoogle広告のコンバージョンID（AW-XXXXXXX）を設定する。

Googleタグの役割

  • GA4の自動計測イベント（first_visit、session_startなど）の送信
  • GA4の拡張計測機能の有効化。拡張計測機能を有効にすると以下のイベントが自動取得される
    • スクロール（ページの90%到達時）
    • 離脱クリック（外部サイトへのリンククリック）
    • サイト内検索
    • 動画エンゲージメント（YouTube埋め込み動画の再生・進捗・完了）
    • ファイルダウンロード
  • Google広告のリマーケティングリストの自動構築
  • Cookie設定（有効期限など）の一元管理

Googleタグはサイト全ページで発火させるのが基本である。トリガーは「All Pages」（すべてのページビュー）を設定するが、初期化トリガーでの発火も推奨されている。

GA4イベントタグ

拡張計測機能で自動取得されないイベントを計測するにはGA4イベントタグを使う。

  • カスタムイベント：ボタンクリック、タブ切り替え、特定のユーザ操作など、サイト固有の行動を計測
  • eコマースイベント：purchase、add_to_cart、view_item、begin_checkoutなど、EC標準のイベントを計測。eコマースイベントではデータレイヤーを通じて商品情報やトランザクション情報を渡す

GA4イベントタグでは設定タグ（Googleタグ）を参照する形で紐づけるため、測定IDは設定タグ側で一元管理できる。

GAの設定
設定項目はGoogleアナリティクスに準拠。 https://support.google.com/tagmanager/answer/6107124?hl=ja

トリガー

タグの実行条件をトリガーという。 トリガーを正しく設定するにはいくつかの技術的な知識が必要になる。

  • ページビュー
  • クリック
  • ユーザーエンゲージメント
  • その他

ページビュー

トリガーの種類：ページビューとクリック
特定のページ、階層を見た時にタグが発火するもの。「ページビュー」でURLを指定する。

URL指定にあたっては、URLの構成要素を理解しておく必要がある。URLの文字列は以下の要素に分解される。

  • http://www.hogehoge.com/shoes/list.php?page=2&sort_by=recommend
  • https://hogehoge.com/shoes/detail.php?id=123#rev
プロトコルホストパス名（?クエリ文字列）（#ハッシュ）
http://www.hogehoge.com/shoes/list.php?page=2&sort_by=recommend
https://hogehoge.com/shoes/detail.php?id=123#rev
  • プロトコルは通信の方式。「http://」か「https://」のいずれか
  • ホスト名はサーバの場所
  • パス名はサーバの中の場所
  • クエリ文字列はプログラムで値を与える必要があるときに使う。たとえば一覧検索のカテゴリ名など
  • ハッシュはページ内の場所

GTMのトリガー設定ではPage URL、Page Hostname、Page Pathなどの組み込み変数でこれらの要素を条件に使える。

ページビュー系のトリガーには5種類あり、発火タイミングが異なる。発火順序は以下の通り。

  1. 同意の初期化：最も早く発火する。Cookie同意バナーなど同意管理プラットフォーム（CMP）のタグに使用する
  2. 初期化：同意の初期化の次に発火する。他のタグより先に実行する必要があるタグ（同意モードの設定など）に使用する
  3. ページビュー：そのURLにアクセスした時点で発火する。通常のタグはこれを使う
  4. DOM Ready：ページのHTMLの要素に依存する処理を行う場合はこれを選択する
  5. ウィンドウの読み込み：画像や他のスクリプトの読み込み、実行結果に依存する処理を行う場合はこれを選択する

クリック

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

クリックトリガーで特定の要素を指定するにはDOM（Document Object Model）の知識が必要になる。HTMLドキュメントの中の特定の要素にアクセスするために以下の概念を使う。

  • エレメント
  • ID
  • クラス
  • CSSセレクタ

エレメントはページ内の1個1個のパーツである。人間であれば「画面右上のバナー」など何を指しているか伝わるが、コンピュータに対してはそのようなあいまいな表現では正しく伝わらない。要素の場所を正確に伝える作法がDOMである。ブラウザの開発者ツールを使えば、ページ上の任意の要素のID、クラス、CSSセレクタを確認できる。

ユーザーエンゲージメント

トリガーの種類：エンゲージメント

  • YouTube動画→YouTubeの埋め込み動画をページ内に設置した場合、そこでの再生・一時停止・完了などの行動をトリガーにできる
  • スクロール距離→ページ内で一定（ピクセル／パーセント）以上スクロールしたとき
  • フォームの送信
  • 要素の表示→ページ内の特定のエレメント（広告枠など）が表示されたとき

その他

トリガーの種類：その他

  • カスタムイベント→JavaScriptで捕捉できる任意のイベントを指定できる。GA4のカスタムイベントやeコマースイベント（purchase、add_to_cartなど）のトリガーにも使う
  • タイマー→一定時間おきに実行
  • トリガーグループ→設定済みの複数のトリガーをすべて満たしたとき（AND条件）にタグを発火できる
  • 履歴の変更→SPA（シングルページアプリケーション）でのページ遷移を捕捉
  • JavaScriptエラー→ページ上で発生したJavaScriptエラーを捕捉

タグの設定画面では複数のトリガーのOR条件でタグの発火タイミングを指定できるが、AND条件は指定できない。複数のトリガーのAND条件でタグを発火させたい場合にトリガーグループを使う。

高度なトリガー設定にはJavaScriptの知識が必要になる。ブラウザ上で発生するあらゆる事象をJavaScriptで捕捉でき、それをカスタムイベントとしてGTMのトリガーに使える。

トリガーも管理のため名前が重要。 よくある間違いが、サービスの名前をトリガーの名前に入れてしまうこと。たとえば「○○広告サイトリターゲティング用フォームページ」。 これだとこのトリガーはその広告でしか使わないものと認識してしまう。しかし実はフォームページで発火する条件なので他の広告プラットフォームでも使うかもしれない。命名規則が統一されていないとこのような間違いが起こり、設定が無駄に複雑になっていく。

変数

変数はトリガーの条件判定やタグへの動的な値の受け渡しに使う。GTMの変数には組み込み変数とユーザー定義変数がある。

組み込み変数

組込済変数一覧
あらかじめ用意されている変数。チェックが入っていないと無効なので、使う変数のチェックを入れていく。デフォルトだと少ないので、追加でチェックする必要がある。

ユーザー定義変数

組み込み変数にないものはユーザー定義変数として作成する。

カスタム変数の種類

ユーザー定義変数の種類

  • ナビゲーション
    • HTTP参照：リファラ（参照元URL）を取得
    • URL：現在のページURLの各構成要素（ホスト、パス、クエリなど）を取得
  • ページ変数
    • JavaScript変数：ページ上のJavaScriptグローバル変数の値を取得
    • カスタムJavaScript：任意のJavaScript関数を実行して値を返す
    • データレイヤーの変数：window.dataLayerに格納された値を取得
    • ファーストパーティCookie：ブラウザのCookie値を取得
  • ページ要素
    • DOM要素：ページ上の特定のHTML要素の属性値やテキストを取得
    • 自動イベント変数：クリックやフォーム送信などのイベント発生時に、対象要素の情報を取得
    • 要素の視認性：特定の要素がビューポート内に表示されているかを判定
  • ユーティリティ
    • Googleアナリティクス設定：ユニバーサルアナリティクス用の設定変数（レガシー）
    • Googleタグ: イベントの設定：GA4イベントタグに付与するイベントパラメータを変数としてまとめる。複数のイベントタグで共通のパラメータを使い回せる
    • Googleタグ: 設定：Googleタグに適用する構成設定（言語、通貨などの静的パラメータ）を変数としてまとめる。複数のGoogleタグで共有できる
    • アナリティクスストレージ：GoogleアナリティクスのCookieからクライアントIDやセッションIDを読み取る。Measurement Protocolでのデータ送信などに使用
    • カスタムイベント：データレイヤーのイベント名を取得
    • ユーザー提供データ：ユーザーが入力したメールアドレス・電話番号・住所などを取得し、Google広告の拡張コンバージョンに使用する
    • ルックアップテーブル：入力値に応じて出力値を切り替える（条件分岐）
    • 正規表現の表：正規表現パターンで入力値を評価し出力値を返す
    • 環境名：現在のGTM環境（本番、ステージングなど）の名前を取得
    • 定数：固定値を設定
    • 未定義値：undefined値を返す
    • 乱数：ランダムな数値を生成
  • コンテナデータ
    • コンテナID：GTMコンテナのIDを取得
    • コンテナのバージョン番号：現在公開中のコンテナバージョンを取得
    • デバッグモード：プレビューモードで実行中かどうかを判定

よく使うのはカスタムJavaScript、カスタムイベント、データレイヤーの変数である。

データレイヤー変数

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

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

GTMの「データレイヤーの変数」ではこのdataLayerにアクセスして値を取得できる。 GA4のeコマース計測ではデータレイヤーを使って商品情報やトランザクション情報をGTMに渡す。

GTMでよく実装する設定

タグ

  • Googleアナリティクス（GA4）
    • Googleタグ（設定タグ）
    • GA4イベントタグ（カスタムイベント、eコマースイベント）
  • 広告のタグ
    • リマーケティング
    • コンバージョン

トリガー

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

設定の確認

管理画面では設定項目がいろいろな画面に分散されているため、設定を確認しにくい。 そこでバックアップ用のJSONファイルからExcelファイルに設定（変数、トリガー、タグ）の一覧を出力できるものを作った。

コンテナJSONをExcelに変換するツール

※現時点でweb版のコンテナのみ対応。 サンプルのアウトプット

GTMのコンテナJSONは管理画面から以下の手順で取得できる。

GTMからコンテナのJSONを取得する

  1. ヘッダメニューの「管理」の「コンテナ」から「コンテナをエクスポート」をクリック
    コンテナのエクスポート画面
  2. バージョンを選択するとJSONが表示されるので、その下の「エクスポート」をクリックするとダウンロードできる
    コンテナJSONをダウンロード