Embed Size (px)
Citation preview
2
本書の前提● Google、Googleタグマネージャは、Google Inc. の商標または登録商標です。●その他、本書の中で紹介する製品名、サービス名などは、各メーカーの商標あるいは登録商標です。●本書の内容は 2015 年 5 月までの情報をもとに画面を再現しています。●本書に掲載されている操作によって生じた損害や損失については、著者および株式会社インプレスは一切の責任を負いません。個人の責任の範囲内でご利用ください。
3
Google タグマネージャが 2012 年 10 月にリリースされてから、最近に
なって利用を開始、または検討している人も徐々に増えてきました。実
際に筆者も業務にて、大手 Web サイトなど何社も導入のお手伝いをさ
せていただいています。
それに反して、まだ若いツールであることもあり、インターネット上の情
報はそれほど多くはありません。そのため興味を持っても、実際に使い
はじめるまでにはいくつもの疑問が立ちはだかっているのが現状です。
2014 年 11 月に、Google タグマネージャの入門書を電子書籍で書か
せていただいたのですが、幸いご好評をいただき、こうして装いも新た
に紙の本として出させていただくことになりました。電子書籍版の内容を
最新の情報にアップデートした上で、さらに新章として応用的なテクニッ
ク集を設け、ケーススタディと付録を追加するなど加筆修正を行った内
容となっています。
本書は「書かれている通りに設定すれば理解していなくても使える」
といったいわゆる設定事例集ではありません。ツールの基本的な仕組み
や考え方を理解できるよう、重要なひと通りの設定や機能を解説してい
ます。
しかし、書かれていることのすべてを覚えなければツールを使うことが
できないというわけではありません。まずは軽く読んでみて「こういうもの
なのだ」という感触をつかんでみてください。Google タグマネージャは
決して「手に負えないほど難しいツール」ではありません。
本書が、皆さまのお役にたつことができれば幸いです。
2015 年 4 月 畑岡大作（アユダンテ株式会社）
は じ め に
4
はじめに 3
第１章 Googleタグマネージャの基本 7
1-1 Googleタグマネージャとは 8
1-2 対応しているタグとしていないタグを知る 13
1-3 Googleタグマネージャを導入する前に考えておくべきこと 17
第２章 Googleタグマネージャを導入しよう 21
2-1 Googleタグマネージャを導入する流れ 22
2-2 Googleタグマネージャのアカウントを作成する 27
2-3 GoogleタグマネージャのタグをHTMLに追加する 31
2-4 Googleタグマネージャの管理画面 34
2-5 三大要素「タグ」「トリガー」「変数」を知る 37
2-6 「プレビュー」と「公開」の流れを知る 42
第３章 主要なタグを設定して登録しよう 47
3-1 Googleアナリティクスの基本タグを設定する 48
3-2 複数ドメインでのトラッキングの設定をする 54
3-3 仮想URLのページビュー計測タグを設定する 60
3-4 イベント計測タグを設定する 63
3-5 カスタムディメンション／指標を設定する 67
3-6 Eコマースタグを設定する 70
目 次
5
3-7 Google AdWordsのコンバージョンタグを設定する 77
3-8 Google AdWordsのリマーケティングタグを設定する 80
3-9 カスタムHTMLタグでYahoo! プロモーション広告を設定する 85
第４章 目的に合わせた 配信トリガーを作成しよう 89
4-1 特定のページのみに配信する 90
4-2 特定のディレクトリ以下のページに配信する 95
4-3 特定のドメインのページのみに配信する 97
4-4 クエリに任意の値が入っているときに配信する 99
4-5 複数のトリガーを組み合わせる 103
4-6 正規表現で細かな条件を設定する 107
4-7 JavaScriptから任意のタイミングで配信する 112
4-8 リンクがクリックされたときに配信する 117
第５章 変数でさまざまなデータを取得しよう 125
5-1 ページ内にあるテキストを参照する 126
5-2 JavaScript変数の値を参照する 130
5-3 Cookieの値を参照する 133
5-4 ルックアップテーブルで状況ごとの値を取得する 136
5-5 HTMLやJavaScriptからデータを送信する 140
5-6 カスタムJavaScriptで値の算出や取得を行う 145
6
第６章 タグマネジメント実践ケーススタディ 149
6-1 リンクのクリックをGoogleアナリティクスのイベントとして識別する 150
6-2 購入金額をコンバージョンの値として取得して送信する 156
6-3 会員か非会員かの情報をカスタムディメンションに出力する 162
6-4 ブログ記事をライターごとのコンテンツグループに設定する 170
6-5 Googleタグマネージャをスムーズに導入する 184
第７章 現場でよく使う タグマネージャテクニック集 189
7-1 設定途中のタグは本番環境で公開されないようにする 190
7-2 例外専用タグを減らしてタグをすっきりさせる 192
7-3 移行しきれなかったonclickイベントも計測する 196
7-4 リンククリックの親要素を条件にする 199
7-5 クリックされた「mailto:」や「tel:」の内容を計測する 203
7-6 カスタムHTMLタグでタグの配信順を制御する 208
7-7 ページによって背景や色のデザインを変える 216
7-8 ページの内容によって文章を自動的に書き換える 219
7-9 異なるコンテナから設定内容をコピーする 224
付 録 231
A-1 配信したタグの実際の値を調べるには？ 232
A-2 もしも公開した設定内容に誤りがあった場合は？ 239
A-3 バージョンに名前やメモを付けて管理する 243
A-4 変数の初期値一覧表 245
A-5 Googleアナリティクス⇔Googleタグマネージャ 設定対応表 246
用語集 248
索引 253
7
Googleタグマネージャを知ろう
第１章
「Google タグマネージャ」を使いはじめている方も、名前を聞いたことがあるだけという方も、ようこそ。まずは、Googleタグマネージャとは何か、そしてどんなことをするためのツールなのか。そうした基本的な部分をご紹介します。
8
タグ
マネ
ージ
ャと
は1-1
用語集 HTML Googleアナリティクス アクセス解析
Googleタグマネージャとはタグマネジメント1-1
タグにまつわるさまざまな問題
いまやインターネットは広く普及し、通信速度も安定・向上しています。
通信環境が安定した結果、「Web サイトの HTML にタグを記述して、イ
ンターネットを通じて処理を行うツール」はどんどんその数を増やしていま
す。
例えば、アクセス解析の「Google アナリティクス」や広告配信の「Google
AdWords」「Yahoo! プロモーション広告」などが代表的です。いずれ
も有名で普及率の高いツールなので、名前を聞いたことがあったり、実際
に利用していたりする人も多いのではないでしょうか？ 少なくともビジネス用
途の Web サイト運用では、今ではこれらのツールなしでは成り立たないと
いっても過言ではありません。ただ、その種類が増えてきた結果、いくつ
か問題も出てきました。ひと言でいうと「管理が大変」ということです。
・埋め込まれているタグの状況を把握しきれない
・Webページによってタグが異なる場合がありややこしい
・HTMLの編集を第三者に依頼している場合、即座にタグの追加や削除ができない
・外部のコンサルタントなどに現在のタグの利用状況を正しく伝えるのが難しい
●代表的な問題
ここで挙げたものはよく起こる問題で、おそらく本書をお読みの方も身に
覚えがあるのではないかと思います。これらは「HTML にタグを記述する」
という各ツールの仕組み上必ず発生する問題で、ある意味ではどうしよう
もない問題ともいえます。では、もうこれらの問題についてはあきらめるし
9第 1 章 Google タグマネージャを知ろう
タグ
マネ
ージ
ャと
は1-1
用語集 タグ タグマネジメント
かないのでしょうか？ 新しいタグを追加するたびに複雑化していくHTML
を、受け入れるしかないのでしょうか？
いいえ。不便ならば、それを解決するための手段を使えばいいのです。
それが「タグマネジメント」という考え方です。上記の問題は、そのタグ
マネジメントを実現するためのツールを使うことで、いずれも大幅に改善す
ることができます。本書で紹介するのも、そんなタグマネジメントツールの
1 つである「Google タグマネージャ」です。
●タグはどんどん複雑化していく
Webページ
Webページ
ページビュー計測タグ
リンククリック計測タグ
リマーケティング広告タグ
コンバージョン計測タグ
Eコマース計測タグ
・・・など
一般的に Web サイトには複数のツールのタグが貼られている。数が増えてくると、その把握や更新も大変だ。
Googleタグマネージャでタグを一元管理
Google タグマネージャは 2012 年 10 月にベータ版として公開され、
2014 年 3 月に正式版となりました。そして 2015 年 6 月には新しい UI の
「バージョン 2」へと、着 と々進化を続けています。Google タグマネージャ
は、すべての機能を誰でも無償で利用可能です。これはいったい何をす
るためのものかというと、「さまざまなツールのタグを一元管理する」ため
のツールです。
例えば、Google アナリティクスや Google AdWords、Yahoo! プロモー
10
タグ
マネ
ージ
ャと
は1-1
用語集 HTML JavaScript
ション広告などさまざまなツールで発行されたタグは、通常 Web ページご
との HTML にそれぞれ必要なものを記述して利用します。Google タグ
マネージャを使うと、それらの代わりに Google タグマネージャのタグを 1 つ
書いておくだけで済むようになります。実際に「どのページで何のタグを配
信するか」は、Googleタグマネージャの管理画面から設定して管理します。
タグの追加や変更のたびに、Web サイトの HTML を書き換えなくてもよく
なるのです。
例として挙げたもの以外も、JavaScript で動作するタイプのツール
であればほぼすべて対応しています。もっといえば、何か特定のツール
が発行したタグだけではなく、インターネット上で配布されている普通の
JavaScript であっても基本的には同様の扱いで管理することができます。
●タグを一元管理する図
Webページ
Webページ
Googleタグマネージャ
・・・など
ページビュー計測タグ
リマーケティング広告タグ
コンバージョン計測タグ
リンククリック計測タグ
Eコマース計測タグ
Googleタグマネージャを使うと、Web サイトのページに貼られるタグがすっきりとまとまる。どのページにどのタグを配信するかは、Google タグマネージャの管理画面から行う。
・Googleタグマネージャはほかのツールが発行したタグを一元管理する
・どのページにどのタグを配信するかの設定はオンライン上の管理画面から行う
● Google タグマネージャの特徴
11第 1 章 Google タグマネージャを知ろう
タグ
マネ
ージ
ャと
は1-1
用語集 ビーコン型
Columnタグを埋め込む方式のことを「ビーコン型」と呼ぶ
「発行したタグをHTML へ記述する」ツールのことを「ビーコン型」と呼びます。ビーコン型のツールは、タグの中に含まれているJavaScript や画像などが読み込まれるとツールのサーバーへデータを送信する仕組みになっており、そうして収集したデータをツールの管理画面などでレポートのような形でまとめて表示します。Google アナリティクスを代表とするいわゆるアクセス解析ツールなどで広く使われている手法で、サーバーの設定を変更するなどの大がかりな作業が必要なく、
「HTML にタグを追加するだけ」という導入の手軽さから普及しています。
Googleタグマネージャの使い方はやや独特
「複雑だったタグの管理が大幅に楽になる！」そんな夢のようなツールで
すが、Google タグマネージャに限らずタグマネジメントツールはまだ生まれ
たばかりで歴史も浅く、実際に触ったことがある人も少ないのが現状です。
ユーザーが少ないということは、使い方がわからないときもマニュアルが少
なく勉強しづらい状況であることにほかなりません。また、少し特殊な用途
のツールなので、ほかのツールでは見たことがないような要素もあり、おそ
らく初見では何をどうすればいいのかパッと見ではわかりづらいでしょう。
● Google タグマネージャ
Google タグマネージャの画面。利用を始めるには Google アカウントが必要だ（2-2 を参照）。
12
タグ
マネ
ージ
ャと
は1-1
しかし、安心してください。「独特の要素があってわかりづらい」という
ことは、逆にいえば「独特の要素」さえ理解してしまえば、そう難しくは
ないということです。事実、実際の設定の多くは、画面に表示される項目
を埋めていくだけです。本書では、その独特な部分、ツールとしての基本
用語や機能についての知識を第 2 章で、実際の設定方法については第 3
章～第 5 章、実際のケーススタディや応用的なテクニックを第 6 章～第 7
章という順番で解説していきます。
ColumnJavaScriptはわかると便利
「JavaScript」とは、HTML 上で動作する一種のプログラミング言語のことです。Googleタグマネージャは JavaScript の知識がなくても使えますが、管理画面では JavaScriptをかなり自由に入力できます。JavaScriptを使わなければ取得できないような情報を扱うなら、JavaScript がわかると便利です。
Columnほかのタグマネジメントツールもある
Googleタグマネージャ以外にも、いくつかタグマネジメントツールと呼ばれるものがあります。JavaScript で動作してほかのツールのタグを管理するという点ではほかのツールも同様で、有名なものでは「Yahoo!タグマネージャー」があります。本書で解説するGoogleタグマネージャは、プレビューモード（2-6を参照）がとても優れていたり、Google のほかのサービスの設定がテンプレートで用意されていたりという強みがあります。また、ほかの Google サービスと同様にシンプルで使いやすいインターフェースであること、Google の高い技術力でサーバーが安定していること、そしてほかのサービスに比べて思い立ったら気軽にすぐ始められることもポイントです。
13第 1 章 Google タグマネージャを知ろう
対応
して
いる
タグ
とし
てい
ない
タグ
を知
る1-2対応しているタグとしていないタグを知る
同期／非同期タグ1-2
基本的にはどんなタグでも対応
さて、Google タグマネージャは「タグを管理するツール」ですが、取り
扱い可能なタグはどうなっているのか気になりますよね？ 実際に導入してみ
たものの「管理しようと思っていたタグが非対応だった」では目も当てられ
ません。しかし、安心してください。Google タグマネージャは、ごく一部
を除いてほとんどのタグに対応しています。逆に非対応なタグの方が少な
いため、ここでは非対応のタグの例を挙げていきます。以下に該当するタ
グを利用している場合だけ、注意してください。
・ページ構造にかかわるタグ（SNSのシェアボタンを生成するJavaScriptなど）
・同期処理が必要なタグ（Googleアナリティクスのウェブテスト機能など）
● Google タグマネージャが対応していないタグ
この 2 種類が、2015 年４月現在「非対応」となっているタグです。将
来的には対応するかもしれませんが、現状ではこれらのタグを Google タ
グマネージャで管理することはできません。ここからは少し技術的な話にな
りますが、それぞれなぜ対応していないのか、順に解説します。
「同期タグ」と「非同期タグ」
JavaScript を含むタグは、大きく「同期タグ」と「非同期タグ」の 2
14
用語集 同期タグ 非同期タグ
対応
して
いる
タグ
とし
てい
ない
タグ
を知
る1-2
つに分かれます。これらは JavaScript の処理のタイミングについての分
け方で、「同期タグ」はページの読み込みと同期していて、逆に「非同
期タグ」はページの読み込みとは独立して処理されます。
これはどういうことかというと、同期タグでは JavaScript が読み込まれ
たら処理が開始され、その処理が完了するまでページの読み込みは止ま
ります。そのため、同期タグでは「JavaScript が読み込まれたタイミング
で確実に処理を開始」することができますが、その半面、ページの表示
が遅くなってしまうなどの影響が出ます。
逆に、非同期タグの場合は JavaScript が読み込まれてもそのタイミン
グでは必ずしも処理を開始しない代わりに、同期タグのようにページの読
み込みを止めてしまうことがありません。「処理のタイミングが安定しない」
というデメリットはありますが、ページの表示に悪影響を与えてユーザーに
ストレスを感じさせることがないため、Google タグマネージャではすべての
タグが強制的に非同期タグとして扱われる仕様になっています。
●同期タグと非同期タグの違い
JavaScript読み込み
JavaScript処理完了
ページ読み込み完了
ページ読み込み
JavaScript読み込み
JavaScript処理完了
ページ読み込み完了
ページ読み込み
同期タグ 非同期タグ
同期タグは処理されるタイミングが決まっている一方、エラーが起こるとページの読み込みが止まってしまうおそれがある。非同期タグはその心配はないが、タグが処理されるタイミングが安定しない。Google タグマネージャではすべてのタグが「非同期タグ」として扱われる。
15第 1 章 Google タグマネージャを知ろう
用語集 SNS
対応
して
いる
タグ
とし
てい
ない
タグ
を知
る1-2
SNSへの投稿ボタンやウェブテスト機能は配信できない
1 つ目の「ページ構造にかかわるタグ」は、非同期タグとして処理され
ると、例えばページ内の特定箇所の HTML を変更するタグを利用しようと
した場合、その変更しようとしている要素がまだ読み込み完了していない
可能性が出てきます。「『hogehoge』というid が記述されている div タ
グの中のテキストを変更する」といったタグの場合です。そのため、「ペー
ジ構造にかかわるタグ」は非対応とされているわけです。よく使われる
ものでは、Twitter や Facebook など SNS への投稿ボタンを生成する
JavaScript なども含まれます。
● SNS の投稿ボタンは使えない
見覚えのある人も多いであろうSNS への投稿ボタン。これはページの特定箇所の HTMLを書き換えるタグのため、Google タグマネージャでは扱えない。
2 つ目の「同期処理が必要なタグ」も、強制的に非同期タグとして扱わ
れてしまうため非対応とされています。例えば Google アナリティクスのウェ
ブテスト（A/B テスト）機能がこれに当たります。ウェブテストのタグは、ペー
ジが表示される前に JavaScript の処理が完了していないと、ユーザー
に画面がちらついて見えるといった違和感を覚えさせる要因となります。
16
用語集 JavaScript 同期タグ 非同期タグ
対応
して
いる
タグ
とし
てい
ない
タグ
を知
る1-2
実際には、ページ構造にかかわるタグもページの読み込みが確実に終
わったタイミングでタグを配信するなどひと工夫すれば対応は可能ですが、
それには JavaScript の知識が必要になります。同期タグも普通に配信
自体はできるのですが、どうしても処理の開始にタイムラグが発生してしま
うため、非同期タグとして処理しても問題がないかを判断する必要があり
ます。必ず同期タグとして処理しなければならないタグの場合は、素直に
HTML にタグを直接記述しましょう。
これらの JavaScript を読み込むタイミングが重要なタグ以外は、基
本的にはどんなタグにも対応しています。タグも Google タグマネージャも
JavaScript で動作している以上、JavaScript 同士の相性などで正しく
動作しない可能性が絶対にゼロだと保証はできませんが、筆者が利用し
ている限りそうした場面に出くわしたことは一度もないため、高い確率で大
丈夫といえます。「99％大丈夫だが、相性の問題がある可能性もある」と
いうことを頭の片隅に入れておくと、万一問題が発生したときに解決の手
がかりになるかもしれません。
Column「同期タグ」と「非同期タグ」は誤差程度の違いしかない
「非同期タグは処理のタイミングが安定しない」とはいっても、ほとんどのタグはすぐに処理が終わるため、実際には誤差程度の違いしかありません。多くの場合は同期タグでも非同期タグでもどちらでも正常に動作します。しかし、本文中で例に挙げたウェブテストのタグなど、処理タイミングを厳密に固定したいタグの場合は同期タグとして、つまり本来の使用方法通りに Web ページの HTMLに直接記述するのがベストとなります。
17第 1 章 Google タグマネージャを知ろう
用語集 HTML
タグ
マネ
ージ
ャを
導入
する
前に
考え
てお
くべ
きこ
と1-3Googleタグマネージャを導入する前に考えておくべきこと
導入の準備1-3
導入のコストはどれくらいかかる？
ここまで、Google タグマネージャが一体どんなものなのかを解説してきま
した。では導入しようか、となる前に考えておきたいのが、「導入のコスト」
です。コストといっても、Google タグマネージャは無償で利用可能のため、
利用料金は発生しません。そのため、目に見える形での出費は 0 円で利
用できます。
しかし、利用料金というコストはかからなくても、「導入作業＝作業時間」
というコストは絶対にかかってしまいます。導入作業について詳しくは次
章にて取り上げますが、ざっと挙げただけでも以下のような作業が発生し
ます。特に、導入しようとする Web サイトの規模が大きくなればなるほど、
また、Google タグマネージャへ管理を移行するタグの種類が増えれば増
えるほど、作業量は増えていきます。
・Webサイト内の全ページのHTMLにGoogleタグマネージャのタグを記述する
・Googleタグマネージャで管理することに決めたタグをHTMLから削除する
・Googleタグマネージャの管理画面で配信の設定を行う
●導入で必ず発生する作業
また、Google タグマネージャはあくまで「タグを管理しやすくする」ツー
ルであり、導入しても直接的な売り上げや利益といった目に見えやすい成
果につながるものではありません。そのため、導入の作業コストは無視で
18
用語集 HTML タグ
タグ
マネ
ージ
ャを
導入
する
前に
考え
てお
くべ
きこ
と1-3
きるものではないでしょう。しかし、今後のタグの編集などの作業量を格段
に減らせることを考えれば、長期的に見れば導入した方が時間コストの面
でも良くなることは確かです。
「導入した方がいいけど、導入時にはそれなりの作業量が発生してしま
う……」ジレンマが発生してしまっている状態ですが、どうすればいいの
でしょうか？
おすすめはリニューアル時の「ついで」
筆者がおすすめしたいのは、Web サイト全体を編集するほかの作業の
タイミングで「ついで」に導入してしまう、という方法です。実際の導入
で時間が取られるのは、「Google タグマネージャのタグを記述する」と「既
存のタグを削除する」の 2 つの作業です。つまり、ネックとなるのはすべ
てのページの HTML を編集する必要が出てくることなのです。
そこで、例えば Web サイトのリニューアル時など、全ページの HTML
を編集する作業があった際に一緒に Google タグマネージャの導入も行っ
てしまえば、別々に行うよりもその負担もぐんと減るというわけです。もちろ
んリニューアル時に限らず、新規に Web サイトを立ち上げる際も、最初
から Google タグマネージャを導入しておけば後から HTML を編集する
必要がなくなります。また、もし Web サイトが CMS などテンプレートで管
理されている場合は、いくつかのテンプレートを編集するだけで済むので、
比較的導入は簡単です。
Columnすべての記述を削除できなくても対処は可能
ページ内の随所に記述されているイベント計測タグも本来であれば Googleタグマネージャへ移行するのがベストですが、すべての記述をサイト内から取り除くのは対処できないという場合もあると思います。その場合、イベント計測タグだけはHTMLに残したままにするという対処も可能です。詳しくは7-3を参考にしてください。
19第 1 章 Google タグマネージャを知ろう
用語集 HTML ユニバーサルアナリティクス
タグ
マネ
ージ
ャを
導入
する
前に
考え
てお
くべ
きこ
と1-3
ユニバーサルアナリティクス対応もきっかけの1つ
ほかにも、2014 年には Google アナリティクスが「ユニバーサルアナリ
ティクス」と呼ばれる次期バージョンへとバージョンアップが行われました。
特に無償版を利用しているユーザーは強制的にバージョンアップが適用さ
れ、今後は新しいバージョンを使う必要があります。ユニバーサルアナリティ
クスではタグの内容が旧バージョンから変化しているため、ユニバーサル
アナリティクスを万全に使いたいなら、現在 Web サイト内に記述されてい
る旧 Google アナリティクスのタグをすべて書き換えなければなりません。
一応、旧バージョンのタグのままでも利用面ですぐには不具合が出ない
ようにはなっていますが、当然そのままではユニバーサルアナリティクスの
新しい機能は使えません。また、何かの機能を利用する際に、同一の
Web ページ内で旧バージョンのタグとユニバーサルアナリティクスのタグを
混在させると問題が発生してしまいます。そのため、いつかはユニバーサ
ルアナリティクスにタグを移行する必要があるのです。
この移行作業も、Web サイト全体の HTMLを編集する必要があります。
その際に Google タグマネージャを導入して、タグの管理を移行してしまう
のも1 つの手です。できる限り導入の作業があまり負担にならないタイミン
グを選び、「一緒に」やってしまうことをおすすめします。
・Webサイトの新規立ち上げ時
・Webサイトのリニューアル時
・ユニバーサルアナリティクスへの移行時
● Google タグマネージャを導入するおすすめのタイミング
20
用語集 カスタムディメンション カスタム指標
タグ
マネ
ージ
ャを
導入
する
前に
考え
てお
くべ
きこ
と1-3
Column新しいユニバーサルアナリティクス
アクセス解析ツールとして非常に高いシェアを誇るGoogle アナリティクスが、大規模なバージョンアップを行いました。その新バージョンが「ユニバーサルアナリティクス」です。旧バージョンは一般的に「Google アナリティクス」と呼ばれることが多いですが、本書では混乱を避けるため「旧バージョン」という呼び方で統一します。 ユニバーサルアナリティクスでは新たに異なるデバイス間（例えば PCとスマートフォンなど）で同一ユーザーをひもづける機能が追加されたほか、旧バージョンにあった「カスタム変数」と呼ばれる機能が「カスタムディメンション」や「カスタム指標」というさらにパワーアップしたものに置き変わります。ほかにも新機能がいくつもありますので、興味があれば調べてみましょう。
https://support.google.com/analytics/answer/2790010
●ユニバーサル アナリティクスについて - アナリティクス ヘルプ
21第 2章 Google タグマネージャを導入しよう
Googleタグマネージャを導入しよう
第２章
この章では導入作業に必要な段取りと、Google タグマネージャの主な機能について取り上げています。まずは導入作業の流れの全体像を把握してから、ツールとしての使い方の基本を押さえましょう。
22
タグマネージャを導入する流れ
2-1
用語集 Google アカウント Google アナリティクス
Googleタグマネージャを導入する流れ
導入の流れ2-1
導入～設定は6ステップ
Web サイトに Google タグマネージャを導入するには、以下の作業が必
要となります。前半 3 つは最初の導入時のみ必要なステップ、後半 3 つ
はタグの管理を Google タグマネージャに移行する際に毎回踏むステップ
です。
① Googleタグマネージャのアカウントの作成
② WebサイトのHTMLへGoogleタグマネージャが発行したタグを追加
③ 現在Webサイト内で利用しているタグのリストアップ
④ Googleタグマネージャの管理画面で各種タグの設定
⑤ Googleタグマネージャの動作テスト
⑥ 正しく動作していれば設定を一般ユーザーへ公開
●Googleタグマネージャを導入する6つのステップ
Googleタグマネージャのタグを追加する
最初に、Google タグマネージャの利用には Google アカウントが必要で
す。Google アナリティクスなどをすでに利用している場合は、新たに作成
する必要はありません。そしてその Google アカウントとは別に、Google
タグマネージャでのアカウントが必要になります。詳細については 2-2 で説
明しますが、Gmail や Google カレンダーなど複数のサービスで共通で利
23第 2章 Google タグマネージャを導入しよう
タグマネージャを導入する流れ
2-1
用語集 HTML タグ
用する Google アカウントとは異なる、Google タグマネージャを利用するた
めの専用のアカウントです。この専用のアカウントの中で、Web サイトごと
のタグ配信の設定を「コンテナ」という単位で管理します。アカウントの作
成自体はものの数分で終わります。
●Googleタグマネージャアカウントの構成
Google タグマネージャアカウント
コンテナA
◯◯というWebサイト用 △△というWebサイト用
コンテナB
Google アカウント（[email protected]など）
通常の Google アカウントとは別に、Google タグマネージャのアカウントを作成する必要がある。Google アナリティクスのアカウントなどと同じ要領だ。
Google タグマネージャのアカウントを作成すると、完了画面で Google
タグマネージャのタグが発行されます。このタグを、Web サイトのすべて
の HTML へ記述していきます。この作業には Web サイトの HTML を編
集する必要が出てくるため、それなりの作業量が発生します。もし Web
サイトの HTML 編集をほかの人に依頼する必要がある場合は、早めに
担当者とコミュニケーションを取り、スケジュールを決めておくことをおすす
めします。
24
タグマネージャを導入する流れ
2-1
移行するタグをリストアップする
Web サイトの HTML へ Google タグマネージャのタグを記述したら、
Google タグマネージャが利用できる状況になります。しかし、まだこの段
階では Google タグマネージャでは何もタグを管理していない状態です。
そこで、まずは Google タグマネージャへ管理を移行させるタグを選定す
る必要があります。現在 Web サイト内で利用しているタグをリストアップし
て、それぞれのタグが「どういう用途で」「どのページで利用していて」「タ
グの中身はどういうものか」といった内容を書き出して、Excel などにまと
めるといいでしょう。
・Webサイト内でどんなタグを利用しているか？
・そのタグはどういう用途で利用しているか？
・どのページで利用しているか？
・タグの内容はどういうものか？
●タグをリストアップする際のチェックポイント
●タグをリストアップしたExcelファイルの例
Web サイト内で利用しているタグを書き出した例。どんなページで、どんな目的で利用しているかもこの機会に整理してみるといい。設定漏れを防ぐためにも、一度書き出しておこう。
25第 2章 Google タグマネージャを導入しよう
タグマネージャを導入する流れ
2-1
用語集 プレビュー
Googleタグマネージャの管理画面で設定する
まとめた情報をもとに Google タグマネージャへ登録して管理するタグを
選び、Google タグマネージャの管理画面でそのタグの設定を進めていき
ます。場合にもよりますが、おそらくこの過程が実作業としては最も時間を
取られるでしょう。第 3 章では代表的なタグの設定方法を詳しく解説して
いるので、そちらを参照してください。
なお、元から Web サイト内に記述されていたほかのツールのタグは、
最終的には HTML から削除しますが、設定中の間はまだそのままで構い
ません。なぜなら設定中は Google タグマネージャでタグの配信設定が完
了しておらず、Web サイトからタグの記述を削除するとそのタグが配信さ
れなくなってしまうからです。Google タグマネージャでは、設定の後に正
しく動作しているかを確認し、そして公開というステップを踏みます。Web
サイトの HTML から元のタグを削除するのは、最後の Google タグマネー
ジャの設定を公開するタイミングで行いましょう。なお、初回の Google タ
グマネージャへの移行方法については、6-5 のケーススタディでも扱ってい
ます。いつタグを削除するのか、自社サイトの状況に合わせて考えておき
ましょう。
タグを公開する前に必ず「プレビュー」を行う
Google タグマネージャで各種タグをどのページに配信するかの設定が
できたら、いよいよ公開……の前に、正しくタグの登録ができているか、
必ず動作の確認を行います。具体的な確認方法は付録 1 で解説します
が、Google タグマネージャーには設定内容の実際の動作を確認するため
の「プレビューモード」という機能があります。これにより、一般ユーザー
に対して設定を反映させる前にテストを行うことが可能です。
動作確認が終わったら、あとはその設定内容を一般ユーザーが見られ
るように公開するだけです。Google タグマネージャに登録したタグは、こ
26
タグマネージャを導入する流れ
2-1
のタイミングで Web サイトの HTML から削除しましょう。削除しないと、
「HTML に記述されている分」と「Google タグマネージャが配信する分」
で二重にタグが動作してしまうので、注意が必要です。
これが、Google タグマネージャを導入して実際にタグを配信するまでの
流れです。次項以降でそれぞれ順を追って解説していきますが、作業の
全体像は把握できましたか？ この節の最初に解説したステップを、図で再
度掲載するので、作業の流れを確認してみてください。どこで時間がかか
りそうかをあらかじめ予測しておくことが、スムーズに移行を済ませるため
の大事なポイントです。
●Googleタグマネージャを導入する6つのステップの図
② WebサイトのHTMLへGoogle タグマネージャが発行したタグを追加
③ 現在Webサイト内で利用しているタグのリストアップ
④ Google タグマネージャの管理画面で各種タグの設定
⑤ Google タグマネージャの動作テスト（プレビューモード）
⑥ 正しく動作していれば設定を一般ユーザーへ公開
① Google タグマネージャのアカウントの作成
OKの場合 NGの場合
前半①～③のグレーの枠は、導入時に 1回だけ行うステップ。④～⑥の白い枠は、タグの設定を追加したり変更したりするたびに繰り返すステップだ。
27第 2章 Google タグマネージャを導入しよう
用語集 Google アカウント
タグマネージャのアカウントを作成する
2-2
Googleタグマネージャのアカウントを作成する
アカウントの作成2-2
アカウントの作成は数分で終わる
Google タグマネージャのアカウントを作成するためには、その前に
Google アカウントをあらかじめ用意しておく必要があります。もしまだ
Google アカウントを持っていない場合は、作成しておきましょう。Google
アカウントの用意ができたら、Google タグマネージャの公式ページにアクセ
スします。画面の指示に従って進めていくだけですので、数分でアカウン
ト作成は終わります。
Google タグマネージャのページ（http://www.google.com/tagmanager/）で「今すぐ登録」をクリックする。
Column2015年6月からバージョン2に切り替わる
Googleタグマネージャは、2015 年 6 月から「バージョン 2（v2）」に切り替わります。これは以前から「新しい UI」としてテスト用に公開されていたもので、以前の UIを使っていた人もすべてバージョン 2 に自動的に切り替わります。本書は、すべての画面をバージョン 2 で解説しています。
28
用語集 コンテナ
タグマネージャのアカウントを作成する
2-2
まずは、「アカウント名」を入力します。アカウント名は、わかりやすいも
ので構いません。例えば Google タグマネージャを会社で利用するのであ
れば、「○○株式会社」のような会社名などでいいでしょう。
「アカウント名」に会社名などわかりやすい名前を入力して「続行」をクリックする。アカウント名は後から変更することも可能だ。
続いて、「コンテナ名」を入力する画面になります。「コンテナ」とは、
タグの設定情報などをまとめたもので、通常は Web サイトごとにコンテナ
が必要となります。Google タグマネージャを利用するのに必要な「Google
タグマネージャのタグ」も、コンテナごとに異なるものが発行されます。従っ
て、コンテナ名には Web サイト名などを入力するといいでしょう。前述の
通り、アカウント名は会社名などが基本なので、もし複数の Web サイトを
運営している会社であれば、Web サイトごとにいくつものコンテナを登録
することになります。なお、原則としては「1 つの Web サイトごとに 1 コン
テナ」が推奨されていますが、もし複数の Web サイトで同じコンテナを利
用したい場合は、コンテナは 1 つでも構いません。
29第 2章 Google タグマネージャを導入しよう
タグマネージャのアカウントを作成する
2-2
「コンテナ名」に Web サイト名などを入力して「作成」をクリックする。コンテナ名も、アカウント名と同様に後から変更することができる。
利用規約に同意すれば、アカウントの作成は完了となります。画面が切
り替わり、作成したコンテナを利用するために必要な Google タグマネー
ジャのタグが表示されるので、テキストエディタなどへコピー＆ペーストして、
保存しておきましょう。このタグは、Google タグマネージャの管理画面から
いつでも同じものを確認できます。このタグを Web サイトの HTML に記
述することで、その Web サイトで Google タグマネージャが利用可能にな
ります。
利用規約が英文で表示されるので、内容を確認して「はい」をクリックする。
30
用語集 DOM ディスプレイ広告 コンバージョン
タグマネージャのアカウントを作成する
2-2
アカウント作成が完了すると、Google タグマネージャのタグが表示される。コピーして保存しておこう。
Google タグマネージャのアカウント作成についてまとめると、要は「ア
カウント名」と「コンテナ名」にわかりやすい名前を入力するだけです。
「アカウント」と「コンテナ」の違いが少々わかりにくいかもしれませんが、
Google アナリティクスを利用している人であれば、Google アナリティクスの
「アカウント」と「プロパティ」に相当するものと考えるとイメージしやすい
かもしれません。
Column複数Webサイトはコンテナを分ける？
例えば、Google アナリティクスのタグをGoogleタグマネージャで管理するとして、もし複数の Web サイトで同一の Google アナリティクスのトラッキング IDで計測しているような場合は、コンテナを分けずに同一のコンテナを共有して利用するといいでしょう。逆に「Web サイトごとにトラッキング ID が異なる」場合や
「Web サイトごとに利用しているタグの状況が違う」ようであれば、コンテナは分けた方が無難です。本書では、1 つのコンテナで 1 つの Web サイトを管理するケースを例に解説していきます。
31第 2章 Google タグマネージャを導入しよう
用語集 HTML コンテナ
タグマネージャのタグをHTMLに追加する
2-3
GoogleタグマネージャのタグをHTMLに追加する
HTMLの追加2-3
タグは管理画面からいつでも確認できる
アカウントが作成できたら、次は Web サイトの HTML にタグを記述しま
す。Google タグマネージャを利用するには、Google タグマネージャから
発行されたタグを利用したい Web ページの HTML へ、必ず記述しなけ
ればなりません。なぜならば、このタグは Google タグマネージャを呼び出
すためのもので、これなしでは Google タグマネージャを利用することがで
きないからです。
Google タグマネージャを利用するために必要なタグは、2-2 のアカウント
作成の完了画面で表示されたものです。そのときに保存を忘れていても、
管理画面からいつでもタグを確認できるので安心してください。Google タ
グマネージャの管理画面にログインし、アカウントとコンテナを順にクリックし
ます。コンテナの画面になったら、左上のコンテナ名の隣にある「GTM-
XXXXXX」というリンクをクリックします。するとGoogle タグマネージャの
タグが表示されるので、それをコピーして利用します。
左上のコンテナ名の隣にある「GTM-XXXXXX」というリンクをクリックするといつでもタグを確認できる。
32
用語集 タグ
タグマネージャのタグをHTMLに追加する
2-3
タグはbodyタグ開始直後に貼り付ける
あとはコピーしたタグを Web サイトの HTML へ記述していくだけです。
これは、基本的に Web サイト内の全ページが対象になります。もし Web
サイト内の特定のページのみでしか Google タグマネージャを利用しない、
という場合は、そのページのみでも構いません。その場合はタグを記述し
ていない Web ページにタグは配信されませんので、注意してください。
なお、Google タグマネージャのタグは「body タグが開始した直後」
が推奨されています。なるべくページの冒頭にタグを記述することで、
Googleタグマネージャで管理する各種タグが実際に配信されるのを早める
ことが目的だからです。bodyタグの終了タグ直前などでも動作はしますが、
読み込み速度などの都合であまり推奨されません。また、head タグの内
部に記述することも可能ですが、Google タグマネージャで配信するタグに
よっては正常に動作しない可能性もありますので、おすすめはできません。
特別な事情がなければ、Google タグマネージャのタグは body タグの開
始直後へ記述するようにしましょう。
Google タグマネージャのタグは body タグの開始直後に貼り付ける。タグを配信する全ページに貼り付ける必要がある。
33第 2章 Google タグマネージャを導入しよう
用語集 JavaScript JavaScript ファイル
タグマネージャのタグをHTMLに追加する
2-3
Web サイト内のページに Google タグマネージャのタグを記述できたら、
これで Google タグマネージャの利用準備が整いました。あとは Google
タグマネージャの管理画面上でタグの設定を行って反映していきます。続
いて、Google タグマネージャの管理画面の見方や設定の際に必要になる
用語を覚えましょう。
Column外部JavaScriptファイルにしても問題ない？
これまで「簡単に Web サイト全体の Google アナリティクスのタグを修正できるようにする」ために、Google アナリティクスのタグを直接 HTML に記述せず、外部 JavaScriptファイルとして運用していた人もいるかもしれません。タグを外部 JavaScriptファイルとして管理して、それぞれのページからはその JavaScriptファイルを読み込むようにしておけば、何かタグに変更があった場合もそのJavaScriptファイル 1 つを編集するだけで全ページに反映される、というわけですね。Googleタグマネージャも専用のタグを全ページの HTML 内へ記述しなければなりませんが、これも同様に外部 JavaScriptファイル化してしまおうと考える人もいるのではないでしょうか。結論からいえば、それは可能です。ただし、一部分のみとなります。 Googleタグマネージャが発行するタグは、「Googleタグマネージャを呼び出すための JavaScript」のほかに「JavaScript が無効な環境向けの noscriptタグ」の 2 つを含んでいます。前者は JavaScript ですのでこの scriptタグの中身をコピー＆ペーストして外部 JavaScriptファイルとして管理できますが、後者は JavaScript ではなくHTMLタグなので、JavaScriptファイルに含めることができません。つまり、「noscriptタグの中身を切り捨ててもいいのであれば、外部 JavaScript ファイルで管理してもいい」となります。 実際のところ、JavaScript が無効な環境は現在では非常にまれなため、無視しても構わないという判断をする人も多くいます。
34
用語集 コンテナ
タグマネージャの管理画面
2-4
Googleタグマネージャの管理画面
管理画面2-4
コンテナの管理画面を表示する
Google タグマネージャは、オンラインの管理画面へブラウザでログインし
て設定を行うツールです。そのため、頻繁に管理画面を使うことになりま
す。まずは、この管理画面に慣れておきましょう。Google タグマネージャ
にログインすると、アカウントの一覧とそのアカウントで管理しているコンテナ
の一覧が表示されます。コンテナ名をクリックすると、そのコンテナの管理
画面が表示されます。
Google タグマネージャでの各種設定は、コンテナ単位で行います。実
は Google タグマネージャが発行したタグもコンテナ単位で異なり、それぞ
れ Google タグマネージャの特定のコンテナを呼び出すためのタグになって
います。本書ではこのコンテナを選択した後の画面を「管理画面」と呼
びますが、正確には「コンテナの管理画面」ということになります。
アカウントとコンテナの一覧が表示される。管理したい Web サイトのコンテナを選択しよう。
35第 2章 Google タグマネージャを導入しよう
用語集 タグ トリガー 変数
タグマネージャの管理画面
2-4
管理画面は3つのエリアに分かれている
それでは早速、管理画面を見てみましょう。画面は大きく分けて、上部
の「画面上」ブロックと、薄い灰色の線で区切られた「画面左」ブロック、
そして最も大きな面積を占める「画面右」ブロックがあります。それぞれ
の役割は、以下のようになっています。
管理画面は大きく3 つに分かれている。左側がメニューで、右側が実際に設定を行うエリアだ。
画面上ブロックでは、主にアカウントの管理にかかわるメニューがまとめ
られています。左側には現在開いているコンテナ名が表示されています
が、上部の「アカウント」をクリックすることでほかのコンテナへ表示を切
り替えることができます。そして右上には Google アカウントについてのメ
ニューがあり、ログアウトなどが可能です。その下には「公開」というボタ
ンが用意されており、設定が完了したらここから一般のユーザーに公開し
ます。また、公開前のプレビューもこの「公開」から行います。
画面左ブロックでは、いわゆる機能的なメニューが並んでいます。この
メニューを選択すると、画面が切り替わり、詳しい内容を見られるようになっ
ています。メニューは、各種設定の概要を見られる「サマリー」、そして
Google タグマネージャの三大要素といえる「タグ」「トリガー」「変数」（2-5
36
タグマネージャの管理画面
2-4
を参照）が並んでいます。
画面右ブロックは、メニューごとに詳細が表示される広いスペースです。
ログイン直後、つまり「サマリー」 画面では、タグなどの変更履歴や変
更点の数といった、現時点での編集中の状態が概要として表示されます。
また、画面左ブロックでメニューを選択することで、このブロックにそれぞ
れの設定画面を表示できます。
画面の説明の中で「タグ」「トリガー」「変数」といった聞きなれない
単語が出てきましたか？ これらは、Google タグマネージャの三大要素とも
いえる用語です。詳しくは、次の 2-5 で解説します。
Columnバージョン２で名称も新しくなった
「タグ」「トリガー」「変数」は、Googleタグマネージャの以前のバージョンでは「タグ」「ルール」「マクロ」と呼ばれていました。以前のバージョンを見たことがある人は混乱してしまうかもしれませんが、呼び方が変わっただけで中身は変わっていません。本書は、バージョン２の名称に従って解説を進めていきます。
Column画面上部は全体を管理するメニュー
画面左ブロックのメニューが「コンテナ『で』管理するもの」を設定するためのメニューだとすれば、画面上ブロックに並んでいるメニューは「コンテナ『を』管理するもの」をまとめたメニューになっています。文中で触れた通り「アカウント」はアカウントの一覧画面を表示するメニューで、その隣の「コンテナ」はコンテナのサマリー画面へ戻ってくるためのメニューです。そして「バージョン」ではそのコンテナの設定情報をまとめて保存した一覧が表示され、こちらについては詳しくは2-6や付録 2などでも触れているのでそちらを参照してください。最後の「管理」ではアカウントやコンテナの根幹的な設定を変えるためのメニューなどがまとめられており、運用ユーザーの追加やアカウント名、コンテナ名の変更などもこちらから行います。
37第 2章 Google タグマネージャを導入しよう
用語集 Google アナリティクス タグ ページビュー
三大要素「タグ」「トリガー」「変数」を知る
2-5
三大要素「タグ」「トリガー」「変数」を知る
タグ／トリガー／変数2-5
Googleタグマネージャの三大要素
さて、管理画面の説明で出てきた「タグ」と「トリガー」と「変数」。
Google タグマネージャでも特に重要な要素です。それでは、これらは一
体どのようなものなのでしょうか？ ひと言で表すと、「タグ」はその名の通り
ほかのツールの「タグ」、「トリガー」はタグを配信する「条件」、「変数」
は状況によって中身が変わる「動的な値」となります。
・タグ ……… Googleタグマネージャで管理するほかのツールの「タグ」
・トリガー … タグにひもづけて利用する、「どんなときにタグを配信するか」の「条件」
・変数 ……… 状況によって中身が変わる可能性のある「動的な値」
●三大要素の意味
「タグ」は個別に登録する
「タグ」は文字通り、Google タグマネージャで管理する「タグ」その
ものを指します。例えば Google アナリティクスのページビュー計測タグや
Google AdWords のコンバージョンタグなど、ほかのツールが発行した各
種タグを登録したものが「タグ」なわけです。これらのタグは、それぞれ
個別に登録しておく必要があります。なぜなら、その方が柔軟に再利用で
きるからです。
例えば、トップページで「Google アナリティクスのページビュー計測タグ」
38
用語集 コンテナ トリガー
三大要素「タグ」「トリガー」「変数」を知る
2-5
と「Google AdWords のリマーケティングタグ」の両方を配信している場
合、2 つのタグは別々のタグとして分けて登録します。そうすれば、ほか
のページでもGoogle アナリティクスのページビュー計測タグを配信したいと
きにも、新たに別のタグを登録する必要がなくなります。逆に、仮に 2 つ
のタグをまとめて 1 つのタグとして登録してしまっていると、そのタグはトップ
ページのように 2 つのタグを配信するページでしか使えず、効率的ではあ
りません。同一内容のタグがページごとに複数登録されていると、後々の
管理にも支障がでてきてしまいます。複数のタグは決して1 つにまとめずに、
1 つずつ登録する。これがタグの基本です。
タグは、その名の通りほかのツールが発行したタグのこと。左のメニューで「タグ」をクリックして表示できる。初期状態では何も登録されておらず、「新規」をクリックして追加する。
「トリガー」はタグをどのページで配信するかを決める
「タグ」を配信する条件のことを「トリガー」と呼びます。例えば「Google
アナリティクスのページビュー計測タグを『全ページで』配信する」場合
であれば、この「全ページで」の部分がトリガーにあたります。コンテナ
を作成した初期設定で「すべてのページ」という名前のトリガーが利用で
きるようになっています。全ページ共通で配信するタグの場合は、このトリ
ガーを選択すればすべてのページに同じタグを配信できます。
39第 2章 Google タグマネージャを導入しよう
用語集 Google AdWords
三大要素「タグ」「トリガー」「変数」を知る
2-5
一方、「商品の『購入完了ページのみ』に Google AdWords のタグ
を配信したい」といった場合、「購入完了ページ」を指定するためのトリ
ガーを作成する必要があります。「タグを配信する条件」のほか、逆に「○
○というトリガーに一致したら配信しない」といった例外条件も利用可能で
す。どのページに配信するか／しないかということを設定するのがトリガー
の役割です。
タグをどのページに配信するかを決めるのが「トリガー」。左のメニューで「トリガー」をクリックして表示できる。初期状態では何も登録されていない。「すべてのページ」など一部のトリガーは、登録されていなくても最初から利用できる。
Columnトリガーに複数の条件を設定すると？
トリガーは単一または複数の条件を記述して設定します。複数の条件を設定した場合は、「すべての条件に一致した場合」に、ひもづいたタグが配信されます。
「どれか 1 つに一致した場合」に配信したいのであれば、それぞれのトリガーを個別に登録してタグの設定画面でひもづける必要があります。複数の条件の組み合わせについては、4-5 で詳しく解説しています。
40
用語集 URL 変数
三大要素「タグ」「トリガー」「変数」を知る
2-5
変数は最初はページ系のものだけ押さえておく
「変数」は、この中で最も聞き覚えのない単語かもしれません。「変数」
は「動的な値」を意味しますが、これは状況によって変わる可能性のあ
るもの全般を指しています。例えば Web ページが変われば URL やリファ
ラーは当然変わりますし、そのほか、ユーザーごとに異なるもの（そのと
きの購入金額など）もあります。Google タグマネージャでは、こうしたもの
を総称して「変数」として管理します。変数はトリガーの指定（Web ペー
ジを指定する際に扱いやすい URLもページ系の変数の一種として用意さ
れています）やタグの中に含まれる変動する値などで使いますが、最初は
ピンとこないかもしれません。この後、実際に設定していくうちにコツがつ
かめると思いますので、ここでは「そのときどきで変わる値」くらいに思っ
ておきましょう。コンテナを作成した初期状態では、以下の変数があらかじ
め利用できる状態になっているので、すぐに使うことができます。
・Page URL …………… URL全文
・Page Hostname …… URLのホスト名のみ
・Page Path …………… URLのパス部分のみ
・Referrer ……………… リファラー
・Event ………………… Googleタグマネージャを呼び出すための特殊な変数
●初期状態で利用可能な変数
41第 2章 Google タグマネージャを導入しよう
三大要素「タグ」「トリガー」「変数」を知る
2-5
左のメニューで「変数」をクリックすると初期状態で利用可能な変数を確認できる。よく使うのはページ系の変数だ。
いくつかよくわからないものもあるかと思いますが、必ずしもすべてを使
う必要はありません。最低限、ひとまずはトリガーの作成でよく使うページ
系だけ覚えておけば問題ありません。なお、タグの項目の値として購入金
額などのページごとに異なる動的な値を利用したい場合は、変数として登
録する必要があります。変数の登録については、第 5 章で詳しく解説し
ています。
42
用語集 バージョン
「プレビュー」と「公開」の流れを知る
2-6
「プレビュー」と「公開」の流れを知る
プレビュー／公開2-6
設定の変更は「バージョン」で管理される
「バージョン」という言葉を聞いたことはありますか？ よくソフトウェアなど
で「バージョン 1.0」とか記載されていますよね。これはいつ更新されて
何番目のものなのかを示しています。Google タグマネージャでもこのバー
ジョン管理が取り入れられており、任意のタイミングで登録してあるタグ、ト
リガー、変数の設定一式がバージョンとして保存されます。例えば「6 月
7 日の設定一式をバージョン 1」「7 月 7 日時点での設定一式をバージョン
2」といった具合です。バージョンとして保存されていれば、万が一何かの
トラブルが起こった際も、いつでもトラブルが起きる前の設定に戻すことが
可能です。先の例であれば、7 月 7 日のバージョン 2 で一部のタグが読み
込まれないといったトラブルが起きても、すぐに 6 月 7 日のバージョン 1 の
状態に戻せるわけです。
●バージョン管理の図
公開バージョン2
バージョン1
編集中
公開
トラブル
新しく公開した設定でトラブルがあったら、問題がなかった前のバージョンにすぐ戻すことができる。非公開の状態で落ち着いてトラブルの原因を探ろう。
43第 2章 Google タグマネージャを導入しよう
用語集 公開 プレビュー
「プレビュー」と「公開」の流れを知る
2-6
上部のメニューで「バージョン」をクリックするとバージョンの一覧を表示できる。バージョンは一般ユーザーへの公開時に自動的に作成されるほか、任意のタイミングでも保存することもできる。
公開前に「プレビューモード」で確認する
Google タグマネージャでは、設定内容の動作確認用の機能として「プ
レビューモード」が用意されています。これは設定内容をプレビューモード
をオンにしたブラウザ内だけで有効にする機能で、設定した内容で正しく
意図通りにタグが配信されているかを確かめるために使います。プレビュー
モードは管理画面の右上にある「公開」ボタンから利用できます。「公開」
をクリックすると、メニューが表示されます。
コンテナの設定画面右上にある「公開」をクリックする。
44
「プレビュー」と「公開」の流れを知る
2-6
「今すぐ公開」を選択すると一般ユーザーに公開されてしまうので、その前に「プレビュー」をクリックして動作確認を行う。
プレビューモードがオンになった。この状態で Google タグマネージャのタグを記述している Web ページを表示する。「プレビューモードを終了」をクリックするとプレビューモードを終了できる。
プレビューモードをオンにした状態で Google タグマネージャのタグが記
述された Web ページにアクセスすると、本来のページ内容とは別に、画
面の下部にタグの一覧が表示されるようになります。そのため、設定した
タグが想定した通りにきちんと配信されているかを視覚的に確認できます。
また、もしプレビューモードで確認中にタグの設定などを変更した場合は、
「プレビュー中のバージョン」の左下にある「更新」をクリックすることで、
プレビューモードに変更を反映することができます。
45第 2章 Google タグマネージャを導入しよう
「プレビュー」と「公開」の流れを知る
2-6
プレビューモードをオンにした状態では配信されているタグ一覧が表示される。「Tags Fired On This Page」が配信されているタグ、「Tags Not Fired On This Page」が配信されていないタグだ。詳しい見方は付録 1を参照。
確認が終わったら忘れずに「公開」する
タグやトリガー、変数などの設定が終わり、プレビューモードで動作確認
ができたらその設定内容を一般ユーザーに「公開」します。Google タグ
マネージャではこの「公開」を行わない限り、一般のユーザーには設定
内容が反映されません。そのため、設定作業中は気兼ねなくいろいろと
試すことができる一方で、設定が完了したら忘れずに公開する必要があり
ます。
画面右上にある「公開」をクリックして「今すぐ公開」をクリックすると、
自動的にバージョンが作成されて公開までを一挙に行ってくれます。また、
過去に作成したバージョンに戻したい場合は、バージョンの一覧から過去
のバージョンを選択して、「公開」をクリックします。バージョンを戻す方法
については、付録 2 でも詳しく解説しています。
46
用語集 タグ トリガー 変数
「プレビュー」と「公開」の流れを知る
2-6
「今すぐ公開」をクリックすれば、Google タグマネージャ内だけでなく一般ユーザーに対してもタグが公開される。
Google タグマネージャを使う大きな流れは、以上で終了となります。全
体を通して見ると、「タグ」「トリガー」「変数」の三大要素の設定や「バージョ
ン」の仕組み、「プレビュー」「公開」の段取りがポイントになるでしょうか。
文章ではいまいち把握しづらくても、実際に使ってみればすんなりと理解で
きます。第 3 章では、いよいよ実際に手を動かして設定してみましょう。
Column過去のバージョンに戻すとどうなる？
バージョンは、初期状態では 1、2という順に番号が振られています。例えば最新のバージョンが 4 の場合、バージョン 2 に戻すと、3と4 の設定はなかったことになりすべての設定がバージョン 2 のときの状態に戻ります。ただしバージョン3と4 の設定内容も自分で削除しない限り残っているので、一般ユーザーに公開した内容をバージョン 2 に戻して、ゆっくりと最新のバージョンで何が問題だったかを調べることができるのです。バージョンの管理は、付録 2 で詳しく解説しています。
実践 Googleタグマネージャ入門 増補版2015年5月21日 初版発行
Copyright © 2015 Ayudante, Inc. All rights reserved.
印刷所 日経印刷株式会社ISBN978-4-8443-3822-2 C3055
Printed in Japan
本書のご感想をぜひお寄せください
読者登録サービス
●落丁・乱丁本はお手数ですがインプレスカスタマーセンターまでお送りください。送料弊社負担にてお取り替えさせていただきます。但し、古書店で購入されたものについてはお取り替えできません。
●本書の内容に関するご質問は、書名・ISBN・お名前・電話番号と、該当するページや具体的な質問内容、お使いの動作環境などを明記のうえ、インプレスカスタマーセンターまでメールまたは封書にてお問い合わせください。電話やFAX等でのご質問には対応しておりません。なお、本書の範囲を超える質問に関しましてはお答えできませんのでご了承ください。
本書は著作権法上の保護を受けています。本書の一部あるいは全部について（ソフトウェア及びプログラムを含む）、株式会社インプレスから文書による許諾を得ずに、いかなる方法においても無断で複写、複製することは禁じられています。
アンケート回答者の中から、抽選で商品券（1万円分）や図書カード（1,000円分）などを毎月プレゼント。当選は賞品の発送をもって代えさせていただきます。
著 者 畑岡大作（アユダンテ株式会社）
発行人 土田米一
発行所 株式会社インプレス 〒101-0051 東京都千代田区神田神保町一丁目105番地 TEL 03-6837-4635（出版営業統括部） ホームページ http://book.impress.co.jp/
http://book.impress.co.jp/books/1114101122
■読者の窓口インプレスカスタマーセンター〒101-0051 東京都千代田区神田神保町一丁目105番地TEL 03-6837-5016／FAX [email protected]
■書店／販売店のご注文窓口 株式会社インプレス 受注センター TEL 048-449-8040 FAX 048-449-8041
