ページのどこがよくクリックされているのか、確認するのはサイトを改善を図る上でも重要なことです。
今回、そのイベントトラッキングをGoogleタグマネージャで手軽に実装する方法をご紹介します。
告知：スクロール計測の新しい手順作成しました！
[kanren postid="3632"]
全部自動で取得する自動イベントトラッキング方法はこちらをご覧ください。
2m3g1.com/1350.html
目次（ページ内リンク）
なぜ、クリック計測が必要なの？
Googleアナリティクスの基本タグをページに埋め込んだだけでは、どの箇所がクリックされたのかを計測することはできません。別途、リンクやボタンに１つずつイベントトラッキングと呼ばれる専用のタグを埋め込んで計測する必要があります。
これによって、どこのページでどのリンクがよくクリックされているのか計測することができます。
※今回は、やや手動で、より正確に、より確実に取得する方法をご紹介します。
はじめに、ＧＡとＧＴＭとは？
[pb]Googleアナリティクス（ＧＡ） ・・・ アクセス数を計測するツールです。
Googleタグマネージャ（ＧＴＭ） ・・・ 設置がこまごまとしたGAタグを手軽に管理するツールです。[/pb]
どのように計測されるのか？
GAでは、クリックイベントを「カテゴリ」「アクション」「ラベル」という３つの変数で取得します。
カテゴリ、アクション、ラベルと意味のある名称がつけられていますが、その意味は特に気にする必要はなく、ざっくりと「大中小」の変数という認識でよいと思います。
・カテゴリ ・・・ 大項目
・アクション ・・・ 中項目
・ラベル ・・・ 小項目
今回は、それぞれに以下のデータを格納します。
[pb]・カテゴリ ・・・ リンククリック (固定のテキスト)
・アクション ・・・ イベント発生ページURL（動的なURL）
・ラベル ・・・ リンク位置_リンク名（動的な名称）[/pb]
別記事で紹介している自動イベントトラッキングでは、「リンク位置_リンク名」の命名を自動で行うため、やや動作が不安定なのと、命名ルールを上手くコントロールできないので集計の手間がかかります。
前提条件
Googleアナリティクスはアカウントを取得して、すでに計測している、またはできる状態
Googleタグマネージャのアカウントを取得済みで、タグを発行している状態
タグの埋め込みとツールの設定
クリックタグ計測の設定は、３つのステップです。
１．HTMLにタグを埋め込む
２．GTMを設定する
３．GAで計測確認する
ちなみに、現在のタグ設置状況は、Google Chromeブラウザのエクステンションにて確認することができます。
そのページにGAやGTMが埋め込まれているか確認できるエクステンション
Chrome Web Store - Tag Assistant (by Google)
chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefkGAデバッグツールで、chromeコンソールにGAの情報を表示するエクステンション
Chrome Web Store - Google Analytics Debugger
chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna
１．HTMLにタグを埋め込む
クリックを計測する場所を決めます。
クリック計測する場所に、タグを埋め込みます。
Aタグにクリックしたら、イベントが発動するようにします。
追加前：<a href="#">テキストリンク</a>
追加後：<a href="#" onclick="gce('ヘッダー_ボタン1');">テキストリンク</a>
「onclick="gce('ヘッダー_ボタン1');"」を追加します。
「ヘッダー_ボタン1」はページでユニークな文字列を入れます。
イベントラベルはエクセルで管理すると簡単です。
参考まで、Excelを添付します。
GoogleAnalytics_EventTrackingSeet
１．５ GAプロパティを確認
設定の前に、既存のGoogleアナリティクスのプロパティにて、以下の項目を確認します。
・標準GAか、ユニバーサルアナリティクスか
・トラッキングID（UA-XXXXXX-X）
２．GTMを設定する
２－１．イベントトラッキング用関数のタグを作成する。
このタグにより、Aタグをクリックすると、イベント発動とデータレイヤー変数にクリック箇所とリンク名を格納する関数を作成します。
すべてのページで動作するように作成します。
<script>
function gce(EventLabel) {
dataLayer.push({'event':'gtmClickEvent', 'EventLabel':EventLabel});
}
</script>
「document.writeをサポートする」にチェックを付けます。
２－２．マクロを作成します。
データレイヤー変数に格納したイベントラベルを取得するマクロです。
マクロタイプ：データレイヤー変数
変数名：EventLabel
２－３．ルールを作成します。
HTML上で、イベントが発動したら、GTMタグが動作するルールを作成します。
２－４．イベントトラッキングタグを作成します。
上記のルールにて発動するGAイベント発行用のタグを作成します。
３．GAで計測確認する
３－１．GA Debuggerにて、イベント発動を確認
GTMの設定が完了したら、動作を確認します。
GA DebuggerをONにします。
GTMをデバッグモードにします（ドラフトコンテナ＞サマリー＞プレビュー＞デバッグ）
該当のページを開いて、GTMが動作していることを確認します。
リンクをクリックして、イベントが飛んだことを確認します。
３－２．リアルタイム計測で、イベント計測を確認
イベントが飛んだことが確認したら、GAで計測されていることを確認します。
Googleアナリティクスのレポートを表示します。
「リアルタイム＞イベント」レポートにて、イベントが計測されていれば完了です。
※GTMがデバッグモードで検証した場合は、バージョン作成→公開を行って、GTMを実際に動作させることを忘れないでください。
あとは1週間ほど計測機関をとって、どのリンクがクリックされているか確認してみてください。
なお、Googleアナリティクスで分析するには、アクセス解析に関する基礎知識が必要です。その点は書籍でいち早く勉強してくださいね。
オススメはこの３冊
SBクリエイティブ
売り上げランキング: 29,265
インプレスジャパン
売り上げランキング: 6,668
ソフトバンククリエイティブ
売り上げランキング: 33,619