Checkout ajax steps tracked with GTM ecommerce enhanced and dataLayer push

Question

I'm wondering on how to tracks checkout and checkout steps events on google analytics.

I've a checkout in a single page and each steps is called via ajax requests, so I've already add the "dataLayer.push" functionality for each steps, bringing of course the step number in it.

Now I cannot catch anything on the funnel shown up on google analytics.

The funnel I'm talking about is the "Checkout Behavior Analysis" inside the Conversion -> Ecommerce -> Shopping Analysis.

The ecommerce code I'm using is the GTM one by pushing on dataLayer the checkout event when I'm loading the checkout page, and the checkoutOption event for each checkout ajax step. Once those events are pushed to the dataLayer on GTM I've set up the tag activator on the events to pass the information to google analytics with the universal analytics tag with event feature (not a pageview).

The codes for ajax events I'm pushing are the following.

Checkout Start:

dataLayer.push({
    "event": "checkout",
    "ecommerce": {
        "checkout_option": {
            "actionField": {"step": 1, "option": ""},
            "products": self.datas["checkout_items"]
        }
     }
});

Checkout Billing Address

dataLayer.push({
    "event": "checkoutOption",
    "ecommerce": {
        "checkout_option": {
            "actionField": {"step": 2, "option": ""}
        }
    }
});    

Checkout Shipping Address

dataLayer.push({
    "event": "checkoutOption",
    "ecommerce": {
        "checkout_option": {
            "actionField": {"step": 3, "option": ""}
        }
    }
});    

Checkout Shipping Method

dataLayer.push({
    "event": "checkoutOption",
    "ecommerce": {
        "checkout_option": {
            "actionField": {"step": 4, "option": self.datas["shipping_method"] }
        }
    }
});

Checkout Payment Method

dataLayer.push({
    "event": "checkoutOption",
    "ecommerce": {
        "checkout_option": {
            "actionField": {"step": 5, "option": self.datas["payment_method"] }
        }
    }
});

Checkout Coupon

dataLayer.push({
    "event": "checkoutOption",
    "ecommerce": {
        "checkout_option": {
            "actionField": {"step": 6, "option": self.datas["couponcode"] }
        }
    }
});

Checkout Place Order

dataLayer.push({
    "event": "checkoutOption",
    "ecommerce": {
        "checkout_option": {
            "actionField": {"step": 7, "option": "" }
        }
    }
});

I've read all the enhanced guides like:

• https://developers.google.com/tag-manager/devguide
• https://developers.google.com/tag-manager/enhanced-ecommerce

Is there something more I'm missing?

Best. Francesco.

Answer 1

Make sure that you have configured your tag (whether it's a pageview or event) to read in the dataLayer object whenever you have a checkout event. You would need to check the Enable Enhanced Ecommerce Features and also the Use Data Layer under the Advanced Settings.

Edit: The checkout_option field is only used when you need to provide supplemental information to a checkout step, for example if you want to add a payment method to the payment page.

Each checkout step in your checkout funnel needs to be added like this:

// Step 1
dataLayer.push({
   'event': 'checkout start',
   'ecommerce': {
      'checkout': {
         'actionField': {'step': 1, 'option': 'Visa'},
         'products': // .... products
    }
}

// Step 2
dataLayer.push({
   'event': 'checkout billing',
   'ecommerce': {
      'checkout': {
         'actionField': {'step': 2},
         'products': // .... products
    }
}

etc.

So you aren't actually sending any information for your steps with what you currently have.