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:

Is there something more I'm missing?

Best. Francesco.

Have you configured your GTM tags to read ecommerce object from the dataLayer? — nyuen
And have you included a custom event in your push ? An event is necessary so your tags are aware of changed data (and of course you need to trigger your tag on each step). — Eike Pierstorff
@nyuen that could be what I'm missing. I mean I've configured on GTM the tag "UA event" to be triggered on the "checkout" and the "checkoutOption" events. Those events are tracked on GA but the funnel is not gonna filled up with trackings. — Francesco Zoccarato
Can you please edit your question with the ecommerce code you are using? Also, where in GA are you checking for this "funnel"? — nyuen
Done! Thank you @nyuen, hope to understand and reply correctly. — Francesco Zoccarato

nyuen nyuen · Accepted Answer · 2016-06-10T13:36:19

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.

Checkout ajax steps tracked with GTM ecommerce enhanced and dataLayer push

1 Answers