Google analytics track exits within a one-page checkout

Question

I'm using an ecommerce system called NopCommerce that implements a one page checkout system. This page asks users to fill out details like billing address / shipping address etc before taking payment.

The page uses ajax to save these details so the URL doesn't change, there's no internal anchors etc to mark progress.

Does anyone know if it's possible using Google analytics to find out where on this page people are exiting?

I know there are exit reports but they just refer to pages, not areas within pages.

Is this possible and if so how is it implemented?

Answer 1

I do not know Nopcommerce, but looking at the demo it seems the individual steps are loaded via ajax using jquery, which means you can use global ajax event handlers to send a virtual pageview for each checkout step:

$(document).ajaxSuccess(function(event, xhr, settings ) {
  url = settings.url.replace("https://mydomain.com","");
  ga('send', 'pageview', url);
});

Untested, but I'm using something similar for the magento onepage checkout so I'm certain it will work (maybe needs a little tweaking).

In the global ajax handler callback settings.url stores the url that has beed called via ajax and since you pass a path to an Analytics virtual pageview, not the full url, you'd need to remove the protocol and host name from settings.url.