https://www.marketechlabo.com/tags/tag-management/Recent content in タグマネジメント on MarketechlaboHugo -- gohugo.ioja-jpTue, 17 Sep 2019 00:00:00 +0900https://www.marketechlabo.com/web-measurement/tag-management-gtm-2/Tue, 17 Sep 2019 00:00:00 +0900https://www.marketechlabo.com/web-measurement/tag-management-gtm-2/ <p>Googleタグマネージャー（GTM）を使ったタグマネジメントについて解説する。前半ではタグマネジメントの概念と仕組みの一般論、後半ではGTMの具体的な設定方法を説明する。</p> <h2 id="タグマネジメントとタグマネージャ">タグマネジメントとタグマネージャ</h2> <p>タグマネジメントとはwebサイトに設置するタグの一元管理である。管理すべきタグには以下のようなものがある。</p> <ul> <li>アクセス解析ツールのタグ</li> <li>広告のコンバージョンタグ</li> <li>リマーケティングタグ</li> <li>接客ツール（チャットなど）のタグ</li> <li>ABテストツールのタグ</li> </ul> <p>web施策が進んでいくと、これらのタグを複数、それぞれ異なるページに設置する必要が出てくる。どのタグをどんな条件で設置したか管理し、不要になったタグは削除するなどの運用を徹底しておかないと、同じ目的のタグを重複設置したり、古いタグがページ表示の不具合を引き起こしたりする。担当者が変わった際にも「どこにどのタグをどんな目的で設置したか」を把握できるようにしておく必要がある。</p> <p>タグマネージャはこの管理を支援するツールで、サイトのHTMLにはタグマネージャのタグのみを設置し、個別のタグは管理画面上で設定する。ただしツール導入だけで管理が完結するわけではなく、人の手による運用ルールもセットで成立する。タグと発火条件（※タグが実行されることを「発火する」（fire）という）、名前と目的を一覧管理する管理表を作るといい。</p> <p>タグマネージャを導入するメリット</p> <ul> <li>タグの追加・削除時にHTMLの改修が不要→設置工数が大幅低減</li> <li>検証モードで本番公開前に動作確認できる</li> <li>タグの実行順序を指定できる</li> <li>不具合発生時に過去の状態にロールバックできる</li> </ul> <p>どのタグマネージャも共通して設定するのがタグ、発火条件（トリガー）、データレイヤー（タグマネージャにデータを渡す仕組み）の3点である。</p> <p><figure> <picture> <img loading="lazy" decoding="async" alt="タグマネージャの仕組み" class="image_figure image_internal image_unprocessed" src="/images/gtm/tagmanager.png" /> </picture> </figure> </p> <h2 id="gtmとは">GTMとは</h2> <p>Googleタグマネージャー（GTM）はGoogleが提供している無料のタグマネージャ。Googleアナリティクス（GA4）やGoogle広告との親和性が高く、無料でもあるので独立したタグマネージャとしても十分使える。</p> <h2 id="設置">設置</h2> <p>タグは2個あり、両方設置する。それぞれ設置個所が決まっている。</p> <ol> <li><code>&lt;head&gt;～&lt;/head&gt;</code>内</li> <li><code>&lt;body&gt;</code>開始タグの直後</li> </ol> <p>ここにないとSearch Consoleなどの認証で失敗する。</p> <h2 id="タグの設定">タグの設定</h2> <p><figure> <picture> <img loading="lazy" decoding="async" alt="コンテナ" class="image_figure image_internal image_unprocessed" src="/images/gtm/container.png" /> </picture> </figure> タグ＋トリガー＋変数のセット→これら設定の一式をコンテナという。</p> <ul> <li>タグ→実行するタグ</li> <li>トリガー→タグの実行（発火）条件</li> <li>変数 <ul> <li>トリガーの中での条件判定に使う</li> <li>タグに動的に値を渡す（データレイヤー）</li> </ul> </li> </ul> <p>条件判定で使う変数は、たとえばクリックしたリンクのURLやログイン済みかどうかのフラグなど、その値によってタグを実行するかどうかの扱いが変わるもの。 タグに動的に値を渡すというのはサーバから出力される問合せ番号や注文番号など。サーバで処理をした結果をGoogleアナリティクスや広告のコンバージョンタグなどに送りたい場合に使う。</p> <h2 id="コンテナ">コンテナ</h2> <ul> <li>現在のタグ一式（タグ＋トリガー＋変数）をまとめたもの</li> <li>タグを登録しただけでは有効にならず、公開（パブリッシュ）するとはじめて本番環境に反映される</li> <li>バージョン管理の仕組みがあり、過去のバージョンへのロールバックも容易</li> <li>複数人で更新可能（ワークスペース）</li> </ul> <h3 id="ワークスペース">ワークスペース</h3> <ul> <li>複数人で同時に一つのコンテナを管理、更新できる</li> <li>その際の各人の作業用のコンテナをワークスペースという</li> <li>自分のワークスペースで行った設定をコンテナに反映し、公開する</li> </ul> <p>ワークスペースと現在のコンテナとの差分を管理する。 コンテナは複数人で更新するため、現在のコンテナは必ずしも自分がワークスペースを作成した時点のバージョンと一致するわけではない（自分がコンテナを取得した以降に他人がコンテナを更新している可能性がある）。他人がコンテナへのマージをした後、自分の変更点のみマージすることが可能。 <figure> <picture> <img loading="lazy" decoding="async" alt="ワークスペース" class="image_figure image_internal image_unprocessed" src="/images/gtm/workspace.jpg" /> </picture> </figure> </p> <h3 id="公開">公開</h3> <p><figure> <picture> <img loading="lazy" decoding="async" alt="送信" class="image_figure image_internal image_unprocessed" src="/images/gtm/push.jpg" /> </picture> </figure> <figure> <picture> <img loading="lazy" decoding="async" alt="公開" class="image_figure image_internal image_unprocessed" src="/images/gtm/publish.jpg" /> </picture> </figure> </p> <h3 id="設定の流れ">設定の流れ</h3> <ol> <li>現在公開されている（最新の）コンテナからコピーしてワークスペースを作る</li> <li>自分のワークスペースで設定</li> <li>動作確認（プレビュー）</li> <li>「送信」して変更を最新のバージョンのコンテナと比較、確認</li> <li>「公開」</li> </ol> <p>送信→公開するのを忘れずに。初心者あるある。</p>