Googleタグマネージャーの概要

Transcript

1. Googleタグマネージャー の概要 Presentations by SKYGUILD

2. Googleタグマネージャーとは

3. Googleタグマネージャーとは ・GoogleAnalytics、Google 広告と簡単に連携できる ・HTMLを編集せずに、計測タグ・広告タグなどの設定ができる ・導入時のみトラッキングコードという文字列をHTML内に設置する　 ・タグマネージメントツールの 1 つ ・無料で利用制限がない ・GTM

   と略す ※本スライド内の解説は、2019年12 月時点での情報となります

4. Googleタグマネージャーのメリット ・HTMLを編集せずに、タグを追加・変更・削除できる 　→ エンジニアを経由せずに済むため効率的 ・サイト内に設置している複数のタグを管理画面上で把握できる ・実装上の手間をかけて集計していたデータが管理画面上だけで設定できる 　→ リンククリック数、スクロール率、動画の再生数 など ・バージョン管理、

   プレビューができる ・ページの読み込みスピードが速くなる ・リンクの 1つ 1つに設定していたイベントも一括で設定することが可能 →　より楽に、より豊富なデータを取得することができる

5. ・学習コストがかかる 　→ 決まったタグを設置するだけで集計が開始出来るGoogleAnalytics とは違い、 　　 集計を始めるためにまず Googleタグマネージャーの基本概念・操作を覚える 　　 必要がある、専門用語が多く学習ハードルは高い ・集計したい内容によっては、HTML内にも記述が必要になる

   ・既存サイトに導入するにはGAタグの置き換えなどの手間がかかる ・高度な設定を行うためには、ある程度JavaScriptの知識が必要になる →　完全にエンジニアの力を借りないのは難しい 　　タグ管理者が GTMの知識・技術知識を積極的に学ぶ必要がある ※今回は新規サイトへの導入を中心に解説をします Googleタグマネージャーのデメリット

6. つまり・・・ 最初はちょっと大変だけど、 一生懸命、勉強すれば凄い便利になる！ でも頼れるエンジニアがいればなおよし

7. GTMの基礎知識

8. GTMの基礎知識 アカウント： コンテナを管理するグループ。一般的にはクライアント毎。 コンテナ： 実際に設定を行っていくサイト。ドメイン別、サイト別など。 → GoogleAnalytics でのアカウントとプロパティと似た構造 アカウント コンテナ

   A コンテナ B コンテナ C

9. GTMの基礎知識 ワークスペース： 実際に GTM 上で設定変更を行うための作業環境 無償版の GTM では 1 コンテナに対し、上限

   3 つまで同時に利用が可能 ワークスペースの設定変更は、ワークスペース毎に反映（公開）するため、全ての設定変更が完了 してからでないと反映してはいけない。 そのため、複数人で別々の設定作業を行うときなどにワークスペースを分ける。 コンテナ ワークスペース 1 ワークスペース 2 ワークスペース 3

10. ワークスペース上の設定作業 タグ： ページへ追加されるタグを指す。トリガーの条件が満たされた場合に配信される。 トリガー： タグが配信される条件をまとめたもの。トリガーの種類（タイミング）と「変数」を使って条件を作る。 変数： 状況によって変わる値。ページURL、 リンク先 URLなど、 「組み込み変数」という元からGTM

    に用意されて いる変数もあり、ユーザが自分で様々な値を定義することもできる。 変数はトリガーの条件として利用したり、タグの計測値としても利用できる。 ワークスペース トリガー A が「/sample/XXX/」だったら ページを閲覧した際に、 リンク要素をクリックした際に、 タグ A トリガー B タグ B 変数 （デバイス） 変数 （デバイス） XX 広告のコンバージョン トラッキングコードを挿入 イベントトラッキングを送信 をラベルに挿入 変数 （ページ URL） 変数 （ページ URL） 変数 （リンク先 URL） 変数 （リンク先 URL） に「XXX」を含んでいたら

11. 公開とバージョン 公開： ワークスペースの設定内容を本番環境へ反映すること。 公開はタグ単位ではなく、ワークスペース（設定一式）単位で行う。 複数のワークスペースで作業している場合、公開したワークスペース以外の設定は反映されない。 バージョン： ワークスペースを公開すると同時に作成され、ワークスペースの設定内容が丸ごと保存される。 どのユーザがどのような操作をしたかの履歴を確認したり、以前のバージョンに戻すことなどができる。 ワークスペース 公開

    バージョン一覧 トリガー A タグ A タグ B トリガー B 変数 （デバイス） 変数 （ページ URL） 変数 （リンク先 URL） XX 年 XX 月 XX 日　◦◦更新対応 XX 年 XX 月 XX 日　△△コンテンツ追加 トリガー X タグ X 変数 （XXXXXX） トリガー A タグ A タグ B トリガー B 変数 （デバイス） 変数 （ページ URL） 変数 （リンク先 URL）

12. GTMの導入と初期設定

