KOBITブログ

「Google タグマネージャ とりあえず、使ってみよう」勉強会に出席して知った5つのチュートリアル

この記事は約 12分 で読めます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-20-15-55

こんにちは。KOBIT代表の窪田です。まずは、Google タグマネージャ勉強会(GTM勉強会)でお話いただいたことをまとめていきます。今回の勉強会もフードがすごい充実していました。ぶっちゃけこの勉強会、有料でも参加してるなあ、と思うレベルなので、主催いただいた小室さんには感謝です。

さて、今回はご本人の希望により、講師のお名前は伏せさせていただきますが、講師の説明は非常にわかりやすかったことを追記しておきます。

タグマネージャとはそもそも何?

タグマネージャ? 聞いたことはあるけど、ぶっちゃけちゃんと使ったことはない。…という人が多いのではないでしょうか。今回はまず、タグマネージャの特徴について説明をします。

ソースコードのごちゃごちゃ、がなくなる。

タグマネージャはその名の通り、タグの管理ツールになります。Googleアナリティクス、Google AdWords、各種DMP、各種リマーケティングなどがソースコード上にごちゃごちゃに存在している、といったことがなくなり、スッキリ管理することができるようになります。

非同期通信なので、サイトが重くならない。

非同期通信をしますので、サイト側が重くなったりはしないのが特徴です。

HTMLコードをいじらずに、タグの発火・停止をGTM管理画面から行うことができる。

これはつまり、社内のエンジニアに依頼しなくても、タグの管理などができるようになるということです。マーケティング部署側だけで独立してタグ管理をすることができ、社内リソースを浪費することがなくなります。エンジニアの稼働が無くても、マーケターはマーケターだけで動けるというのは大きな魅力で、施策を打ちたい時にスピーディーにスタートすることができるようになります。

まずは基本的なタグマネージャ用語を理解しましょう。

基本的に覚えないといけない単語は「タグ、トリガー、変数」の3つ。この概念を理解すると、タグマネージャのできることのイメージがつきやすくなります。

タグ

まず、タグ。タグと一口に言っても、いろいろあるんですよね。「おすすめ」と書いてあるものだけで、こんなにいっぱいあります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-14-20-30

ユニバーサルアナリティクス、従来のアナリティクス、AdWordsコンバージョントラッキング、リマーケティング、DoubleClick、Google Optimize、Googleサーベイ。

確かにありとあらゆるタグがありますよね。これらを一括でまとめられるということになります。

先ほど「おすすめだけでも」と表現したのは、実際にはもっとあらゆる種類のタグがあるからです。例えば…
tagexample

こんなにいっぱいあります。(これでもまだ一例だったりします。)

サイトを進化させようとすればするほど、「あのタグを全ページに入れておきたい!」「このタグをサンキューページにだけ入れたい」みたいなことが出てきますが、そのタグの管理を一括でできるわけです。便利。

トリガー

トリガーとは、ランタイム時にtrueかfalseを判別する条件です。

