Googleタグマネージャーでアナリティクスのイベント設定してみた

Googleタグマネージャー(GTM)を使うとクリックイベントなどを簡単に計測できます。

本来でしたら計測したいところにタグを仕込む必要がありますが、計測する場所が増えてくると、管理が大変でもう分けわからなくなります。

ソースも見づらくなるので、タグマネージャーで全部管理するのをオススメします。

data属性に設定した値をクリックで計測

今回設定する内容はこちら。

• アナリティクスのイベントでクリックを計測
• 指定のdata属性をクリックした場合に反応
• data属性の値を計測

変数を設定

変数では何回も使う可能性がある値を保存しておくことができます。

GoogleアナリティクスのIDと利用するdata属性を変数に設定します。

Googleアナリティクスの設定

変数の名前を「GA_ID」とし、トラッキングIDにGoogleアナリティクスのIDを入力して保存します。

data属性の設定

次にdata属性用の設定です。

data属性はdata-gtm-clickとします。

同じように変数名を設定し、変数タイプと属性名を設定します。

• 変数のタイプ → 自動イベント変数
• 変数タイプ → 要素の属性
• 属性名 → data-dtm-click

タグの設定

タグではクリックイベントの設定をします。

名前を入れ、タグの種類、トラッキングタイプ、カテゴリ、アクション、ラベル、Googleアナリティクス設定をそれぞれ設定します。

• タグの種類 → Google アナリティクス - ユニバーサル アナリティクス
• トラッキングタイプ → イベント
• カテゴリ → カテゴリ名（アナリティクスに表示されます）
• アクション → アクション名（アナリティクスに表示されます）
• ラベル → data属性に設定した変数と取得したいテキストを設定。{{data-dtm-click}} {{Click Text}}
• Googleアナリティクス設定 → アナリティクスのIDで設定した変数を設定。 {{GA_ID}}

トリガーの設定

名前、トリガーのタイプ、トリガーの発生場所を設定します。

トリガーのタイプは今回aタグのリンクなので「リンクのみ」と設定していますが、他のタグのクリックを計測したい場合は「すべての要素」とします。

ここを間違えるとクリックイベントが計測されませんので注意してください。

僕はここの「リンクのみ、すべての要素」を間違えてなかなか計測できませんでした。

今回クリックの計測場所を設定したdata属性が入っているタグに限定したいので、「一部のリンククリック」を選択して、「Click Element、CSS セレクタに一致する、[data-gtm-click]でトリガーを設定します。

• トリガータイプ → クリック - リンクのみ
• トリガーの発生場所 → 一部のリンククリック
• Click Element - CSS セレクタに一致する - [data-gtm-click]

htmlの設定

アナリティクスの読み込みもGoogleタグマネージャーを利用すると良いでしょう。

設定ができていれば、以下のタグを入れればクリックが計測できるようになります。

<a data-gtm-click=”値”>リンク</a>

アナリティクスのイベントでチェックしてみてください。