タグマネージャーとは?Googleタグマネージャーの最低限の使い方

2017年8月21日

タグマネージャとは

タグマネジメントとは

「タグマネジメント」とはその名の通りタグの一元管理である。
では管理すべきタグにはどんなものがあるのか。

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

などがある。

ある程度web施策の程度が進んでいくと、これらのタグを複数、それぞれ異なるページに設置する必要が出てくる。どのタグをどんな条件で設置したか管理し、使わなくなったタグは削除するなどの運用を徹底しておかないと、後になって同じ目的のタグを設置したとか、ページの表示の不具合の原因が古いタグにあったとか、そういった事態が発生する。

担当者が変わった際などには当然「どこにどのタグをどんな目的で設置したか」を伝えておく必要はあるし、自分で設置した場合でも過去のタグの所在は覚えていないことが多くなる。

そのため改めて管理しておく必要がある。タグに限らず「やるからにはやりっぱなしではなく管理する」ことはどんな施策においても言えることなのだが。

タグマネージャ

そしてよく出てくる「タグマネージャ」というのはタグ管理の一助となるツール。

タグマネージャには複数のプロダクトがあるが、共通しているのはサイトのHTMLの中にはタグマネージャのタグのみ設置しておいて、個別のタグはタグマネージャの管理画面上で設定すること。アクセス解析タグや広告タグなどをページのHTMLに設置している場合、それらをすべて取り除いてサイト全体(全ページ)のHTMLにタグマネージャのタグを設置する。

ここで重要なのはあくまでタグ管理の「一助」であって、このツールを導入したからといって管理が完結するわけではない。人の手による運用・管理ルールもセットでタグマネジメントが成立する。

タグ管理の最低限のポイントはタグ実行(発火)条件。それに加え名前と目的(アクセス解析のため、広告のコンバージョン計測のため、…)も重要である。これらの情報を一覧で管理する管理表を作るといい。

またタグマネージャを使えば

  • 特定のボタンをクリックしたときにのみタグを実行する
  • タグにデータ(ユーザのセグメントや現在閲覧しているページの分類など)を送る

など、もう少し高度なことも容易にできる。

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

  • タグが追加、削除するときに個別のHTML改修をする必要がない→タグ設置工数が大幅低減
  • 設置時の検証が容易(タグマネージャの検証モードを使えば、一般公開しないプライベートな状態での動作検証ができる)
  • タグの実行順序を指定できる
  • タグが原因でサイトに不具合が発生した場合など、簡単に過去の状態にロールバックできる

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

そもそもあらゆるタグをトラブルなく設定できる完璧なタグマネージャはない。
レアではあるものの、タグマネージャ起因の技術的な問題が発生する可能性はある。

タグマネージャの種類

冒頭で紹介した個々のタグ(タグマネージャで設定するタグ)は何をやっているのか

タグにはいろいろ種類があるが、共通しているのは

ブラウザに対して、ユーザID、デバイスなどの環境、閲覧ページなどの情報をデータ収集サーバにデータを送らせる

ことである。

タグマネージャがこの機能を一部担うわけだが、クライアントのデータをデータ収集サーバに送る過程で方式に大きく2種類ある。

  • コンテナ式
    • ブラウザデータ収集サーバにデータを送信
    • ブラウザ→タグマネ→ブラウザ→データ収集サーバ
  • サーバダイレクト式
    • タグマネのサーバが直接データ収集サーバにデータを送信
    • ブラウザ→タグマネ→データ収集サーバ

プロダクト

他のサービスとは関係なく、独立したプロダクトとしてのタグマネージャ。独立してこのツールだけを導入できるもの。

  • SignalTag
  • TagKnight

他のソリューションとセットになっているもの

  • Googleタグマネージャー(GTM)
  • Adobe Dynamic Tag Management(DTM)
  • TAGエビス

もともと他のソリューションのサービスの中で作られたものであるため、特定のソリューションとの親和性が高い(そのソリューションと組み合わせたときに使いやすい)。
したがってそれらのソリューションを使う際には優先的に採用するのがいい。たとえばGTMがGoogleアナリティクス、DTMはAdobe Analytics(Adobe Marketing Cloud)、TAGエビスはエビス系のソリューション。

GoogleタグマネージャーはGoogleアナリティクスと切り離して使うことも可能で、無料でもあるので十分独立したタグマネージャとして使うことができる。

広告ソリューションとセットになっているもの

  • Yahoo!タグマネージャー
  • ADPLAN
  • CAMP

タグマネージャは一旦導入するとスイッチが非常に困難である。
そのため広告代理店が囲い込みのために使う戦略的な側面がある。

DMP寄りのもの

  • Tealium→リアルタイムにユーザ情報を判定してそれぞれの施策に送る

タグを管理するだけでなくユーザのデータも管理する高度なソリューションという位置づけになる。

複数のタグマネージャを同時に使うのか?

本来タグマネージャは一元管理するためのツールでもあり、1種類導入すれば全て事足りるはずである。
しかしいろいろな事情で複数のタグマネージャが同じページで設置されることもある。

特に日本ではGoogleタグマネージャーとYahoo!タグマネージャーが両方設置されることがむしろ日常茶飯事である。(実はGoogleタグマネージャーの中でYahoo!タグマネージャーのタグを設置するのもOK。そうすれば一元管理できる)

タグマネージャの仕組み

どのタグマネージャも共通して設定するのが

  • タグ
  • 発火条件(トリガー)
    • 指定したURLで
    • スマートフォンの場合
    • 指定したエレメントをクリック
    • 1000ピクセル以上スクロール
  • データレイヤー(データバインド)
    →タグマネージャにデータを渡す仕組み(あれば設定する)

Googleタグマネージャー(GTM)

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

設置

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

  1. <head>~</head>
  2. <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として格納される、以下のような形式の変数である。

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

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

技術的に知っておくべきこと

タグ管理を行う上で最低限知っておくべき技術的な事項について触れておく。

DOM(Document Object Model)

HTMLドキュメントの中の特定の要素にアクセスするためのやり方

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

ブラウザの開発者ツール
http://www.buildinsider.net/web/chromedevtools/01

エレメントはページ内の1個1個のパーツである。

ページ内の要素を指定する際に、人間であれば「画面右上のレクタングル」など何を指しているか伝わる。レクタングルのバナーが2個あったら「画面右上のレクタングルの下のほう」など。

しかしコンピュータに対してはそんなあいまいな表現では正しく伝わらない。コンピュータに正しく要素の場所を伝える作法がDOMなのである。

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&sott_by=recommend
https:// hogehoge.com /shoes/detail.php ?id=123 #rev

※クエリ文字列はある場合とない場合がある
※ハッシュはない場合が多い

  • プロトコルは通信の方式。「http://」か「https://」のいずれか。「http://」は暗号化されていない通信で、「https://」は暗号化された通信
  • ホスト名はサーバの場所
  • パス名はサーバの中の場所
  • クエリ文字列はプログラムで値を与える必要があるときに使う。たとえば一覧検索のカテゴリ名など
  • ハッシュはページ内の場所

ページ読み込みのタイミング

  • ページビュー:そのURLにアクセスした時点
  • DOM Ready:ページのHTMLの要素に依存する処理を行う場合はこれを選択する
  • ウィンドウの読み込み:画像や他のスプリプトの読み込み、実行結果に依存する処理を行う場合はこれを選択する

JavaScript

結局JavaScriptでできることはすべてタグマネージャーでできる。
高度なことをする場合にはJavaScriptの実行イメージを持っておくといい