【クリック計測】Googleタグマネージャで、効率的なイベントトラッキング実装ステップ

なぜ、クリック計測が必要なの?

ページのどこがよくクリックされているのか、確認するのはサイトを改善を図る上でも重要なことです。

Googleアナリティクスの基本タグをページに埋め込んだだけでは、どの箇所がクリックされたのかを計測することはできません。別途、リンクやボタンに1つずつイベントトラッキングと呼ばれる専用のタグを埋め込んで計測する必要があります。

今回、そのイベントトラッキングをGoogleタグマネージャで手軽に実装する方法をご紹介します。

screenshot.534

これによって、どこのページでどのリンクがよくクリックされているのか計測することができます。

全部自動で取得する自動イベントトラッキング方法はこちらをご覧ください。
2m3g1.com/1350.html

※今回は、やや手動で、より正確に、より確実に取得する方法をご紹介します。

はじめに、GAとGTMとは?

Googleアナリティクス(GA) ・・・ アクセス数を計測するツールです。
Googleタグマネージャ(GTM) ・・・ 設置がこまごまとしたGAタグを手軽に管理するツールです。

どのように計測されるのか?

GAでは、クリックイベントを「カテゴリ」「アクション」「ラベル」という3つの変数で取得します。
カテゴリ、アクション、ラベルと意味のある名称がつけられていますが、その意味は特に気にする必要はなく、ざっくりと「大中小」の変数という認識でよいと思います。

・カテゴリ ・・・ 大項目
・アクション ・・・ 中項目
・ラベル ・・・ 小項目

今回は、それぞれに以下のデータを格納します。

・カテゴリ ・・・ リンククリック (固定のテキスト)
・アクション ・・・ イベント発生ページURL(動的なURL)
・ラベル ・・・ リンク位置_リンク名(動的な名称)

別記事で紹介している自動イベントトラッキングでは、「リンク位置_リンク名」の命名を自動で行うため、やや動作が不安定なのと、命名ルールを上手くコントロールできないので集計の手間がかかります。

前提条件

Googleアナリティクスはアカウントを取得して、すでに計測している、またはできる状態
Googleタグマネージャのアカウントを取得済みで、タグを発行している状態

タグの埋め込みとツールの設定

クリックタグ計測の設定は、3つのステップです。


1.HTMLにタグを埋め込む
2.GTMを設定する
3.GAで計測確認する

ちなみに、現在のタグ設置状況は、Google Chromeブラウザのエクステンションにて確認することができます。

そのページにGAやGTMが埋め込まれているか確認できるエクステンション
Chrome Web Store – Tag Assistant (by Google)
chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk

GAデバッグツールで、chromeコンソールにGAの情報を表示するエクステンション
Chrome Web Store – Google Analytics Debugger
chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna

1.HTMLにタグを埋め込む

クリックを計測する場所を決めます。

クリック計測する場所に、タグを埋め込みます。
Aタグにクリックしたら、イベントが発動するようにします。

「onclick=”gce(‘ヘッダー_ボタン1’);”」を追加します。

「ヘッダー_ボタン1」はページでユニークな文字列を入れます。

イベントラベルはエクセルで管理すると簡単です。
参考まで、Excelを添付します。

GoogleAnalytics_EventTrackingSeet

1.5 GAプロパティを確認

設定の前に、既存のGoogleアナリティクスのプロパティにて、以下の項目を確認します。

・標準GAか、ユニバーサルアナリティクスか
・トラッキングID(UA-XXXXXX-X)

2.GTMを設定する

2-1.イベントトラッキング用関数のタグを作成する。

このタグにより、Aタグをクリックすると、イベント発動とデータレイヤー変数にクリック箇所とリンク名を格納する関数を作成します。

すべてのページで動作するように作成します。

screenshot.525

「document.writeをサポートする」にチェックを付けます。

screenshot.526

2-2.マクロを作成します。

データレイヤー変数に格納したイベントラベルを取得するマクロです。

マクロタイプ:データレイヤー変数
変数名:EventLabel

screenshot.527

2-3.ルールを作成します。

HTML上で、イベントが発動したら、GTMタグが動作するルールを作成します。

screenshot.528

2-4.イベントトラッキングタグを作成します。

上記のルールにて発動するGAイベント発行用のタグを作成します。

fefaefegeat

3.GAで計測確認する

3-1.GA Debuggerにて、イベント発動を確認

GTMの設定が完了したら、動作を確認します。

GA DebuggerをONにします。
GTMをデバッグモードにします(ドラフトコンテナ>サマリー>プレビュー>デバッグ)

screenshot.531

該当のページを開いて、GTMが動作していることを確認します。
リンクをクリックして、イベントが飛んだことを確認します。

testw1

3-2.リアルタイム計測で、イベント計測を確認

イベントが飛んだことが確認したら、GAで計測されていることを確認します。
Googleアナリティクスのレポートを表示します。
「リアルタイム>イベント」レポートにて、イベントが計測されていれば完了です。

fedsfewaf dfajoeafefa

※GTMがデバッグモードで検証した場合は、バージョン作成→公開を行って、GTMを実際に動作させることを忘れないでください。

あとは1週間ほど計測機関をとって、どのリンクがクリックされているか確認してみてください。

なお、Googleアナリティクスで分析するには、アクセス解析に関する基礎知識が必要です。その点は書籍でいち早く勉強してくださいね。

オススメはこの3冊

Google Analyticsパーフェクトガイド 増補改訂版 Ver.5/ユニバーサルアナリティクス対応
山浦 直宏
SBクリエイティブ
売り上げランキング: 29,265
入門 ウェブ分析論 ―― アクセス解析を成果につなげるための新・基礎知識 増補改訂版
小川 卓
ソフトバンククリエイティブ
売り上げランキング: 33,619