How to add Google Tag Manager firing rule for Backbone Marionette site?

问题

I have already built a site with backbone marionette and now I am trying to use Google Tag manager to add the tracking. But I have no idea how to configure GTM, in order to listen page change and button click event.

回答1:

Clicks are up to you to set up listening events and track manually from views. Page views can be tracked like this:

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

回答2:

There is a bit of fiddling required there. Tag manager uses a data structure called dataLayer. It's an array, that you can add events to. So to configure tag manager, you need to add a snippet to HTML page of the application as in any other case. On top of it, you have to initialise the dataLayer array but you need to make sure, that the code initialising this variable is invoked before the snippet. So here is the full example in the head of the index.html page (in one page app):

<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>

The function called loadProductDetails is an example on how you push the events to Google servers - you just need to add an object to the dataLayer array.

Dan Russel wrote a full blog post about it, together with explanation how to setup the macro for extracting the events.

And there is a bit of documentation on this as well here

来源：https://stackoverflow.com/questions/25053398/how-to-add-google-tag-manager-firing-rule-for-backbone-marionette-site

标签

backbone.js

google-analytics

marionette

google-analytics-api

google-tag-manager