随着单页应用程序越来越流行,如果在eComm等网站上使用 Google Analytics(分析),则还可以利用 Google 的增强型电子商务功能。对于那些使用 GTM 数据层的人来说,实现应该相对简单些。我在这里做一些假设,第一个假设是知道如何通过 GTM 的数据层实施基本的增强型电子商务。第二个假设是知道如何对SPA实施基本跟踪功能。如果你不知道如何实现跟踪的方法,参考这个文章。这篇文章偏理论,所以建议多看看即可,理解为主。
问题
对于单页面应用程序,跟普通网页就不一样了,比如正常加载页面中那样仅放入eCommerce数据层可能不太行。因为 Enhanced eCommerce 依靠数据层起作用,所以我们要特别注意SPA上的数据层,包括排序和继承问题。
排序是什么意思?
必须以特定的顺序设置和发送数据,以便准确归因。真非常重要,例如,我不想在PDP上发送类别页面印象标签,而希望能够将所有产品数据与综合浏览量打包在一起。尽管你可以通过事件发送增强型电子商务数据,但除非绝对必要,否则我不建议使用事件的形式。恰恰单页面程序是通过SPA实施避免这种情况。也就是说单页面数据的触发要以特定顺序设置数据层值才能奏效。可以考虑以下情况和解决方案:
比如用户在目录类别页面上,单击产品,然后转到产品详细信息页面(PDP)
- 设置印象数据层
- 触发类别页面的综合浏览量(增强的电子商务数据已传递到GTM)
- 用户点击产品
- 设置产品点击数据层
- 触发产品点击事件(增强的电子商务数据传递到GTM)
- 设置电子商务数据层
- 触发综合浏览量(增强的电子商务数据已传递到GTM)
可能大家看了一头雾水,别急,这个还是需要实际设置才能理解,慢慢来。为了使设置一切正常,一切都必须按照特定的顺序进行。如果关闭排序,则会遇到继承问题。
继承又是什么意思?
继承意味着数据向下游传递。在Google跟踪代码管理器中,意味着值是从Cookie,数据层或其他来源继承(传递)的。例如我登录到一个站点,并且该站点保存了一个自定义维度,显示我是注册用户。由于该数据作为自定义维度存储在User范围内,因此无论我是否登录,下一次我到达网站时都将继承该值,因为这是最后一个传递的值。同理,电子商务数据层以类似的方式工作。它处理传递到数据层的最新电子商务的值。单页面的访问顺序以及数据继承顺序大概如下:
- 用户点击产品
- 设置产品点击数据层
- 触发产品点击事件(增强的电子商务数据传递到GTM)
- 设置电子商务数据层
- 触发综合浏览量(增强的电子商务数据已传递到GTM)
- 用户导航到主页
- 触发网页浏览(增强型电子商务数据已传递到GTM)
- 用户导航到博客
- 触发网页浏览 (增强型电子商务数据已传递到GTM)
由于旧的标准 eCommerce 对象停留在数据层中,因此eComm数据正在主页和博客综合浏览量上继承。所以由于继承和排序的问题,让这两个捆绑在一起,才能保证电子商务数据的可行性。
解决方案
我们先创建3个触发器:

此列表中的前2个将触发除电子商务页面以外的任何页面(或历史更改事件)上的标签。我们假设 product/category/checkout/etc 在URL中都带有 / products /。最后一个触发条件是当你需要使用标签打包产品数据时……这非常重要。例如,如果我们要为PDP触发代码并使用综合浏览量打包增强型电子商务,则数据层将如下所示:
dataLayer.push ({
'event' :' ecommerce'
'ecommerce ' :{
'detail' :{
'actionField' :
{ 'list' :'服装' },
'products ' :[{
'name' :'Triblend Android T-Shirt',
'id ' :'12345' ,
'price' :'15 .25' ,
'brand' :'Google'
'variant' :'Gray' }] } } });
事件触发器应定位到名为“电子商务”的事件。此事件将触发综合浏览量。
对于要启动增强型电子商务的页面,建议从事件中触发综合浏览量。当然,我们还有另一件事要做,注意解决上面提到的继承问题。每次触发页面浏览时,GTM都会从最后一个被推入的对象开始扫描整个数据层,并朝着第一个对象进行操作,直到找到一个电子商务对象为止。从PDP导航到首页时,无论你在哪个页面上,GTM都会获取传递到数据层的最后一个eComm对象。
我们有2个解决方案:
- 如果你有2个Google Analytics(分析)设置变量-一个启用了“增强型电子商务”,另一个未启用。意味着你必须创建2个单独的标签tag,一个用于电子商务页面,一个用于非电子商务页面。我尝试过了,但我并不推荐这样做,因为它需要更多时间维护。
- 传递虚拟电子商务对象来传递GTM。
从概念上讲,方法1非常简单明了……所以让我们看一下选项2。
传递虚拟电子商务对象
我们要解决继承问题。Google跟踪代码管理器将从最后一个数据层对象搜索到第一个数据层对象,直到找到一个电子商务对象为止…… 包括任何 电子商务对象(有效或无效)。对于每个eCommerce标签tag,我还触发一个将空白eCommerce对象推入数据层的标签。为此,测试创建以下事件:

此触发器在每个“增强型电子商务”操作上启动。然后将触发器与以下标记配对:

<script> dataLayer.push({
'ecommerce':{}});
</script>
也可以在你的控制台中尝试该代码。请注意以下每个标记的“标记触发优先级”属性:

当用户从一页浏览到另一页时,Google跟踪代码管理器将清除eCommerce变量。只要pageview标记的数目大于dataLayer JavaScript的数目,就可以了!顺序如下:
- 产品页面加载(通过历史记录更改或其他方式)
- eComm事件触发,获取增强型eComm产品数据
- “清除”对象后,立即触发dataLayer.push()标签
当然了,实际单页面程序配置过程中可能更复杂,本文只是简单介绍下基本的原理,后期操作了再慢慢写!