テック・ガジェット・写真とか

GTMでクリック計測にカスタムデータ属性を使う方法

AD

LPなんかでページ内に複数のボタンが設置されている場合に、どこのボタンが押されたかを計測したい場合があると思うが、それをGTM（Googleタグマネージャ）とHTML5から使えるようになったカスタムデータ属性を使って計測する方法をちょいとまとめてみた。

なお、予めGA4とGTMの基本設定は済ませていてGTMの測定タグを作成している前提の話となるので、まだ設定していない人は下記記事を参照してもらえれば。

参照 GA4でGTMの設定をする方法。新規作成のやり方も

カスタムデータ属性とは？

カスタムデータ属性はHTML5から使えるようになった属性で、タグの要素の中に下記のように「data-」の後に「xxx-xxx」のように自分の好きな属性名を設定でき、値も「お問い合わせボタン」のように設定できる。

Copy
data-xxx-xxx="お問い合わせボタン"

例えば、下記サンプルのようにボタンを2つ用意し、それぞれのボタン名を属性値に記述。このように設定してGTMで設定することで、Google Analytics（GA4、UA）のイベントに「お問い合わせボタン」、「ダウンロードボタン」と記録されるので、どのボタンがクリックされたのかの確認がアナリティクスのイベントで簡単にできるようになる。

Copy
<a href="https://hep.eiz.jp/" data-clcik-sns="お問い合わせボタン">お問い合わせ</a>
<a href="https://hep.eiz.jp/" data-clcik-sns="ダウンロードボタン">ダウンロード</a>

GTMでクリック数測定の設定方法

組み込み変数の追加

手始めに組み込み変数　の「Click Element」を追加する作業。

サイドバーの変数をクリックして、組み込み変数の設定をクリック。

GTMの組み込み変数の設定をクリック

「クリック」欄にあるClick Elementを選択。

GTMのClick Elementを選択

自動イベント変数の追加

今度は、ユーザー定義変数の「自動イベント変数」を追加する作業。

まずは左サイドメニューの変数、ユーザー定義変数の新規をクリック。

GTMのユーザー定義変数の新規作成

①変数名をサンプルのように「Click SNS Value」と入力し、②変数の設定欄をクリック、表示されたメニューの③自動イベント変数を選択。

GTMで自動イベント変数を選択

そしたら下記を参考に変数タイプの①要素の属性を選択、②属性名を「data-click-sns」と入力して③保存する。

GTMの自動イベント変数設定

トリガーの作成

続いてはカスタムデータ属性用のボタンをクリックした時のトリガーを作成。

サイドメニューのトリガーを選択して、新規をクリック。

GTMのトリガーを新規作成

①トリガー名をサンプルのように「Click SNS Btn」と入力し、②トリガーの設定欄をクリックで表示されたメニューの③リンクのみを選択。

GTMでリンクのみのトリガーを追加

そしたら、一部のリンククリックを選択し、トリガーの発生条件をClick Element、CSSセレクターに一致すると選択したら、一番右の欄に[data-click-sns]と入力する。このdata-click-snsは必ず括弧でくくらないと動作しないので注意が必要。終わったら保存。

GTMのトリガー設定

タグの作成

続いてはトリガー発動した時の記録用のタグを作成するのだが、予めGTMの基本設定でGTMの測定用タグを作成しておく必要がある。（下記画像の「GA4測定」というタグ）

関連 GA4でGTMの設定をする方法。新規作成のやり方も

サイドメニューからタグを選択して、新規をクリック。

GTMでタグを新規作成

①タグ名をサンプルのように「SNSクリック測定」と入力し、②タグの設定欄をクリックして表示されたメニューの③GA4イベントを選択。

GTMのGA4イベントのタグを作成

下記サンプルを参照してタグを設定していく。

  1. GA4測定を選択
  2. 自分でわかるようにイベント名を入力
  3. イベントパラメーターで、パラメータ名のサンプルのように「click_sns_name」と入力
  4. クリックして作成した自動イベント「Click SNS Value」を選択
  5. クリックして「Click SNS Btn」のトリガーを選択
  6. 保存して完了
GTMタグの設定

プレビューで確認

実際にプレビューで動作を確認。

右上のプレビューをクリックして、プレビューモードにする。

GTMのプレビューをクリック

プレビューをクリックすると「Tag Assistant」画面が開くので、GTMのコードを埋め込んでるサイトのURLを入力して、Connectクリックして接続する。

GTMのプレビューでURLを入力

入力したサイトが別画面で開くが、「Tag Assistant」画面では接続が成功すると下記のような画面が開くのでContinueをクリック。

GTMでプレビューサイトに接続

そしたらデータ属性の設定をしたボタンをクリック。

GTGのデータ属性ボタンをクリック

成功するとTag Assistantの画面に「Tags Fired」と表記が表示され、「SNSクリック測定」という項目があるので、それをクリックで様々な情報を確認することができる。これでプレビューは完了。

クリックしたデータ属性の内容を確認

公開

最後に公開作業で公開をクリック。

GTMで公開クリック

バージョンの名前を入力して公開で完了。

GTMで公開設定

GA4関連書籍

分かりづらいGA4だが、わかってくると便利かなと思う今日このごろ。書籍でもっと学んでおきたい。

逆引きは色々と便利。

できる逆引き Googleアナリティクス4 成果を生み出す分析・改善ワザ 192 できる逆引きシリーズ ￥2,926 ￥2,926 Amazonで見る

基本的なGA4の使い方はこちら。

「やりたいこと」からパッと引ける Googleアナリティクス4 設定・分析のすべてがわかる本 ￥2,822 ￥2,822 Amazonで見る

GTM関連記事