在单页应用中推送 Google Tag Manager 数据层 (V.2)

引言

我找到很多关于 Google Analytics (GA) 以及如何填充 GTM 数据层的文章，但这些文章都没有专注于电商变量（除非与 v1 相关）。

也很难找到任何在单页应用中突出显示如何在虚拟页面而不是经典网页中触发事件的示例。 所以我决定分享我所做的事情。

背景

该应用是一个采用单页应用架构的电商网站。 用户界面使用 Knockout JavaScript 框架构建，服务器端代码使用 C# 开发 .NET。

目标是捕获一个电商交易并将数据发送到 Google Tag Manager (GTM) 数据层。 在本技巧中，我将始终讨论标准电商标签，而不是增强型电商标签。 主要的困难在于以正确的方式设置整个环境，并且显然只在流程结束时捕获交易，这意味着只有在实际完成购买时才会捕获。

解决方案

我避免深入研究 Google Analytics 本身，因为你可以找到大量关于它的文章（例如 Google Developers References）。 无论如何，设置环境并不困难，但你必须非常注意细节，我们来看看。

第一步是在你的 Google Analytics 帐户中创建一个视图，并以这种方式启用其电商设置

第二步是创建我们想要填充到全新 GTM 标签中的变量。 因此，打开你的 GTM 容器并创建一个新标签，然后转到变量并按如下方式设置

我们还详细了解如何配置数据层变量

作为第三步，我们需要将我们的 GA 视图与我们的 GTM 标签关联

跟踪 ID是指向我们视图的链接（出于隐私原因已混淆）。 标签 跟踪类型设置为交易，这样我们就告诉 GA 我们实际上将用电商数据填充一个数据层。 最后，触发条件设置为以这种方式创建的新触发器

这是我们配置中最棘手的部分之一：触发事件是一个自定义事件，仅在我们用内置变量 Event 的值 event 填充它时才会触发。 还要注意 事件名称！ 必须命名为 event，因为 GTM 将查找由名为 event 的自定义事件引发的内置变量 Event 中的值，你知道为什么吗？ 不？ 我也不知道。

现在我们准备好填充我们的数据层了。 基本上，我们需要添加在结账流程结束时将数据推送到 GA 的代码。 假设我们有一个 placeOrder 函数，如下所示

function placeOrder() {
    ...
        checkoutModel.checkout().postOrderPromise()
          .done(function (postOrderResponse) {
              publishGoogleAnalyticsMessage(postOrderResponse);
              publishOrderPlacedSuccessfully(postOrderResponse);
          })
    ...
}
 
function publishGoogleAnalyticsMessage(model) {
    ...
	window.mwgAnalyticsDataLayer.push(
	{
		'event': 'event',
		'transactionId': model.OrderId,
		'transactionAffiliation': ogs.config.StoreAddress.FirstName,
		'transactionTotal': Number(total.replace(/[^0-9\.]+/g, "")),
		'transactionProducts': transactionProducts
	});
    ...
}

填充 transactionProducts 的一种可能方式是

function buildProductItemForGoogleAnalytics(orderItem) {
	var product;

	var price = orderItem.CurrentPrice;

	product = {
		'sku': orderItem.Sku,
		'name': orderItem.Name,
		'category': orderItem.CategoryName,
		'price': Number(price.replace(/[^0-9\.]+/g, "")),
		'quantity': orderItem.Quantity
	};

	return product;
}

如你所见，price 变量只需要没有货币符号的数字值。

就这样！ 一旦你推送了你的电商数据层，等待几分钟让 Google Analytics 更新自身，然后直接进入你的精彩报告，应该类似于这样

关注点

Google Analytics 是一款非常棒且强大的工具，但在设置时需要一点耐心。

历史

• 第一版