CODEWITHSUNDEEP
google-analyticstransactionse-commercegoogle-tag-manager
Killerpixler
Killerpixler

Reputation: 4050

GTM ecommerce after container container code on page

I want to use GTM to track eCommerce transactions. This is a test for client environments where the code might be placed after the GTM code snippet which is why using Dom Ready as a trigger for the transaction tag is not reliable.

This is my test code:

<body>
    <!-- Google Tag Manager -->
<script>window.dataLayer = window.dataLayer || [];</script>
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-M4RNT2"
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-XXXXXX');</script>
<!-- End Google Tag Manager -->
<div class="container">
<script>
window.dataLayer = window.dataLayer || []
dataLayer.push({
   'transactionId': '32698',
   'transactionAffiliation': 'Acme Clothing',
   'transactionTotal': 38.26,
   'transactionTax': 1.29,
   'transactionShipping': 5,
   'transactionProducts': [{
       'sku': 'DD44',
       'name': 'T-Shirt',
       'category': 'Apparel',
       'price': 11.99,
       'quantity': 1
   },{
       'sku': 'AA1243544',
       'name': 'Socks',
       'category': 'Apparel',
       'price': 9.99,
       'quantity': 2
   }]
});
</script>
</body>

As you can see the eCommerce code is taken straight from the Google documentation here.

I made sure that the pageview tag I'm firing works and I can see myself on the realtime view.

The issue is that no matter what I do to trigger the transaction tag, no eCommerce transactions are shown in Google Analytics.

Here is what I've tried:

The frustrating part is that I have the GTM preview window open and it looks perfectly like it should work.

This has been going on for days now so it isn't a case of "the data hasn't shown up in GA yet". I am using the right UA tag since both tags reference the sasme onstant GTM variable and since I see myself in realtime the pageview tag uses the right UA and therefore so does the transaction tag. And yes eCommerce is obviously enabled in the view settings.

Upvotes: 1

Views: 1405

Answers (3)

Ryan
Ryan

Reputation: 41

Simply pushing the transaction data to the data layer will not trigger the tracking to work. You need an action such as a pageview to pick up the transaction data and send it.

If you are unable to add the data layer before the GTM snippet, my recommendation would be the following:

  • Convert your code to be in the Enhanced Ecommerce format (provided below)
  • Add a custom event, in this case it is named trackTrans.
  • Add an event tag in GTM, labeled similar to Send Transaction. You can specify whatever values you'd like the for the event category/action/label.
  • In the event tag go to more settings > Ecommerce Features, enable Enable Enhanced Ecommerce Feature and Use data layer
  • Setting the trigger to be a Custom Event and specify trackTrans for the value

  • In your view settings make sure to enbable enhanced ecommerce tracking

    dataLayer.push({
   'ecommerce': {
     'purchase': {
       'actionField': {
         'id': 'T12345',                         // Transaction ID. Required for purchases and refunds.
         'affiliation': 'Online Store',
         'revenue': '35.43',                     // Total transaction value (incl. tax and shipping)
         'tax':'4.90',
         'shipping': '5.99',
         'coupon': 'SUMMER_SALE'
       },
       'products': [{                            // List of productFieldObjects.
         'name': 'Triblend Android T-Shirt',     // Name or ID is required.
         'id': '12345',
         'price': '15.25',
         'brand': 'Google',
         'category': 'Apparel',
         'variant': 'Gray',
         'quantity': 1,
         'coupon': ''         
       }]
     }
  },
  'event' : 'trackTrans'
});

With what I have described above, the page will load then an event will fire and send the ecommerce transaction data with it.

Upvotes: 4

Killerpixler
Killerpixler

Reputation: 4050

I have found a way to make it work. Ryan's answer was close but our experience with using event based triggers was spotty at best. I am now using the following setup that essentially guarantees transaction pickups by GTM unless the code is dynamically injected after page load via JS.

Here is how:

  1. I created a dataLayer Variable which references transactionId and set its default to false
  2. I created a trigger of type Custom Event, set the event to gtm.dom and a filter for the dataLayer variable I created to be not equal to false.

This ensures an actual transaction on the page overwrites the default value of false in that GTM variable and the gtm.dom trigger ensures that all code has loaded.

We have already tested this with clients on varying degrees of awfullness in terms of GTM implementations.

Upvotes: 1

nyuen
nyuen

Reputation: 8907

As per your reference to the Google documentation, you need to

Place this code above the Google Tag Manager container snippet so that the data layer is ready when Google Tag Manager fires the Google Analytics tag asynchronously.

Upvotes: 1

Related Questions