【自動イベントトラッキング手順】GTMでバナーのクリック回数を簡単に取る方法

とあるサイトでGoogleタグマネージャを利用して、バナーやテキストリンクのクリック回数を計測する機会がありましたので、その方法をご紹介します。

告知：スクロール計測の新しい手順作成しました！

[kanren postid="3632"]

これをすると何を計測できるか

ボタンやテキストリンクに、Class名を付けておくことで、その箇所のクリック回数をカウントできます。

メリット

設置がカンタン。
・GTMタグ１つ設定して、
・ボタンやリンクにクラス名を付けるだけ。
（可能ならば個別のクラス名を付けておくことをオススメ）

イベントトラッキングの長いスクリプトを記述することなく、また、onclick属性も不要です。

Googleアナリティクスでどんなふうに見えるか

レポートの「上位のイベント」で確認することができます。
また、リアルタイムレポートなら、「イベント」から今クリックされた回数表示されます。
なお、計測は3階層構造になっており、「カテゴリ」＞「アクション」＞「ラベル」で表示されます。

今回はそれぞれ以下のように設定しています。

「カテゴリ」	記事下_ECサイトクリック（クリック箇所の名称）
「アクション」	クリックが発生したページのURL
「ラベル」	クリックしたバナー・リンクのクラス名

カテゴリ（Googleアナリティクスの画面）

アクション・ラベル（Googleアナリティクスの画面）

手順

１．GTMアカウントの取得＆タグ設置

GTMアカウント作成→タグの発行→サイトの全ページに設置
※一般的な方法です。ヘルプの方が詳しく解説しています。

２．ソースにClassを指定

今回は、以下のような形で個別のクラス名を付けています。
すでに個別のクラス名がついていればそのまま可能です。

バナー名/th>	クラス名
オリンパス	online_store_olympus
パナソニック	online_store_lumix
フジフィルム	online_store_olympus
ソニー	online_store_sony

３．GTMの３つの設定

GTMのアカウントを作成したら、コンテナを作成して設定をしていきます。
やや用語がややこしいですが、この関係を理解しておけば、今回の設定は、おおよそ問題なしです。

アカウント＞コンテナ＞タグ＞ルール＞マクロ

上は、大まかにこのような構成になっています。
ログインID＞サイトグループ＞計測タグ＞発動条件＞条件に使う変数・関数

３－１．GTMの設定（リスナータグ作成）

まず、リンククリックリスナータグを作ります。これは、ページ上のすべてのクリックを監視するタグです。
あるサイトの設定を例に紹介します。

新規タグ作成で以下の形で設定します。

配信ルールの「すべてのページ」はこのように設定しています。
配信ルールは、クリックが設置してあるページだけでもかまいません。

３－２．GTMの設定（発動ルール作成）

続いて、リスナータグが発見したクリックを、特定の条件のときにタグ発動がするようにルールを作成します。
以下のような形で設定します。

新規ルールの作成でルールを作成します。

条件は、gtm.linkClickはクリックが見つかったとき、そのクリック要素のクラス名が「online_store_」前方一致の場合に発動するように設定しています。
※クラス名の部分は、各バナーやテキストリンク名に対して変更してください。

３－３．GTMの設定（イベントタグ作成）

次に、さきほど作成したルール（３－２）で発動するイベントタグを作ります。

トラッキングタイプをイベントにして今回は以下のように設定しています。

カテゴリ：位置の名前
操作：クリックが発生したページＵＲＬ{{url}}
ラベル：クリックした箇所のクラス名{{element classes}}

「{{url}}」「{{element classes}}」はマクロと呼ばれるものです。
変数や関数のようなもので、該当する値を自動で取得してくれます。
最近GTMアカウントを作られた方は、初期状態で上記のマクロがあるので選択してください。
過去にGTMアカウントを作られた方は、自分で作成する必要があります。難しくはないのでここでは割愛します。