【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-imp-element」とします。
STEP 1-3

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

STEP 1-4

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

<script>
(function() {
  var minArea = 1 / 100; 
  var firedElements = new Set(); // push済み要素を記録する
  
  var selector = Object.keys({{constant-elem-selList}})
    .filter(function(key) {
      return !/[\u3040-\u30FF\u4E00-\u9FFF\uFF66-\uFF9F]/.test(key); // 日本語を含むキーを除外
    })
    .join(','); 
  
  window.dataLayer = window.dataLayer || [];
  
  // イベントのpush
  function pushToDataLayer(element) {
    var selectorString = element.tagName.toLowerCase();
    if (element.id) {
      selectorString += '#' + element.id;
    }
    if (element.classList.length > 0) {
      selectorString += '.' + Array.from(element.classList).join('.');
    }
    window.dataLayer.push({
        'event': 'event-imp-element',
        'gtm.element': selectorString
      });
    firedElements.add(element); // push済み要素として記録
    observer.unobserve(element); 
  }

  // 状態変化ごとに監視
  function startObserving(entries) {
    entries.forEach(function(entry) {
      if (entry.intersectionRatio >= minArea) {
        var element = entry.target;
        pushToDataLayer(element);
      }
    });
  }

  // IntersectionObserverのインスタンスを作成
  var observer = new IntersectionObserver(startObserving, {
    threshold: [minArea]
  });

  // 監視対象の要素を設定
  document.querySelectorAll(selector).forEach(function(element) {
    if (!firedElements.has(element)) {
      observer.observe(element);
    }
  });

})();
</script>
Code language: HTML, XML (xml)

STEP 1-5

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

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

補足
このイベントは1つの要素に対して、最大で1ページに1度測定されます。
対象の要素の1%以上が表示されると、その要素が表示されたとみなされます。

要素の表示トリガーの作成

STEP 2-1

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

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

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

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

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

配信タグの作成

STEP 3-1

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

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

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

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

見出し

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

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

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

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

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

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

「トリガー　> 配信トリガー > trigger-imp-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_imp_element_count
イベントパラメータ GTM_imp_element_count
測定単位標準

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

設定完了

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

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