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