と公式サイトには書いてあります。(https://support.google.com/tagmanager/answer/6106961?hl=ja)

ですが、これだとよくわからないと思うので、説明をします。まずは例を元に考えていきます。

「サンキューページにコンバージョンタグを貼りたい」というケースで考えます。ここでやりたいことについては、「サンキューページに来たユーザーにコンバージョンタグを表示させる」という説明ができます。

これを厳密に書いてみると、

URL が example.com/thankyouと等しい

時にコンバージョンタグを表示する、ということです。

この
URL が example.com/thankyouと等しい
という命題は、正しいか、正しくないか、の2つしか状態が存在しません(二値)。そのため、trueかfalseを判別する条件だということになります。何かの条件を設定して、その条件に当てはまっているかどうかを設定することをトリガーと呼びます。

トリガーは引き金という意味で、このトリガーを発動させることを発火と呼びます。西部劇みたいな世界観だ・・・。(個人的にこういうストーリー性のあるネーミングって好きなんで、いちいちこういうところに反応してしまいます。)

変数

変数は基本的に上のトリガーとセットで使うものになります。例えば、さっきの「URLがexample.com/thankyouと等しいときに、コンバージョンタグを貼る」というもので考えてみましょう。この中の「example.com/thankyou」が変数になります。

「URLがexample.com/thankyouと等しいときに」という発火条件がトリガーであると考えてみてください。 無理やり西部劇で例えると、「カウントダウンして3秒後に銃を打つ」というものだった場合、3秒が変数で、「カウントダウンして3秒後に」がトリガーになります。え?西部劇の例え入れるとわかりづらくなった?失礼しました・・・!

Google タグマネージャの設定のやり方

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-26-30
まずは新しいアカウントを作っていきます。好きな名前を入れてください。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-26-37

そこからコンテナ名を打ち込みます。これはドメインにしておくと便利でしょう。%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-26-45利用規約が出てきます。日本語がなく英語しか出てきませんが、「はい」を押しましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-26-58

タグマネージャのタグを入れるという画面に移動します。

以下のようにまずは要素との直後の2回に取得する必要があります。 まずは headタグ内のなるべく上のほうに貼り付けてください。

*上のGTM-*******の箇所は実際には、ユーザーそれぞれによって変わってきます。bodyタグの直後にこのコードを次のように貼り付けてください。

*ここも、上のGTM-*******の箇所は実際には、ユーザーそれぞれによって変わってきます。 4つの設定をすることができます。種類は以下の4種類です。 a.WEB用 b.アンドロイド c.iOS用 d.AMPサイト bとcはSDKの中に貼り付けます。aやdはサイトの中に貼り付けていきます。

タグマネージャの構成を理解しよう。

アカウント・コンテナ・ワークスペースの3つの構成を理解しましょう。以下の3つの役割をまずは説明します。

アカウント 最上位階層
コンテナ 作業をする上での箱のような場所
ワークスペース 実際に作業を行う場所。

の3つに分かれています。それぞれの権限ごとにどこまでを共有するかを選ぶことができ、便利です。

タグマネージャでよく使いそうな設定チュートリアル

実際にタグマネージャでこんな設定をしておくと便利、というチップスを説明していきます。

チュートリアル1:メモができる

タグマネージャを使っていくと、このタグは何のために設定しているのかわからないみたいな状態になってしまいがちです。そんな時に使えるのがメモ機能。 memo2

右上の三本点をクリックすると、メモを表示という言葉が出てきます。
memo3

そのままメモを表示を押すと、メモという機能が出てきます。memo4

 

ここに目的や実際にやったことを記述しておくと、後任の人やチーム内の他メンバーがみた時にその背景を知ることができます。

チュートリアル2:電話番号が押されたら、イベントトラッキングしてGA連携したい

電話番号が押された回数を保存しておくと、いろんな改善に行きそうです。それを簡単にトラッキングするためには、まず、タグの設定の仕方から工夫をすると良いでしょう。 event まず設定の際に、トラッキングタイプを「イベント」にしましょう。 実はタグマネージャには便利に使える変数がいろいろ用意されているので、それを使います。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-38-36組み込み変数の上にある「設定」ボタンを押すと・・・。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-38-47

こんな風にいろいろ登場します。この中のクリックと書かれている箇所を全部チェックをつけましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-40-54こんな風にチェックをつけるだけでOKです。

tritelその次にタグのページに移動します。タグを押して新しく作って行きましょう。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-48-03 まずはこんな感じで空になっています。 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-48-09

そこでタグの設定をクリックすると、右側にタグタイプが出てきます。ここで最新のGAを使っている場合はユニバーサルアナリティクスをクリックしてください。古い場合は「従来のGoogle アナリティクス」をクリックしましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-49-03 この中でトラッキングタイプをイベントにして上のようにいれていってください。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-49-27 次にトリガーの設定をします。トリガーを選択してこのタグを配信を押します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-49-35

さっき設定した電話番号クリックトリガーが見つかりました。これを押します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-49-48 押すと、タグとトリガーがひも付きました!これで上の青い保存ボタンを押しましょう。 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-05-23-19-51-22 こんな風にすると、電話番号のトラッキングも可能になります!

チュートリアル3:Google タグマネージャ のプレビューモードを起動しよう!

公開すると、プレビューモードというのを使うことができます。まずは右上の「プレビュー」を押しましょう。そうすると、以下のような画面になります。 preview ここで注意点!プレビュー押しただけでは何も起きないから要注意です!あくまでプレビューモードを押した上で、実際にサイト移動しないと何も起こらないので、気をつけてください。 preview2 プレビューモードでは、 1. PageView 2. DOM Ready 3. Window Loaded この3つの動きを確認できます。どのタイミングで発火しているかを細かくチェックできるので、便利です。

チュートリアル4:ユーザーの追加をしよう。

useradd 管理からユーザーの追加をすることができます。

  • 読み取り
  • 編集
  • 承認
  • 公開

の4つの権限を付与することができるため、ユーザーによって権限範囲を変えておきましょう。

チュートリアル5:イケてるコンテナを移植しよう。

実はGoogleタグマネージャにはコンテナのインポートという概念があります。コンテナはjsonで書かれているので、誰かがやったコンテナの設定ファイルさえあれば、それをインポートするだけで便利な機能を使いまくることができるのです。 勉強会では「イケてる設定をしたコンテナを売る商売とかできそうだよね」、みたいな会話をしました。

その後、検索をしていたら、海外のサイトでフリーでコンテナを提供しているサイトを見つけたので、こちらをシェアさせていただきます。 Google タグマネージャ Container Template For Websites jsonファイルはこちら このコンテナのjsonを入れると、

  • Page Views
  • External Links
  • Telephone Calls
  • Mailto Links
  • PDF Downloads
  • YouTube Tracking
  • Scroll Tracking
  • 404 Page Tracking

などを設定することができるみたいです。PDFのダウンロードやスクロールトラック、電話番号クリックなどが全部入っていますので、使い勝手が良いでしょう。404のページを見た率などもわかるので、分析好きにはたまらないコンテナになりそうです。 コンテナのインポートですが、 import 管理からコンテナのインポートを選び、上のサイトで得られるファイルをbenri.jsonみたいに名前をつけて保存し、インポートするだけ。 import2コンテナのインポートを選ぶと上のような画面になるので、インポートするファイルを選び、上書きしましょう。(既存の設定を上書きするのは怖いので、新しい環境で試すのをおすすめします。)

import3

Phone Callsとか最初から入ってるようになります!便利・・・!import5

Youtubeのイベントもバッチリ。

import4404 Pagesのイベントも取得できちゃいます。

以上、タグマネージャの基本的な使い方から、応用チュートリアルまでを説明させていただきます。お役に立てれば光栄です。 参考記事:GoogleTagManager使いこなしたら相当エラいことになる(仮称ミニコモvol.2)


さあ、KOBITをスタートしよう。