【GTM】单页应用程序的增强型电子商务跟踪

随着单页应用程序越来越流行，如果在eComm等网站上使用 Google Analytics（分析），则还可以利用 Google 的增强型电子商务功能。对于那些使用 GTM 数据层的人来说，实现应该相对简单些。我在这里做一些假设，第一个假设是知道如何通过 GTM 的数据层实施基本的增强型电子商务。第二个假设是知道如何对SPA实施基本跟踪功能。如果你不知道如何实现跟踪的方法，参考这个文章。这篇文章偏理论，所以建议多看看即可，理解为主。

问题

对于单页面应用程序，跟普通网页就不一样了，比如正常加载页面中那样仅放入eCommerce数据层可能不太行。因为 Enhanced eCommerce 依靠数据层起作用，所以我们要特别注意SPA上的数据层，包括排序和继承问题。

排序是什么意思？

必须以特定的顺序设置和发送数据，以便准确归因。真非常重要，例如，我不想在PDP上发送类别页面印象标签，而希望能够将所有产品数据与综合浏览量打包在一起。尽管你可以通过事件发送增强型电子商务数据，但除非绝对必要，否则我不建议使用事件的形式。恰恰单页面程序是通过SPA实施避免这种情况。也就是说单页面数据的触发要以特定顺序设置数据层值才能奏效。可以考虑以下情况和解决方案：

比如用户在目录类别页面上，单击产品，然后转到产品详细信息页面（PDP）

1. 设置印象数据层
2. 触发类别页面的综合浏览量（增强的电子商务数据已传递到GTM）
3. 用户点击产品
4. 设置产品点击数据层
5. 触发产品点击事件（增强的电子商务数据传递到GTM）
6. 设置电子商务数据层
7. 触发综合浏览量（增强的电子商务数据已传递到GTM）

可能大家看了一头雾水，别急，这个还是需要实际设置才能理解，慢慢来。为了使设置一切正常，一切都必须按照特定的顺序进行。如果关闭排序，则会遇到继承问题。

继承又是什么意思？

继承意味着数据向下游传递。在Google跟踪代码管理器中，意味着值是从Cookie，数据层或其他来源继承（传递）的。例如我登录到一个站点，并且该站点保存了一个自定义维度，显示我是注册用户。由于该数据作为自定义维度存储在User范围内，因此无论我是否登录，下一次我到达网站时都将继承该值，因为这是最后一个传递的值。同理，电子商务数据层以类似的方式工作。它处理传递到数据层的最新电子商务的值。单页面的访问顺序以及数据继承顺序大概如下：

1. 用户点击产品
2. 设置产品点击数据层
3. 触发产品点击事件（增强的电子商务数据传递到GTM）
4. 设置电子商务数据层
5. 触发综合浏览量（增强的电子商务数据已传递到GTM）
6. 用户导航到主页
7. 触发网页浏览（增强型电子商务数据已传递到GTM）
8. 用户导航到博客
9. 触发网页浏览 （增强型电子商务数据已传递到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个解决方案：

1. 如果你有2个Google Analytics（分析）设置变量-一个启用了“增强型电子商务”，另一个未启用。意味着你必须创建2个单独的标签tag，一个用于电子商务页面，一个用于非电子商务页面。我尝试过了，但我并不推荐这样做，因为它需要更多时间维护。
2. 传递虚拟电子商务对象来传递GTM。

从概念上讲，方法1非常简单明了……所以让我们看一下选项2。

传递虚拟电子商务对象

我们要解决继承问题。Google跟踪代码管理器将从最后一个数据层对象搜索到第一个数据层对象，直到找到一个电子商务对象为止…… 包括任何 电子商务对象（有效或无效）。对于每个eCommerce标签tag，我还触发一个将空白eCommerce对象推入数据层的标签。为此，测试创建以下事件：

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

<script> dataLayer.push（{ 
'ecommerce'：{}}）; 
</script>

也可以在你的控制台中尝试该代码。请注意以下每个标记的“标记触发优先级”属性：

当用户从一页浏览到另一页时，Google跟踪代码管理器将清除eCommerce变量。只要pageview标记的数目大于dataLayer JavaScript的数目，就可以了！顺序如下：

1. 产品页面加载（通过历史记录更改或其他方式）
2. eComm事件触发，获取增强型eComm产品数据
3. “清除”对象后，立即触发dataLayer.push（）标签

当然了，实际单页面程序配置过程中可能更复杂，本文只是简单介绍下基本的原理，后期操作了再慢慢写！