Why checkout step not recorded in the Google Analytics report?

Question

I'm making an enhanched ecommerce tracking with google analytics. I'm following the existing implementation in gtag.js. I have 4 checkout steps including shipping method data, payment method data, pending payment, and also paid (purchase). I've made the codes for each step below:

1. Shipping Method

<script>
    gtag('event', 'set_checkout_option', {
        "checkout_step": 1,
        "checkout_option": "shipping method",
        "value": ""
    });
</script>

2. Payment Method

<script>
    gtag('event', 'set_checkout_option', {
        "checkout_step": 2,
        "checkout_option": "payment method",
        "value": ""
    });
</script>

3. Pending Payment

$("#order-now-action").on('click', function() {
    gtag('event', 'set_checkout_option', {
        "checkout_step": 3,
        "checkout_option": "pending",
        "id": ""
    });
})

This is the checkout funnel that I created in Ecommerce Settings.

And this is a report in the checkout behavior menu. The shipping method is recorded, but why in step 2 (payment method) to step 4 (purchase) is it not recorded?

even though, in the sales performance menu, the transaction is recorded?

for steps 1-3 is in 1 page, while the purchase (step 4) I did on the backend using a single url. Is it because it's on 1 page so it's not recorded?

Answer 1

I'm very confused in solving this problem but I found the right answer why my checkout step is not recorded. This happened because set_checkout_option could not be used multiple times in one page, so I replaced it with the checkout_progress event. Because as in this Measure checkout steps documentation, To measure each subsequent checkout step, send a checkout_progress. I also modified my code a bit to be like this:

1.Shipping Method

<script>
    function checkoutProgressShippingMethodGA() {
        gtag('event', 'checkout_progress', {
            "checkout_step": 1,
            "checkout_option": "Shipping Method",
            "value": ""
        });
    }
    checkoutProgressShippingMethodGA();
</script>

2.Payment Method

<script>
    function checkoutProgressPaymentMethodGA() {
        gtag('event', 'checkout_progress', {
            "checkout_step": 2,
            "checkout_option": "Payment Method",
            "value": ""
        });
    }
    checkoutProgressPaymentMethodGA();
</script>

and tadaaaa... my checkout step has been recorded (**purchase has not been recorded because I have not implemented it on the backend)

Answer 2

Generally, your setup looks fine. I would, however, suggest to do it as shown in Google's documentation: https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce

function onShippingComplete(stepNumber, shippingOption) {
  ga('ec:setAction', 'checkout_option', {
    'step': stepNumber,
    'option': shippingOption
  });

  ga('send', 'event', 'Checkout', 'Option', {
     hitCallback: function() {
       // Advance to next page.
     }
  });
}

But let's debug:

1. Either in the Network tab, or through a debugger extension like adswerve's, make sure you're actually sending the calls to the collect endpoint. Go through the checkout funnel, trigger the events and inspect them. Pay attention to the property id (it's in the tid field of the payload sent to google's collect endpoint)

2. Make sure you're generating reports on the data that has been fully processed by GA, so at least 2-day-old data for non-360 accounts and at least 4 hour-old for 360.

3. Make sure your session is not broken between the first step and the actual purchase. For this, you either have to use the user explorer and actually see where the checkout session breaks for a specific client id. Or track a session id in a custom dimension and see that you can see all the checkout events when inspecting specific session id in a custom report. Session breakage often occurs when the source changes, or when the user id consistency breaks. A good real life example for it would be shopify's checkout being on a different TLD.

4. Make sure you're looking at an unfiltered view just to exclude the possibility of filters interfering with the data and deleting your events.