如何实现跨站iframe的无Cookie跟踪?丨GA实操

iframe跨站点加载内容,则浏览器必须允许在第三方上下文中访问cookie。换言之,如果浏览器阻止了第三方Cookie,iframe将无法写入cookie,Google Analytics 跟踪也会失效。

一、到底是什么问题?

Chrome v80 (于2020年2月4日发布)强制实施SameSite Cookie限制,这意味着,如果应该在第三方上下文中访问Cookie,则需要设置SameSite = None和Secure标志。默认情况下,这些值是未设置的。

不幸的是,Google Analytics使用的_ga这个cookie没有设置这些值,而且目前尚未提供添加这些标志支持的时间线。

问题就在于,在大多数浏览器上,_ga在第三方上下文中不起作用(或将停止运行),这适用于所有跨站点iframe嵌入。

有一种解决方法是,我们可以完全忽略Cookie。

二、解决方案1:将Client ID从父级传递给子级

混合模式下会有许多潜在的资源竞争,因此需要采取一些预防措施。


父页面的工作机制是:


1)加载Google跟踪代码管理器后,父页面便开始侦听iframe中的消息。

2)父页面收到childReady消息后,它将开始轮询Google Analytics跟踪器,直到达到最大超时时间为止。

3)一旦Google Analytics跟踪器可用,父页面就会将Client ID发送回iframe。

iframe如何响应:

1)iframe页面在Google跟踪代码管理器加载后即开始发送childReady消息。

2)一旦父页面使用响应Client ID(或超时),子页面将停止发送消息。

3)子页面将Client ID写入dataLayer。

以上,我们知道了如何将Client ID传到iframe,但这还不够。

还需要设置两个字段最好在Google Analytics设置变量中设置:

1)storage设置为none避免跟踪器无法编写Client ID cookie时失败。

2)clientId设置为dataLayer的值。

这在后文会继续讲到。

三、解决方案2:将所有数据层信息从子级转发到父级

如果你不想在iframe内进行任何跟踪,则可以通过将所有dataLayer消息发送给父级进行处理,将跟踪委托给父级。

这意味着父页面将管理的tag包括自身的交互行为,以及iframe中发生的交互。

这个过程与第一种方法相仿。父页面工作机制:

1)加载Google跟踪代码管理器后,父页面便开始侦听<iframe>中的消息。

2)父页面收到childReady消息后,将以parentReady消息进行响应。

3)如果子框架以与dataLayer兼容的格式发送消息,则父页面将该消息推送到自己的dataLayer中。

对于iframe:

1)iframe页面在Google跟踪代码管理器加载后即开始发送childReady消息。

2)父页面以parentReady响应后,子框架会“劫持” dataLayer.push()方法,并将传递给它的所有消息发送到父页面。

3)子框架中的消息被命名为命名空间,以使其与父级的dataLayer消息分开,并且它们包含有关iframe的一些元数据(主要是URL和标题)。

四、父页面设置

1.自定义HTML代码

在父页面上,也就是将Client ID发送到iframe并等待子级发送的消息页面,你需要创建一个自定义HTML代码,该代码会在“Page View”触发器上触发。

在这个HTML代码中需要指定trackingId和发送到哪一个iframe,添加消息侦听器,当iframe向父页面发送postMessage时,侦听器将激发并执行postCallback函数。postCallback函数实现与子页面的通信,这在本文第二、三节已有说明。

2.配置消息转发系统

父页面侦听从嵌入式iframe转发的dataLayer消息。你可以创建对这些消息做出反应的标签,触发器和变量。因为从框架发送的所有事件都将附加到iframe中,将以iframe.Message的形式发送。因此,如果要在iframe中单击链接时触发代码,则触发器可能如下所示:

如果要更新父页面标签以使用iframe页面级数据,则需要为iframe.pageData.url(iframe页面的URL)和iframe.pageData.title创建数据层变量(页面标题)。

完成所有这些配置后,就可以配置iframe页面了!

五、嵌入式(子)页面设置

你需要在iframe页面的Google跟踪代码管理器容器中做三件事。

1)创建一个与父页面进行通信的自定义HTML标记。

2)更新所有Universal Analytics(以及在使用时的App+Web)标签的设置。

3)更新你的Universal Analytics代码的触发器,以使其在收到父级的Client ID之前不会触发。

1.自定义HTML代码

创建一个新的“自定义HTML”代码,并将其设置为在“All Pages”触发器上触发。如果iframe是单页应用程序,你仍应仅在“All Pages”触发器上触发“自定义HTML”代码,而不是在每次SPA页面更改时都触发。

此代码需包含内容:

1)指定是否需要将dataLayer消息转发到父级,转发的话需指定命名空间,同时需要设置父页的位置,也就是指定消息发送到哪一个页面。

2)实现子页面与父页面的通信机制(详见本文二、三节)。

2.Google Analytics 代码

如果确实要从iframe页内将数据收集到Google Analytics,则需要使用以下设置来配置所有Google Analytics代码:

由于iframe将不再使用cookies来保存Client ID,因此需要将storage字段值设置为none。iframe中使用消息侦听器推送到数据层的Client ID,需要更新client ID字段。此字段配置如下所示:

如果Client ID尚不可用,则不会触发任何代码。你可以在自定义事件触发器中使用clientId,以在将Client ID推送到dataLayer时触发你的代码。

你还可以将现有触发器更新为在clientId具有有效值之前不会触发。

多功能容器

如果你希望容器适应不同的用例,那么一个好办法是为在访问顶部框架中页面时,和访问在嵌入式页面时创建单独的标签集。通过一个自定义JavaScript变量区分是否访问iframe变量,在代码、触发器和变量中检查此值,以确认根据页面访问方式正确配置了跟踪。

原文链接:https://www.simoahava.com/analytics/cookieless-tracking-cross-site-iframes/

发表评论

邮箱地址不会被公开。 必填项已用*标注