Enhanced Ecommerce Tagging via GTM on an Angular JS Site

Question

I have a client that has a 100% angular JS website and we have set up enhanced ecommerce tagging for them via GTM. The challenge we are having is that on an angular JS site, the data layer doesn't clear and refresh on page load because it's technically a one page site (the nature of angular JS). So, we have scenarios where product clicks, add to carts, etc. are getting duplicated because our enhanced ecommerce event tags fire for those actions, and our pageview tag, which is set to fire on history changes, has enhanced ecommerce enabled in order to collect product and promo impressions from the data layer, and is also picking up the product click, add to cart, etc, data from the data layer and is carrying that data to GA again.

Does anyone have any experience with this type of issue and if so, what solution(s) have you developed? I'm finding that enhanced ecommerce data layer code and angular JS do not play nicely together and could definitely use some help!

Thank you in advance!

SHamel SHamel · Accepted Answer · 2015-12-16T14:58:30

After each use of an ecommerce feature, make sure to reset the ecommerce branch of the dataLayer by doing this:

dataLayer.push({'ecommerce': {}});

For example:

dataLayer.push({
   'event': 'checkout',
   'label': 'step 1',
   'ecommerce': {
      'checkout': {
        'actionField': {
            'step': 1
        }
     }
  }
});
dataLayer.push({'ecommerce':{}});

Other option: under Ecommerce Features, Enable Enhanced Ecommerce Features and use a variable instead of the data layer. This way you won't have to reset it.

Enhanced Ecommerce Tagging via GTM on an Angular JS Site

1 Answers