iframe呼び出し時にGA4ログが送信されない | mediba Creator × Engineer Blog

iframe呼び出し時にGA4ログが送信されない

はじめに

こんにちは、データアナリストの左海です。

担当中の案件にて、対象ページを別ドメイン上(クロスサイト)でiframe呼び出しすると
GA4イベントが送信されないという事象に遭遇しました。

今回は、本事象の原因と解決策について書いていきます。

事象

以下の前提を踏まえて、事象について説明していきます。

  • iframe呼び出し元、呼び出し先ドメインの関係は「クロスサイト」に該当する
  • 両ドメインは、page_viewイベントなど基本的なGA4イベントの計測設定済
  • GA4ログの疎通確認は、Google Chromeの開発者ツールのNetworkパネルで行った

添付画像の通り、a.com上で、b.comをiframe呼び出ししていたのですが
なぜかb.comのGA4イベントの送信のみ確認できませんでした。

image

原因

調査したところ、Google Chromeの仕様変更が原因であることが判明しました。

On top of these, in the latest version of the Google Chrome browser, the cookie will also be treated as having the SameSite=Lax flag. This means the cookie will not work when accessed in a third-party context.

引用:THE NEW COOKIEFLAGS SETTING IN GOOGLE ANALYTICS

Google Chrome 80の仕様変更により、CookieのSameSite属性のデフォルト値が「None」から「Lax」に変更となり、サードパーティコンテキスト(クロスサイト)のCookieの書き込みが拒否されるようになったようです。

その結果、b.comからGA Cookieへの書き込みが拒否され、GA4イベントが送信できなかったということです。

解決策の前に、クロスサイトやCookieのSameSite属性についても触れておきます。

クロスサイトとは

クロスオリジンのような似た語句が多く、混乱する可能性が高いため「クロスサイト」について整理しておきます。

クロスサイトは、スキームやeTLD+1が異なるウェブサイトを指します。
例として、以下のパターンが該当します。

image

また、Google Chromeの開発者ツールのNetworkパネルでもクロスサイトかどうかの確認が可能です。

任意のファイルの「Request Headers」の「Sec-Fetch-Site」ヘッダーの値を確認し
添付画像のように、値に「cross-site」と表示されていれば「クロスサイト」となります。

image

参考:「Same-site」と「same-origin」

CookieのSameSite属性とは

CookieのSameSite属性とは、Cookieの取り扱いに関するセキュリティレベルを指定するための属性です。

Google Chrome 80の仕様変更の背景として、GoogleがCSRF(Cross-site Request Forgeries)対策としてブラウザレベルでセキュリティ対策を施したようです。

繰り返しになりますが、クロスサイトにおけるGA Cookieの書き込みもセキュリティ対策の対象となり、GA4ログの送信ができませんでした。

なお、SameSite属性に設定可能な値は「None、Lax、Strict」の3種類で
それぞれの設定値の詳細については、以下のサイトをご確認ください。

参考:Using HTTP cookies - HTTP

※「SameSite=None」が設定されている場合、必ずSecure属性も付与しCookieの書き込みをHTTPS通信に限定する必要があります

解決策

解決策は、GA CookieのSameSite属性の値を「None」に設定するのみです。

今回、GA4イベントの計測はGTM経由で行っていたため、対象のGoogleタグの構成パラメータ「cookie_flags」の値に 「SameSite=None;Secure」と設定すれば、完了です。

image

おわりに

本事象に遭遇して、改めてアクセス解析におけるCookieの重要性を再認識することができました。

同時に、データアナリストはインターネットに関係するドメイン知識を可能な限りインプットしておく必要があると感じました。

引き続きあらゆることに興味をもって業務に取り組んでいきます。

1 note

  1. mediba-ce posted this
    はじめに...こんにちは、データアナリストの左海です。