【Tag Manager】計測する要素を一元管理して効率よくクリック回数を計測をする

以前の記事では、Google Tag Manager（GTM）を使用して、CSSクラスまたはIDをもとに要素のクリック回数を取得する方法を解説しました。

【WordPress】Tag Managerでウィジェットごとのクリック数を計測する

Analytics、Tag Manager、Looker Studioを使用してWordPressのウィジェットごとのリンククリック数を計測する方法を詳しく説明します。

しかし、GTMのデフォルト設定では、計測する要素ごとにトリガーを個別に作成しなければならず、管理が煩雑になるという問題があります。
たとえば、1つのトリガーで1つの要素しか計測できないため、計測対象が増えると登録漏れや管理の負担が増加します。

この記事では、計測する要素を一元管理するためのユーザー定義変数を活用し、効率的に要素のクリック回数を計測する手順を解説します。

事前準備

この設定を行う前に、前回の記事で紹介した管理変数を作成しておく必要があります。
まだ作成していない場合は以下の記事を参考にして作成してください。

【Tag Manager】計測する要素を一元管理して計測を効率化する

Google Tag Managerで計測する要素のCCSクラス、IDを一元管理して計測ミスを防止！この記事でその手順を解説します。

Google Tag Managerの設定

見出し

タグやトリガーなどの名前は自由に設定できますが、変更するとコードの修正が必要になる場合があります。
この記事で使用する名称をそのまま使うことを推奨します。

要素のクリックイベントの作成

計測する要素のクリック回数を取得するため、GTMデフォルトのトリガーではなくカスタムイベントを使用します。

STEP 1-1

「タグ > 新規」を選択。
STEP 1-2

タグ名を「event-clk-element」とします。
STEP 1-3

「タグの設定 > タグの種類 > カスタムHTML」を選択。

STEP 1-4

「HTML」エリアに以下のコードを記載。

<script>
(function() {

  var selector = Object.keys({{constant-elem-selList}})
    .filter(function(key) {
      return !/[\u3040-\u30FF\u4E00-\u9FFF\uFF66-\uFF9F]/.test(key); // 日本語を含むキーを除外
    })
    .join(',');

  window.dataLayer = window.dataLayer || [];

  // クリックイベントのリスナーを追加
  document.addEventListener('click', function(event) {
    var clickedElement = event.target; // クリックされた要素

    document.querySelectorAll(selector).forEach(function(element) {
      if (element.contains(clickedElement) || element === clickedElement) {
        // 要素の領域内をクリックした場合
        var selectorString = element.tagName.toLowerCase();
        if (element.id) {
          selectorString += '#' + element.id;
        }
        if (element.classList.length > 0) {
          selectorString += '.' + Array.from(element.classList).join('.');
        }

        // データレイヤにpush
        window.dataLayer.push({
          'event': 'event-clk-element',
          'gtm.element': selectorString
        });
      }
    });
  });
})();
</script>
Code language: HTML, XML (xml)

STEP 1-5

「詳細設定 > タグ呼び出しオプション > 1ページにつき1度」を選択。
STEP 1-6

「トリガー > All Pages」を選択。

補足
このイベントはリンクであるかを問わず、対象の要素に対してクリックされるたび測定されます。

要素のクリックトリガーの作成

STEP 2-1

「トリガー　> 新規」を選択。
STEP 2-2

トリガー名を「trigger-clk-element」とします。
STEP 2-3

「トリガーの設定 > トリガーのタイプ > カスタムイベント」を選択。
STEP 2-4

「イベント名」に「event-clk-element」と記載。

補足
このトリガーは先ほど作成した要素のクリックイベントが起こる度に動作します。

配信タグの作成

STEP 3-1

「タグ > 新規」を選択。
STEP 3-2

タグ名を「tag-clk-element」とします。
STEP 3-3

「タグの設定 > タグの種類 > Googleアナリティクス > Googleアナリティクス:GA4イベント」を選択。
STEP 3-4

「測定ID」に「送信先Google Analyticsの測定ID」を記載。

見出し

測定IDは以下の手順で確認できます。

「Google Analytics > 管理 > データの収集と修正 > データストリーム > （ストリーム名）」

管理上の観点からGTM側で変数にしておくことをおすすめします。
STEP 3-5

「イベント名」に「GTM_clk_element」と記載。
STEP 3-6

「イベントパラメータ」で以下を設定。

イベントパラメータ値
GTM_element_selector {{variable-elem-selector}}
GTM_clk_element_count 1
STEP 3-7

「トリガー　> 配信トリガー > trigger-clk-element」を選択。

Google Analyticsの設定

カスタムディメンションの作成

チェック

別記事で「GTM_element_selector」というカスタムディメンションをすでに作成している場合は飛ばしてください。

STEP 4-1

「管理 > データの表示 > カスタム定義」を選択。
STEP 4-2

「カスタム定義 > カスタムディメンション > カスタムディメンションを作成」を選択。
STEP 4-3

以下の情報を入力します。

ディメンション名 GTM_element_selector
イベントパラメータ GTM_element_selector

補足
このディメンションでは要素の管理変数で定義された返却パラメータが表示されます。

カスタム指標の作成

STEP 5-1

「管理 > データの表示 > カスタム定義」を選択。
STEP 5-2

「カスタム定義 > カスタム指標 > カスタム指標を作成」を選択。
STEP 5-3

以下の情報を入力します。

指標名 GTM_clk_element_count
イベントパラメータ GTM_clk_element_count
測定単位標準

補足
この指標では要素のクリック回数が表示されます。

設定完了

これで、計測する要素のクリック回数をGoogle Analyticsで確認できるようになりました。
また、Analyticsを別サービスと連携すれば、もちろんそのサービスでも確認が可能です。

他の計測イベントの設定方法を以下の記事の最後にまとめていますので確認してみてください。