同一ページ内に同一リンク先のリンクが複数ある場合のGoogleタグマネージャでの設定のコツ

先日公開したコラム「Googleアナリティクスで「ページ内でどのリンクがクリックされたか」を計測するための主要手法まとめ」で、同一ページ内で同一リンク先が複数存在する場合の設定方法を紹介した。

Googleタグマネージャを使用している場合はイベントトラッキングでの取得がお勧めとなるが、その場合、リンク先の判別を行うためにはGoogleタグマネージャだけでなく、HTMLの記述も必要になる。

まずはHTMLに追記

(1)クリック数を取得したい一つ目のリンクの⟨a⟩タグ内に「id属性」を追記する

⟨a href="sample01.html⟩
↓
⟨a href="sample01.html" id="banner_X"⟩

(2)二つ目のリンクにもid属性を追記する

⟨a href="sample02.html⟩
↓
⟨a href="sample02.html" id="banner_Y"⟩

(3)三つ目以降のリンクにも値（banner_*の部分）が別々になるようにして追記する

(4)追記が完了したら、本番サーバに予めアップロードして公開して構わない

※ここで追記するid属性には現時点では意味がなく、表示や機能には関係しないため、Googleタグマネージャの設定前にアップロードして構わない
※制作担当者・制作会社に、他の目的で使用しているid属性と重複しないように相談して値を決める
※別のid属性が入っている場合も、制作担当者・制作会社に確認する

Googleタグマネージャの設定

変数の設定

「組み込み変数」内の「Click ID」がオンになっていない場合はオンにする

トリガーの設定

バナーXのイベントトラッキングを計測するための条件を記述し、トリガーを作成する

• Click ID：等しい：banner_X

リンク元が複数の場合はトリガーを複製し、id属性の値を変更しながら作成していく

タグの設定

タグの設定を行い、作成したトリガーを紐づける

• トラッキングタイプ：イベント
• カテゴリ：/sample/a.html
• アクション：/product/top.html
• ラベル：banner_X

リンク先の数だけタグを作り、対応するトリガーを紐づける

プレビューモードで確認しながら実際にクリックし、イベントトラッキングがカウントされているかをGoogleアナリティクスのリアルタイムレポートで確認する
※この時点でid属性の追記されたHTMLがサーバにアップロードされていないとカウントされない

問題なければバージョンを作成し、公開する

まとめ

HTMLの中で各リンクの目印＝id属性がしっかり記述されているとタグマネージャを使ったイベントトラッキングの設定が比較的容易に行えるようになる。

今後のWeb運用の中で、イベントトラッキングを使ったクリック計測を頻繁に行いたい場合は、予めid属性を付けておくよう制作担当・制作会社に可能であれば依頼しておきたい。