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

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

#リンカーの混乱

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

#基本的な実装

子側（iframe内）の実装：

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

親側の実装：

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

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