テクノロジー・動画・写真・デザインとか

Googleタグマネージャでクリック計測をする方法【カスタムデータ属性編】

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

目次

カスタムデータ属性の設定

カスタムデータ属性はHTMLタグの要素の中に下記のように「data-」の後に自分の好きな属性名を設定できる。
data-xxx-xxx

例えば、下記サンプルのようにボタンを2つ用意し、それぞれのボタン名を属性値に記述。このように設定してGoogleタグマネージャで設定することで、Analyticsのイベントに「お問い合わせボタン」、「ダウンロードボタン」と記録されるので、どのボタンがクリックされたのかの確認が容易にできるようになる。

Googleタグマネージャ設定

自動イベント変数でボタン名を作成

最初に変数メニューからユーザー定義変数の「自動イベント変数」を使ってボタン名を取得するための変数を作成。

まずは左サイドメニューの「変数」、ユーザー定義変数の「新規」をクリック。
Googleタグマネージャでユーザー定義変数を作成

変数の設定画面で「自動イベント変数」を選択。
Googleタグマネージャの自動イベント変数を選択

そしたら下記を参考に上から「変数名」を入力、変数タイプの「要素の属性」を選択、属性名を先程のHTMLに記述した「data-btn-name」と入力して保存する。これでボタンの名前を取得できる。
自動イベント変数の設定

カスタムデータ属性用のボタントリガーを作成

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

サイドメニューの「トリガー」を選択して、「新規」を作成。
Googleタグマネージャのトリガーを作成

トリガーの設定では、「リンクのみ」を選択して追加する。
トリガーのリンクのみタイプを選択

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

タグの作成

続いてはトリガー発動した時の記録用のタグを作成。

サイドメニューから「タグ」を選択して、「新規」をクリック。
Googleタグマネージャのタグを作成

そしたらタグタイプで「ユニバーサルアナリティクス」を追加し、下記を参考に設定する。

  • タグタイプ:「ユニバーサルアナリティクス」を追加
  • トラッキングタイプ:「イベント」を選択
  • カテゴリ:「ボタンクリック」と入力
  • アクション:先程の変数「ボタン名」を選択
  • 非インタラクションヒット:「真」を選択
  • Googleアナリティクス設定:変数を設定していない場合は手入力
  • トリガー:先程作成したボタントリガーを選択

Googleタグマネージャでタグを設定

プレビューで確認

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

右上の「プレビュー」をクリックして、プレビューモードにする。
Googleタグマネージャのプレビューで確認

そしたらGoogleタグマネージャを設定したサイトを開くと下記のように画面下部にGoogle TagManagerという確認画面が表示されるので、カスタムデータ属性が設定されているボタンをクリック。
Googleタグマネージャのボタンクリック計測

そうすると、左のサイドに「gtm.linkClick」というクリックの結果が表示される。問題がなければ「Tags Fired On This Event」の欄に設定したボタンのタグが表示されるので詳細を確認してみよう。「Variables」をクリックすれば、設定した変数の値が取れているかの確認もできるようになっている。
Googleタグマネージャのクリック計測結果

これで準備は終わりなのでプレビューを完了して公開して、アナリティクスの「イベント」にボタン名が記録されているかを確認。

参照

関連記事

カテゴリ:Google