こんにちは、NAEです。
ブログのカスタマイズで入れたお便利ボタン、渾身の記事に貼ったアフィリエイトのリンク、記事下に羅列した関連記事のリンク・・・
実際どれくらい使われてますかね？
こうするといいよ、という耳より情報にのっかって入れてはみたものの、きちんと効果測定せずにほったらかしてませんか？
もしくは、何か効果があったとして、その要因がきちんと分析できていますか？
そのお手伝いをするツールが、GTM（Google Tag Manager）です。
つい最近このブログにも導入し、その凄さを実感しています。紹介したいと思います。
今回はそんなお話。
- GTM（Google Tag Manager）とは
- GTMを使うと結局なにが嬉しいの？
- GTMの導入からGAで分析する方法
- クリックされているか気になるパーツがあったらGTMを入れてみよう
- まとめ：手探りの改善から脱却し、数字に基づく仮説・検証を回そう
GTM（Google Tag Manager）とは
Google Tag Managerとは、Webページ上でのユーザの動きを検知するためのツールです。
GTMを使うと、Webページ上にあるボタンやリンク等のパーツにセンサーのようなものを埋めこむことができます。
そのセンサーによって、Webページが表示された後にユーザがどのような動きをしたのかをつぶさに測定することができます。
たとえば、
- ボタンがクリックされた
- URLへのリンクがクリックされた
- 画像がクリックされた
など、クリック系のものをはじめ、多くの動きを検知可能です。
このような「イベント」を検知するセンサーを「Tag」と呼んでいます。
Tagの実体はユーザの動きをトラッキングするための短いJavaScriptコードです。
これまでは、Webページの中のトラッキングしたい箇所（リンク等）にTagを手動で埋め込む必要がありました。
しかしGTMを使うと、Webページ側に手を入れることなくTagを自動で埋め込むことができるようになります。
具体的には、CSSのセレクタやリンク先のドメインなど、さまざまな条件を使ってTagの埋め込み先を指定することができます。
つまり、Google Tag Managerは
- Tagをどこに埋めこむか
- どのような「イベント」を検知させるか
- 検知したイベントをどこに知らせるか
を一括管理できる便利なシステムなんです。
GTMを使うと結局なにが嬉しいの？
そんなGTMは、Google Analytics（GA）を組み合わせるとものすごい力を発揮します。
ざっくり言うと、
- GTMによりWebサイトにセンサー（Tag）を埋め込み
- センサー（Tag）がユーザの動きを捉えてGAへ送り
- GAで様々な角度から柔軟に分析する
といった感じです。
といってもイメージが湧きにくいと思うので、実物を見てみましょう。
つい先日、本ブログにGTMを導入し、GAと連携させました。ブログのパーツごとのクリック数をトラッキングしています。そのレポートがこちら。
パーツごとにクリック数が取られていることがおわかりでしょうか。（パーツの名称は自分でつけることができます）
このようなデータから、
- category-list（記事下のカテゴリ一覧）やglobal-menu（タイトル下のグローバルメニュー）は意外とクリックされている
- af-link-text（アフィリエイトのテキストリンク）やmoshimo（もしもアフィリエイトのリンク）はもうちょっと頑張らないとな
なんていうことが、数字で定量的に把握することができるのです。
単なるパーツごとのクリック数にとどまらず、ページ別の分析だってできてしまいます。
すると
- Google Pixelの感想記事はよくSNSシェアされている
- 無限ピーマンの記事はアフィリエイトリンクがクリックされている
- PC環境晒しの記事はもしもの商品紹介リンクが踏まれやすい
なんてことが、すべて数字でわかってしまうのです。
おそらく、おおくのブロガーさんはこれまで経験則をベースにデザインやリンクの配置を調整してきたかと思います。
しかし、GTMとGAの組み合わせによって定量データに基づく仮説・検証サイクルを回すことが可能になるのです。
ドヤァ
おめーな、これWebやアプリ業界ではやって当たり前のことだぞ。グロースハックのキホンのキだろーがよ
ドヤァ・・・
GTMの導入からGAで分析する方法
では実際にGTMを導入し、GAで分析するまでの手順をご紹介します。
ここでは話を簡単にするため、
ブログ記事に埋め込んだアフィリエイトリンクがどれだけクリックされているか
を測定してみようと思います。
アフィリエイトリンク側の準備
まず事前準備として、GTMが自動的にTagを入れ込む先を識別できるための仕込みをしておきます。
ここでは例として、アフィリエイトリンクにafilinkというクラスを追加しておきましょう。
<a class="afilink" herf="https://XXX">アフィ</a>
GTMに登録する
次にGoogle Tag Managerにアカウントを登録するのですが、詳しい手順はこちらのサイトに載っていますので、ここでは割愛します。
GTMのコードをhead要素に追加するのをお忘れなく！
登録できましたか？ダッシュボード、出てきました？
ではさっそく、GTM側の設定をやってみたいと思います。
GTM側でタグ、トリガーを設定する
いきなり新しい言葉が出てきましたね。ざっくり言うと
- タグ：先程まで出てきていたTagのこと。Google Analyticsへ送信するデータの内容を定義する
- トリガー：タグがGoogle Analyticsへデータを送信するための条件を指定する
ということ。
今回の場合は
- 「afilink」というクラスを持ったURLがクリックされたとき
- 「afilinkがクリックされたよ、ちなみにURLはこれだよ」という情報をGAに送る
というたてつけでやってみたいと思います。
タグを定義する
はじめに、データを発射する実体であるタグを定義します。
GTMのダッシュボード画面で新しいタグを作るを選択。
タグとトリガー、両方出てきますが、ここはタグを先に作ります。上部分をクリック。
データをどこに発射するかを選択する画面が出てきます。「ユニバーサルアナリティクス（Google Analytics）」を選びます。「従来のアナリティクス」は古いバージョンのGoogle Analyticsのようです。
次のように入力して保存します。
- トラッキングID：Google AnalyticsのID（UAからはじまるやつ）
- トラッキングタイプ：イベント
- カテゴリ：afilink
- アクション：click
- ラベル：{{Click URL}}
- 値：1
以上でタグの設定は完了です。これによって
- UA-XXXというIDを持ったGoogle Analyticsアカウントに対し、「イベント」という種類のデータを飛ばす。
- データの内容は以下のとおり
- カテゴリ：afilink
- アクション：click
- ラベル：実際にクリックされたURLの文字列
- 値：1
というタグができあがりました。弾込め完了です。
カテゴリ、アクション、ラベル、値は自由に指定できます。細かなドキュメントはこちらをどうぞ。
イベント トラッキング | ウェブ向けアナリティクス（analytics.js） | Google Developers
トリガーを定義する
さて、弾込めが済んだのであとは引き金を引く準備をしましょう。トリガーの定義です。
タグの定義を保存したら、下に現れる「トリガーの設定」を選択します。
トリガーのタイプは「クリック→リンクのみ」を選択。
トリガーの発生場所に「一部のリンククリック」を選択。
そのうえで、
- Click Element
- CSSセレクタに一致する
- .afilink
と入力していきます。
この設定は
- URLリンクをクリックしたらデータ送信するよ
- ただし「afilink」というクラスを持っている場合だけね
という意味を持っています。
ここにきて、最初にアフィリエイトリンクにafilinkというクラスを付与したことが活きてくるわけです。
関係ないURLがクリックされたときにも「アフィリンク踏んだぜ」と知らされても困りますもんね。
プレビューモードで動作テストする
さて、タグとトリガーを保存できたなら残りはあと少し。動作テストをして、ちゃんと動けばOKです。
GTMのダッシュボードの右上に「公開」というボタンがありますね。
クリックすると「プレビュー」というものがあるので、押してみます。
するとこんなバーが現れます。プレビュー中ですよ、とのことなのですが・・・
プレビュー中の状態でGTMを仕込んだWebサイトを開いてみましょう。
下半分にこんなものが表示されます。意図したトリガーが起動するかがチェックできるデバッグ用のウィジェットです。（自分にしか出てこないので安心してください！）
その状態でトリガーを仕込んだリンク（afilink）をクリックしてみて、実際にトリガーが引かれ、タグが発動されることを確認します。
「Tags Fired on This Page」に自分が追加したタグ名が出てくれば成功です。
出てこない場合、ウィジェット内でタグ名の書かれたカードをクリックすると、具体的にどの条件がマズっているかがわかるようになっています。
×がついている部分を参考に、GTM上でトリガーの定義を見なおしてみましょう。
成功している場合、Google Analyticsの「リアルタイム→イベント」にタグに指定した文字列とともにデータが飛んできているはずです。
公開し、座して待つ
動作テストが済んだらいよいよ本番への展開です。GTMでは「公開する」と呼ぶそうですね。
ダッシュボードで「プレビューモードを終了」した後・・・
右上の「公開」から「公開」をクリック。
バージョン名やらなにやら入力する欄が出てきます
（画面割愛）
適当に入力してOKを押せば完了です。
これで、アフィリンクが踏まれるたびにGoogle Analyticsにデータが飛ぶようになりました。
ある程度データがたまったら、Google Analyticsの「行動→イベント」で分析をしてみましょう。
お疲れさまでした！
クリックされているか気になるパーツがあったらGTMを入れてみよう
以上の手順を気になるパーツごとに設定すれば、Webページのあらゆるパーツのクリック回数を把握することができます。
これにより、
- 使われていないボタンや意味のないアフィリンクをあぶり出す
- よく利用されているものからその要因を探り、他に活かす
- デザインの変更に伴う反応の変化を測定し、改善につなげる
ということができるようになります。
参考までに、本記事執筆時点で本ブログにはこのようなトリガーを仕込んでおります。みなさんのクリック、GAで見てますよ！
まとめ：手探りの改善から脱却し、数字に基づく仮説・検証を回そう
というわけで、Google Tag ManagerとGoogle Analyticsを使ったクリックトラッキング手順をお送りしました。
KKD（勘と経験と度胸）のみでWebサイトやブログのデザインをいじっている方、「なんとなく手探り」から、数字に基づく仮説検証サイクルを回すステージへと登ってみませんか？
以上、ブログで身につくスキルのひとつ、「グロースハック」の基本のき、でした。