CODEWITHSUNDEEP
checkoutgoogle-tag-manager
RRTW
RRTW

Reputation: 3190

GTM how to track checkout step, my case it pretty special

In previous, I know I can track ecommerce via GA, like this

ga("ec:setAction","checkout", {"step": 1,"option": "don't understand this"});

..

Now I have to transfer from GA to GTM, so I read Google's DevGuide, and tried this

function onCheckout() {
  dataLayer.push({
    "event": "checkout",
    "ecommerce": {
      "checkout": {
        "actionField": {"step": 1, "option": "don't understand this"},
        "products": [{
          "name": "Some pXXn BD",
          "id": "x100-2",
          "price": "29.0",
          "brand": "SOD",
          "quantity": 1
       }]
     }
   },
   "eventCallback": function() {
      document.location = "some_next_page.html";
   }
  });
}

However, I can't use the eventCallback function, because the Next button link in my site was just a simple javascript code like

void(0);

The real page flow was controlled by some external .js file, which I can't modified. So I tried another way, but can't get it work. I still got nothing on checkout tracking...

<script>
dataLayer.push
({
  'event': 'checkout',
  'ecommerce': {'checkout': {'actionField': {'step': 1}}}
});
</script>

nothing on my checkout tracking report :-(

Any suggestions are welcome~

Upvotes: 0

Views: 1674

Answers (2)

faridghar
faridghar

Reputation: 1515

The eventCallback features basically lets you make sure that all the necessary tags have finished firing before the page navigation happens. It's a way to guarantee tag firing.

In your case, you can simply omit the eventCallback from the dataLayer. Of course, this means that there's a small chance that the page navigation will happen before that tag has a chance to fire but this is a very small chance since tags usually fire in a few milliseconds. After you've pushed the above onto the dataLayer, you will of course need to configure a tag in the GTM interface that captures this data and sends it to GA.

So you would execute this code:

<script>
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1},
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   }
  });
</script>

Then you would set up a tag in GTM as follows:

enter image description here

With a trigger as follows:

enter image description here

P.S. The option attribute is used to capture a setting that can be selected by the user for a specific checkout step. For example, in the payment checkout step, the user might select to use cash or credit cart. The checkout option is designed to capture this value.

Upvotes: 1

mrbubu
mrbubu

Reputation: 484

Just don't use eventCallback. It is not necessary to use it if you don't need it in your logic.

Check this for all required variables: https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce

Upvotes: 0

Related Questions