Question

我已经建立了一个带有主干牵线木偶的网站，现在我正在尝试使用Google跟踪代码来添加跟踪。但是我不知道如何配置GTM，以便监听页面更改和按钮点击事件。

Answer 1

点击由您自己设置监听事件并从视图中手动跟踪。可以像这样跟踪页面视图：

Backbone.history.on('route', function() {
  // Send Backbone.history.fragment to your page view tracker
});

Answer 2

那里需要一些摆弄。标记管理器使用名为dataLayer的数据结构。它是一个数组，您可以添加事件。因此，要配置标记管理器，您需要像在任何其他情况下一样将代码段添加到应用程序的HTML页面。最重要的是，您必须初始化dataLayer数组，但您需要确保在代码段之前调用初始化此变量的代码。所以这是index.html页面（在一个页面应用程序中）头部的完整示例：

<html>
<head>
... 
<script>
  dataLayer = [];
</script>
<script>
function loadProductDetails(productIdentifier) {
dataLayer.push({
  'event':'pageview',
  'virtualUrl':'/product/'+productIdentifier 
});
// code to load product details and display to user
}
</script>
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-3VLTP"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-3VLTP');</script>
<!-- End Google Tag Manager -->
...
<a onclick="loadProductDetails('nexus7');">Nexus 7</a>
...
</body>
</html>

名为loadProductDetails的函数是关于如何将事件推送到Google服务器的示例 - 您只需要将对象添加到dataLayer数组。

Dan Russel写了一篇关于它的完整blog post，并解释了如何设置用于提取事件的宏。

此外还有一些文档here

如何为Backbone Marionette网站添加Google跟踪代码管理器解雇规则？

2 个答案: