We're running a service on our-site.com. Our customers can either use the service "stand alone" by simply linking from their-site.com to our-site.com/customer-service or by embedding our service via iFrame into their-site.com. Imagine visiting GMaps directly vs. seeing it embedded in an IFrame.
Visiting "foreign" page with our service in IFarme
Beginning with Chrome 80 (i guess) our Google Analytics stopped working when the service runs inside the iFrame. Chrome is giving me this (quite clear) message:
A cookie associated with a cross-site resource at http://our-site.com/ was set without the
SameSiteattribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set withSameSite=NoneandSecure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
Also I don't see anything in the GA realtime overview if I visit their-site.com with our our-site.com/customer-service embedded in the iFrame.
If I manually disable the 2 features same-site-by-default-cookies & cookies-without-same-site-must-be-secure in chrome://flags and visit their-site.com with our-site.com/customer-service embedded in the iFrame I do see the page visit in the GA realtime overview.
Visiting our service "stand alone"
When directly visiting our-site.com/customer-service GA is still working just fine:
- No warnings in dev tools
- Multiple cookies associated to GA are shown in dev tools > applications tab
- I can see page visits in the GA realtime overview
- Neither of the cookies has the
SecureorSameSitevalue set (all "blank")...
Question
Is there anything I can do to make GA work again when running inside an iFrame on a foreign domain?
Example code
I just created a very simple test environment which also shows the issues described above:
our-site.com/customer-service
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={tracking-id}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag("js", new Date());
gtag("config", "{tracking-id}");
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>our site service</title>
</head>
<body>our-site.com/customer-service</body>
</html>
their-site.com
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>their-site.com</title>
</head>
<body>
<iframe src="https://www.our-site.com/customer-service" style="width: 500px; height: 500px;"></iframe>
</body>
</html>
Even this very simple example shows the behavior described above, where opening our-site.com/customer-service directly, shows data in the GA realtime overview and opening their-site.com doesn't...