BigCommerce Analytics Goal Funnel

Are you losing people at the checkout?

Conversion Optimisation is about getting more of your visitors to buy. Being able to see how your visitors behave during the checkout process can help you uncover issues that cause visitors to leave. Fix those problems and you will get more sales.

Most people using BigCommerce opt for the default Express checkout option that lets customers complete the checkout on a single page. This inline method is meant to perform better than a multipage checkout.

The single page checkout makes tracking visitors a lot harder as tracking is normally based on page views. This article will show a way to get around that so you can track each step of the checkout process.

This tracking is based on using Google Analytics, A Goal and a Goal Funnel. The Goal is to complete a sale and the goal funnel defines the steps people take to get to that goal. Once set up you will be able to see data in Google Analytics that shows you how successful your checkout process is. e.g. Which steps have high drop out rates.

This is advanced stuff and requires editing of the template files. I would recommend this only for someone familiar with html. You may break your checkout process!

I offer a BigCommerce SEO Tune-up Services which includes setting this up for you amongst many other activities.

Updating the Checkout Express Templates

To get started you need to login to BigCommerce and go to the template editor at Design->Edit HTML/CSS. The following goes through the edits you need to make and shows the part of the code where the edits are. Changes are highlighted in red. Note that not all templates are identical so you may need to modify things to do the right edits. I'd recommend you keep a backup of the original just in case.

What we are doing here is creating fake page views for each step of the checkout process. This will enable us to later setup the pages in the funnel.

For the code to work you will need to have Google Universal Analytics setup. If you are using the older code I suggest you get it updated.

checkout_express.html

    ...
<form id="CheckoutNewCustomerForm" action="#" method="post" onsubmit="ExpressCheckout.GuestCheckout(); return false;">
<script>
$("#CheckoutNewCustomerForm").submit(function( event ) {
      ga('send','pageview',{'page':'/checkout-newcustomer-button','title':'Checkout New Customer'});
});
</script>
...	
<form action="#" id="LoginForm" method="post" onsubmit="ExpressCheckout.Login(); return false;">
<script>
$("#LoginForm").submit(function( event ) {
      ga('send','pageview',{'page':'/checkout-returningcustomer-button','title':'Checkout Returning Customer'});
});
</script>
...

Basically, when someone clicks on a button we trigger a Page View before the BigCommerce code is run.

Snippets/ExpressCheckoutChooseAddress.html

<form method="post" action="#" id="New%%GLOBAL_UpperAddressType%%Address" onsubmit="return ExpressCheckout.Choose%%GLOBAL_UpperAddressType%%Address();">
<script>
$("#New%%GLOBAL_UpperAddressType%%Address").submit(function( event ) {
      ga('send','pageview',{'page':'/checkout-address-%%GLOBAL_UpperAddressType%%-button','title':'Checkout Address %%GLOBAL_UpperAddressType%%'});
});
</script>
...
	

Snippets/ExpressCheckoutChooseShipper.html

<form id="OrderSelectShippingForm" method="post" action="#" onsubmit="ExpressCheckout.ChooseShippingProvider(); return false;">
<script>
$("#OrderSelectShippingForm").submit(function( event ) {
      ga('send','pageview',{'page':'/checkout-shipping-button','title':'Checkout Shipping'});
});
</script>
...

	

Snippets/ExpressCheckoutConfirmation.html

<form method="post" action="%%GLOBAL_ShopPath%%/checkout.php" id="OrderConfirmationForm" onsubmit="return ExpressCheckout.ConfirmPaymentProvider()">
<script>
$("#OrderConfirmationForm").submit(function( event ) {
      ga('send','pageview',{'page':'/checkout-confirmation-button','title':'Checkout Confirmation'});
});
</script>
...

	

Setting up the Goal and Funnel

In Google Analytics select the Admin option and find your way to the Goals tab for the relevant Website Profile. Here you want to add the following Goal:

Support this work
I'd like to buy Tony a...

Goal NameOrder
Goal TypeURL Destination
Goal URL/finishorder.php
Match TypeHead Match
Case SensitiveNo
Goal Value1
Use funnelYes

Then fill in these funnel values

Step 1/cart.phpCart
Step 2/checkout.phpCheckout
Step 3/checkout-newcustomer-buttonNew Customer Button
Step 4/checkout-returningcustomer-buttonReturning Customer Button
Step 5/checkout-address-Billing-buttonAddress Billing Button
Step 6/checkout-address-Shipping-buttonAddress Shipping Button
Step 7/checkout-shipping-buttonShipping Button
Step 8/checkout-confirmation-buttonConfirmation Button

Once this is all setup you can monitor customers progress via Conversions->Goals->Funnel Visualisation

Please provide feedback if you have any issues.