「変数 > 新規」を選択。

変数名を「constant-actImp-minArea」とします。

「変数の設定 > 定数」を選択。

「変数の設定 > 値」に「50」と入力。

「変数 > 新規」を選択。

変数名を「constant-actImp-minMsec」とします。

「変数の設定 > 定数」を選択。

「変数の設定 > 値」に「1000」と入力。

「タグ > 新規」を選択。

タグ名を「event-endImp-element」とします。

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

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

<script>
(function() {
  var minArea = {{constant-actImp-minArea}} / 100;
  var minDur = {{constant-actImp-minMsec}};
  var firedElements = new Set(); // push済み要素を記録する
  var timeData = new Map();
  
  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, startTime) {
    var duration = Math.round(performance.now() - startTime);
    if (duration >= minDur) {
      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-endImp-element',
        'variable-elem-impDur': duration,
        'gtm.element': selectorString
      });
      firedElements.add(element); // push済み要素として記録
      observer.unobserve(element);
    }
  }

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

      if (entry.intersectionRatio >= minArea && !timeData.has(element)) {
        timeData.set(element, performance.now());
      } else if (entry.intersectionRatio < minArea && timeData.has(element)) {
        if (!firedElements.has(element)) {
          pushToDataLayer(element, timeData.get(element));
          timeData.delete(element);
        }
      }
    });
  }

  // visibilitychange
  function handleVisibilityChange() {
    if (document.visibilityState === 'hidden') {
      performCleanup();
    }
  }

  // beforeunload pagehide
  function performCleanup() {
    timeData.forEach(function(startTime, element) {
      pushToDataLayer(element, startTime);
    });
    timeData.clear();
  }

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

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

  // イベントリスナーを追加
  document.addEventListener("visibilitychange", handleVisibilityChange);
  window.addEventListener("beforeunload", performCleanup);
  window.addEventListener("pagehide", performCleanup);
})();
</script>
Code language: HTML, XML (xml)

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

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

「変数　> 新規」を選択。

変数名を「variable-elem-impDur」とします。

「変数の設定 > 変数のタイプ > データレイヤーの変数」を選択。

「データレイヤーの変数名」に「variable-elem-impDur」と記載。

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

トリガー名を「trigger-endImp-element」とします。

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

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

「タグ > 新規」を選択。

タグ名を「tag-endImp-element」とします。

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

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

「イベント名」に「tag-endImp-element」と記載。

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

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

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

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

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

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

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

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

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

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

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