333文字
2分
編集

GTM + iframe + クロスドメインにpostMessageで対応する

#Google Tag Manager #Google Analytics

公式でも紹介されるリンカー設定だが、計測が不安定になる可能性が拭えず、設定が複雑になるケースが多いため、postMessageを利用したイベント委譲型の計測が有効な場合がある。

#リンカーの混乱

  • _glパラメータの付与は、DOMの書き換えタイミングに依存するため、レースコンディションが発生しやすい。
  • cookie_flagsにSameSite=None;Secureを設定しても現代のブラウザ仕様（ITPやPrivacy Sandbox）によりCookieが期待通りに動作することは保証されない。
  • 両サイトに同一のGTM/GA4を設定した場合、理解が不十分であれば重複計測を招く。

#基本的な実装

子側（iframe内）の実装：

tsx
// iframe内かどうかの確認
if (window.parent && window.parent !== window) {
  const message = {
    type: "iframe_navigation",
    page_location: window.location.href,
    page_title: document.title,
    page_referrer: document.referrer,
  }
  // 親のドメインが限定される場合は、第二引数に親のドメインを指定する。
  // 特に秘匿性の高いデータを送信する場合は、`*`では全てのドメインを許可することになるため危険。
  window.parent.postMessage(message, '*')
}

親側の実装：

tsx
window.addEventListener('message',  function(event) {
  // セキュアな処理を行う場合などは、送信元をチェックする。
  if (event.origin !== 'https://your-iframe-site.com') return;

  if (event.data && event.data.event === "iframe_navigations") {
    // ここでGTMやGA4へのデータ送信を行う。
  }
});
編集