GTM×カスタムデータ属性で、特定の要素のクリックをGAに記録する方法
こんにちは。
岐阜でWebマーケやっていますYoshi（@motoy0shi）です。
最近お仕事でGoogleアナリティクス（以下GA）を使ったデータ計測の設定をする機会が多くあります。特に、ページ内の特定のボタンがクリックされたかどうかを判定して、GAにイベントを発火させる設定は頻出です。
一般的にそういった要素のクリックを測定するには、要素のidやclassなどを使うことが多いです。ただし、要件によってはidやclassを使った方法だと、設定が難しいケースがあります。
そこで利用したのが、該当の要素にカスタムデータ属性を埋め込んで、GTMを使って検出する方法です。これならイベントを確実に取れるばかりか、デザインの変更にも強い設計となります。
あまりWeb上に情報がなかったので、備忘録として方法を記事にまとめておきます。GTMで解析設計する際などに使ってみてください。
カスタムデータ属性とは？
本題に入る前に、カスタムデータ属性について知らない方もいるかと思うので、簡単にご紹介します。
カスタムデータ属性とは、HTMLタグの中に付与できるオリジナルの属性です。属性名の先頭に、「data-」をつけることで、任意な値をタグに持たせられます。
<div data-sample = "hogehoge">カスタムデータ属性の利用例</div>カスタムデータ属性は、読者には見えませんが、プログラムからアクセスできるため、いろいろな場面で利用できます。
従来の方法との違い
Google Tag Manager（以下、GTM）を利用して要素のクリックを検出する場合、大きく以下の２パターンがあります。
【方法１】要素のidやclassなどを利用する
<a class="btn"></a>一番使われているのが、この方法です。要素（aタグなど）のclass名やid名を手がかり、要素を特定してトリガーを設定します。
メリット
・ソースコードを触らなくても、GTMの設定ができる
・比較的実装が簡単（早ければ数分でできる）
デメリット
・要素を特定できるclass、idがついている必要がある
・そもそもidやclassはデザインで利用する属性のため、勝手に書き換えられてタグが発火しなくなることがある
特に最近増えているSPA（シングル・ページ・アプリケーション）では、属性が動的に付与されるため、手がかりとなるclassが特定できないこともあります。
その場合、力技で要素のCSSセレクタを利用する手もありますが、ちょっとした構造変更で動かなくなるリスクがあるため、心許ないですね。
【方法２】dataLayerにカスタムイベントを送る
ちょっとGTMに詳しい方などは、GTMにカスタムイベントを送ってタグを白化させる仕様を考えられると思います。具体的には、クリックを検出したいタグに以下のような記述を行う方法です。
<a onclick="dataLayer.push({'event' : 'sampleEvent'});">dataLayerを利用する方法</a>この方法にも同様にメリット、デメリットがあります。
メリット
・基本的にどんな要素でも測定可能
・コードを埋め込むので、変更に強い設計になる
デメリット
・ソースコードに埋め込みが必要で、若干手間がかかる
・JavaScriptの知識が必要 & ソースコードが若干複雑化する
このようにそれぞれメリット、デメリットがあるため、その折衷案としてよいなと思っているのが、カスタムデータ属性を使った方法です。この方法なら、以下のメリットがあります。
メリット
①クリックの取得なら、基本的にどんな要素でも測定可能
②デザインと解析で仕様を分離できるため、保守管理性が向上
③JavaScriptの知識は不要
④ソースコードに軽微な修正をすれば実装がすぐできる
特に、②のデザインと解析で仕様を分離できるのは大きな利点だと感じています。デザインで使うclassやidと別に、解析専用としてカスタムデータ属性を埋め込むため、それぞれの設定が干渉する心配もありません。
デメリットとしては、ソースコードに軽微な修正が必要なので、制作パートナーさんの力を借りるか、自分でソースコードを触る必要があります。そこさえクリアできれば、結構オススメです。
実装方法
では具体的にどのように実装したらよいか解説していきます。今回は例として、上記のボタンを測定する設定をご紹介します。
①カスタムデータ属性の仕様を決める
まずは解析設計の仕様を決めましょう。仕様と言っても、属性の名前を決めるだけです。
data-から始めまればどんな名前でも構いませんが、今回は「data-gtm-click」という名前にします。
②クリックを測定したいタグに埋め込む
次は測定したいタグに先ほどのカスタムデータ属性と値を埋め込みます。今回の例だと、aタグにカスタムデータ属性「cta-button」をつけます。
<a href="****" data-gtm-click="cta-button">資料ダウンロード</a>なお実務では、間違えるといろいろと面倒なので、スプレッドシートなどに表でまとめて、制作パートナーさんにお渡しすることをオススメします。
③GTMの変数で「自動イベント変数」を作成
カスタムデータ属性の埋め込みが終わったら、いよいよGTM側の設定です。設定を行いたいコンテナを開き、「変数」→「ユーザー定義変数」→「新規」をクリックします。
「変数タイプを選択」のリストの中から「自動イベント変数」を選択します。「変数タイプ」のドロップボックスを開いて、「要素の属性」をクリック。そのあと出てきた「属性名」にカスタムデータ属性（今回だと、data-gtm-click）を入力します。
ここまでできたら「保存」をクリックして、変数の作成は完了です。
④トリガーに設定する
次にトリガーを作ります。
トリガーにタイプは、「クリック-リンクのみ」もしくは「クリック-すべての要素」を選んでください。今回は「クリック-リンクのみ」で問題ありません。
次に「このトリガーの発生場所」で「一部のリンククリック」を選びます。すると入力欄が出てくるので、それぞれ記入します。
変数名：data-gtm-click（作成した自動イベント変数）
一致条件：等しいなど
条件：cta-button（タグに埋め込んだ値）
ここまでできたら「保存」します。
⑤GAのイベントタグを作成する
あとは適当にGAのタグをつくって、先ほど作ったトリガーを指定すれば、GAのイベントで特定のボタンクリックを取れるようになります。
おわりに
この記事では、カスタムデータ属性を使って特定のボタンのクリックをGAで記録する方法を紹介しました。
カスタムデータ属性を使えば、デザインなどの制作側とぶつかることなく、GTMを使った解析設計を行うことができます。これなら「いつの間にかデザイン変更があって、データが取れていなかった…」なんて事態も避けられるかもしれません。
ぜひご自身の業務でチャンスがあれば、活用してみてください。
******************************************
最後までお読みいただき、ありがとうございました。
ご感想やご意見などがあれば、ぜひTwitterなどでお寄せください。
→https://twitter.com/motoy0shi
この記事が気に入ったらサポートをしてみませんか？