13. GTM の導入と初期設定 GTM の導入 1．アカウントの作成 2．コンテナの作成 3．サイトの HTML へ GTM

    タグを追加 GTMの初期設定 4．ワークスペースでタグを追加する 5．プレビューモードを使って動作確認 6．本番環境へ公開 GTM を導入する際の手順と初期設定の内容を解説していきます。 今すぐ導入できるサイトがなかったとしても、プレビュー以外は 実際のサイトがなくても実行できるのでぜひ試しにやってみましょう！

14. GTM の導入 1. アカウントの作成 GTMの公式サイトへアクセス、 「無料で利用する」をクリック https://marketingplatform.google.com/about/tag-manager/ 「新しいアカウントの追加」画面でアカウントの情報を入力 アカウント名： クライアント名など、

    コンテナを管理するグループの名称 国： 日本を選択

15. GTM の導入 2. コンテナの作成 同じ画面内にてコンテナの情報を入力、 「作成」をクリック 利用規約が表示されるので、 「はい」をクリック コンテナ名： サイト名、ドメインなど

    ターゲット プラットフォーム： ウェブサイトであればウェブを選択

16. GTM の導入 3．サイトの HTML へ GTM タグを追加 アカウントとコンテナの作成が完了されると、必要な GTMタグが表示されるので、 指示に従ってサイトの

    HTML（全ページ）の適切な位置に追加する

17. GTM の初期設定 4．ワークスペースでタグを追加する ここまでで GTM の導入は完了となりますが、このままでは何も計測されません。 ここからは配信したいタグをワークスペースで設定していきましょう。 まずは初期設定として、 「サイト内全ページ」 で

    「GoogleAnalyticsのPV 計測」 を 「本番サイト」 「ステージングサイト」に分けて計測する方法を解説していきます。

18. GTM の初期設定 GTMワークスペース ホームの画面説明 ① ワークスペースの追加、切り替えができます 複数使用する必要がなければ 「Default Workspace」のままで問題ありません ②

    このナビゲーションから「タグ」 「トリガー」 「変数」を設定していきます ③ バージョンの確認、切り替えなど ④ アカウント、コンテナ設定、ユーザ管理など ⑤ 先程 HTML に追加した GTM コードを表示することができます ⑥ ワークスペースのプレビューと公開をすることができます（詳しくは後述） ① ② ③ ④ ⑤ ⑥

19. GTM の初期設定 変数を登録 メニューから「変数」を選択し、 「ユーザー定義変数」の「新規」をクリック ▽ 本番サイトとステージングサイトのトラッキング ID をそれぞれ登録する

20. GTM の初期設定 「変数の設定」エリアをクリック 「変数タイプを選択」から 「定数」を選択

21. GTM の初期設定 「値」に GoogleAnalytics のプロパティID「UA-XXXXX-X」を入力して、 「保存」をクリック

22. GTM の初期設定 「変数名の変更」が表示されるため、 任意の名称 （ここでは『GA - 本番トラッキング ID』 ） を入力し

    「保存」をクリック これでこの変数の登録は完了となる 同様の手順で、ステージングサイト用のプロパティID を 『GA - ステージングトラッキング ID』 として登録する

23. GTM の初期設定 先ほどと同じように 変数の新規登録手順を進み、 「変数タイプの選択」で 「ルックアップテーブル」を選択する ▽ ドメインごとに分岐して、トラッキング ID を出し分ける変数を登録する

24. GTM の初期設定 ① 変数を入力 プルダウンから 「Page Hostname」 を選択 ② 入力

    行を追加し本番・ステージングそれぞれの ドメイン名を入力 ③ 出力 入力欄右にあるアイコンをクリックし、 先ほど登録したそれぞれの環境別の トラッキング ID の変数を選択 変数名を 「GA - 環境別トラッキング ID」として登録 ※ 「ルックアップテーブル」は、別の変数を指定しその変数の値によって異なる値を返すという変数 ※より複雑な条件分岐をする場合には「正規表現の表」を使用する ① ② ③

25. GTM の初期設定 変数の新規登録で 「変数タイプの選択」にて「Google アナリティクス設定」を選択する ▽ Googleアナリティクス設定の変数を登録する

26. GTM の初期設定 「トラッキング ID」に先ほど登録した『GA - 環境別トラッキング ID』を選択 変数名を「GA - Settings」として登録する

    ID

27. GTM の初期設定 タグを登録 メニューから「タグ」を選択し、 「新規」をクリック

28. GTM の導入と初期設定 「変数の設定」エリアをクリック 「タグの設定」エリアをクリックし、 「タグタイプを選択」から、 「Google アナリティクス：ユニバーサル アナリティクス」を選択

29. GTM の導入と初期設定 「トラッキングタイプ」が「ページビュー」になっているのを確認し、 Google アナリティクス設定に先ほど登録した『GA - Settings』を選択

30. GTM の初期設定 「トリガー」エリアをクリックし、 「トリガーの選択」から「All Pages」を 選択 タグ名を「GA - pageView」として登録

31. GTM の初期設定 5．プレビューモードを使って動作確認 ワークスペース画面右上の「プレビュー」をクリック

32. GTM の初期設定 実際にGTM タグを埋め込んだウェブサイトを開く 画面下部に各タグの配信状況などが表示されるので、 「Tags Fired On This Page」に、

    先ほど登録した Google アナリティクスの PV 計測タグが出ていることを確認する 確認が終わったら、GTM の画面に戻って「プレビューモードを終了」をクリック

33. GTM の初期設定 6．本番環境へ公開 ワークスペース画面右上の「公開」をクリック

34. GTM の初期設定 「バージョン名」 「バージョンの説明」 に今回の変更点を表現する わかりやすい内容を入力して、 「公開」をクリック 公開が完了し、自動的にバージョンが作成され、バージョンの詳細画面が表示されます。

35. GTM の初期設定内容まとめ ワークスペース トリガー - ページビュー All Pages 変数 -

    ルックアップテーブル GA - 環境別トラッキング ID Page Hostname （ドメイン） 変数 - Googleアナリティクス設定 GA - Settings 変数 - 定数 GA - 本番トラッキング ID 変数 - 定数 GA - ステージングトラッキングID exsample.com だったら トラッキング ID として参照 Googleアナリティクス設定として参照 staging.exsample.com だったら タグ - Google アナリティクス設定 GA - pageView バージョン一覧 XXXX 年XX 月XX 日 作成　初期設定 公開

36. 設定例

37. Google 広告のリマーケティングタグ 全ページへタグを挿入 タグの種類から 「Google広告のリマーケ ティング」 を選択 「コンバージョン ID」と 「コンバージョンラベル

    （省略可） 」 を入力 「トリガーの選択」から「All Pages」 を 選択

38. Google 広告以外のリマーケティングタグ 全ページへタグを挿入 Google 広告以外は「タグの種類」に用意されていないため、 「カスタム HTML」を使用 して、広告タグを丸ごと貼り付ける タグの種類から 「カスタム

    HTML」 を選択 広告タグをそのまま貼り付け 「トリガーの選択」から「All Pages」を 選択

39. 特定リンクへのGoogle広告のCVトラッキング 例では Amazonサイトへのリンクを紹介しますが、 「特定ページ内のリンク全て」や、 「特定サイトへのリンク全て」といった指定は「トリガー」の条件を工夫することで、 同じように実現することができます。 タグの種類から 「Google広告のコンバー ジョン トラッキング」

    を選択 「コンバージョン ID」と 「コンバージョン ラベル」を入力

40. 特定リンクへのGoogle広告のCVトラッキング タグの作成画面で「トリガーの選択」を開き、右上の「+」ボタンで追加する 「トリガー」の作成画面が開くので、 「トリガーの設定」エリアをクリックする 「特定リンクへのクリック」の条件の「トリガー」が未登録の場合は、 「トリガー」を登録した上で選択する

41. 特定リンクへのGoogle広告のCVトラッキング 「トリガーのタイプを選択」から「クリック > リンクのみ」を選択 ※もしリンク以外のクリック要素が必要な場合は「すべての要素」を選択

42. 特定リンクへのGoogle広告のCVトラッキング 条件を指定する 「一部のリンククリック」 を選択

43. 特定リンクへのGoogle広告のCVトラッキング 「クリックされたリンクの URL」に「www.amazon.co.jp」を含む場合 ※計測したいリンクが全て特定のサイト（URL）へのリンクの場合に使用できる方法 「クリックされたリンク内のテキスト」に「Amazon で購入する」を含む場合 ※計測したいリンクが全て同じ文言を含む場合に使用できる方法 条件指定例（Amazonサイトへのリンク）

44. 特定リンクへのGoogle広告のCVトラッキング 「トリガー」 を保存すると、 タグの作成画面に戻り、 「トリガー」 が選択された状態となる 「タグ」 を保存して完了

45. まとめ

46. まとめ ・GTMは学習コストが高いが、一度知識を身につけてしまえば、 　 より楽により豊富なデータを取得することが出来る。 ・ 高度な設定を行う際には、エンジニアの協力があると良い。 ・まずは実際に GTM に触れながら、 「コンテナ」

    「ワークスペース」の概念、 　 「トリガー」 「タグ」 「変数」の関係性・登録の仕方を覚える。 ・Google 関連の広告機能などは元から用意されていて便利。 → 今日の話を聞いて、すぐに理解するのは難しいと思うので、 　 実際に GTMを使用しながら、 繰返しこのスライドを振り返って、 　 徐々に理解を深めてもらえればと思います！！！ ・トリガーの設定を工夫することで、様々な条件でタグを配信できる。

47. 参考文献 「Web サイトの分析・改善の教科書」 - 著：小川 卓 「デジタルマーケターと Web 担当者のための Google&Yahoo!

    タグマネージャー の教科書」 - 著：海老澤 澄夫／ウェブ解析士協会 (監修) 「GTM（Google タグマネージャー）とは？基礎知識と導入・初期設定」 - SATORI マーケティングブログ https://satori.marketing/marketing-blog/what-is-marketing/gtm-basic/ 「Google タグマネージャー 公式ガイド」 https://developers.google.com/tag-manager/quickstart?hl=ja

48. Googleタグマネージャーの概要 ご静聴ありがとうございました。 Presentations by SKYGUILD