If Website analytics is setup correctly, they can give businesses all the information they need to make important website improvements to increase their e-commerce sales. In this article I’ll show you how to successfully track Magento shopping cart abandonment using Google Analytics for Magento Community Edition.
Magento can track cart abandonment out the box but the information it provides is a limited and isn’t very comprehensive. Using Google Analytics we will be able to see exactly when a customer abandons the checkout process.
Please note: This one works only with Magento’s onepage checkout. I recommend you make a backup of your Magento website prior to following these instructions.
Step 1: Firstly we need to enable Google Analytics in Magento. To do this login to your admin panel, hover over the “System” menu option and click “Configuration”.
Scroll down and click, “Google API” on the left hand settings menu. You want to enable Google Analytics and enter your website tracking code in the box provided.
Step 2: We need to add some JavaScript to the checkout page to trak your visitors checkout process. To do this you need to make a copy of onepage.phtml from the Magento base theme into your theme so we can safely make the necessary changes.
You will need to copy:
/app/design/frontend/base/default/template/checkout/onepage.phtml
to:
app/design/frontend/default/<your-theme-name>/template/checkout/onepage.phtml
Once you have copied the file to your theme you will need to add the following code to the bottom of the file:
<script type="text/javascript">// <![CDATA[
Checkout.prototype.gotoSection = function(section) {
try {
_gaq.push(['_trackPageview', '/checkout/onepage/' + section + '/']);
} catch(err) { }
section = $('opc-'+section);
section.addClassName('allow');
this.accordion.openSection(section);
};
// ]]></script>
Step 3: Now that we’re tracking the visitors checkout progress we now need to setup a goal within Google Analytics. To setup a goal login to Google Analytics and click on “Admin”.
Scroll down and click on your website in the list to take you to the Google Analytics settings for your site.
In the next screen that appears click on your website name and you’ll be taken to your website’s profile page. Click the “Goal” tab.
Step 4: Setup the goal funnel in Google Analytics. The goal URL is where the visitor will be sent after their payment has been processed successfully.
The default Magento URL is /checkout/onepage/success, but this may be different depending on what payment gateway your using.
Google Analytics Funnel Steps:
Step 1: /checkout/cart/
Step 2: /checkout/onepage/
Step 3: /checkout/onepage/billing/
Step 4: /checkout/onepage/shipping/
Step 5: /checkout/onepage/shipping_method/
Step 6: /checkout/onepage/payment/
Step 7: /checkout/onepage/review/
Step 5: Now that we’ve setup our Goal Google Analytics will monitor and track the checkout process. You can test this by adding a product to the cart and going through the Magento onepage checkout process. There is normally a 24 hour delay in Google Analytics so your data won’t appear instantly.
Checkout Abandonment Funnel In Google Analytics
After a few days I logged into Google Analytics and viewed the Funnel Visualisation for my goal (Click Conversions -> Goals -> Funnel Visualization)
We may link to products and online services provided by third-parties. Soe of the links that we post on our site are affiliate links, which means that we receive commission if you purchase the item. We will never recommend a product or service that we have not used ourselves. Our reviews will be honest and we will only recommend something if we have found it useful.
Disclaimer:Lacey Tech Solutions publish blog articles to help small businesses. We are not liable for any damages if you choose to follow the advice from our blog.
I would like to know if anyone has followed these steps and if the above implementation is stable?
Hello Kari
Thank you for your interest in this article. I used this implementation on a Magento website I built not so long ago. I waited 2 months before writing an article about its setup and I can confirm it works well.
If you have any further questions please feel free to ask 🙂
Hi Ben,
Thanks for your post! I would like to implement your solution into my shop but wanted to make sure I do it right.
At the end of onepage.phtml I have the following JavaScript Code:
//<![CDATA[
var accordion = new Accordion('checkoutSteps', '.step-title', true);
getActiveStep()): ?>
accordion.openSection(‘opc-getActiveStep() ?>’);
var checkout = new Checkout(accordion,{
progress: ‘getUrl(‘checkout/onepage/progress’) ?>’,
review: ‘getUrl(‘checkout/onepage/review’) ?>’,
saveMethod: ‘getUrl(‘checkout/onepage/saveMethod’) ?>’,
failure: ‘getUrl(‘checkout/cart’) ?>’}
);
//]]>
This seems to be dealing with the Accordion. Did you mean to just paste your JavaScript code at the end of the existing JavaScript section?
Hi Jonathan
Thank you for taking the time to read my article. Yes you’re correct you add the JavaScript at the bottom of onepage.phtml – I’ve updated the tutorial to include an image of what the end file should look like.
If you need help implementing this into your site feel free to contact me and we can discuss this further.
I have been trying to get this implemented but I’m not getting any results.
As far as I can see I have implemented correctly but in all the implementations I have google they all have an option to select the match type as head match, but this option doesn’t seem to exist in google analytics.
The end of my onepage.phtml
//<![CDATA[
var accordion = new Accordion('checkoutSteps', '.step-title', true);
getActiveStep()): ?>
accordion.openSection(‘opc-getActiveStep() ?>’);
var checkout = new Checkout(accordion,{
progress: ‘getUrl(‘checkout/onepage/progress’) ?>’,
review: ‘getUrl(‘checkout/onepage/review’) ?>’,
saveMethod: ‘getUrl(‘checkout/onepage/saveMethod’) ?>’,
failure: ‘getUrl(‘checkout/cart’) ?>’}
);
//]]>
Checkout.prototype.gotoSection = function(section) {
try {
_gaq.push([‘_trackPageview’, ‘getUrl(‘checkout/onepage’); ?>’ + section + ‘/’]);
} catch(err) { }
section = $(‘opc-‘+section);
section.addClassName(‘allow’);
this.accordion.openSection(section);
};
Hello Mark
Thank you for taking the time to read my article and comment. I’ll email you privately about getting this fixed for you.
Very useful post, thank you. I wish Magento would just include this level of tracking within the core product, but until that happens it’s great to have these instructions.
On a couple of GA-specific points:
The interface for configuring goals seems to be changing at the moment. It looks as if they may have rolled out some changes, then rolled back again. So it may be necessary to use the GA configuration instructions here as the basis for a bit of exploration.
It’s also no longer necessary to wait 24 hours to see data in Google Analytics. It ought to be worth having a look at the funnel reports after a few hours.
And if you want to be sure that the code change on the site itself is working, then use the Google Analytics ‘Real Time’ content reports and use the in-line search to monitor anything containing onepage — you should be able to see the custom pageviews appearing within seconds while you do a test run through the site. The Real Time reports are great for debugging things like this.
Hi Tim
I’m glad you found the article useful and thank you for your detailed comment. I wish Magento had options in the admin area to enable users to track visitor interactions. Google has had the option to track events for sometime and I can’t help but think it would be nice for Magento to provide an admin area that would allow us to track clicks on the key call to actions such as “Add to cart” and “proceed to checkout”. Maybe they will add options for Google Analytics tracking in a future release.
I noticed a few weeks ago that it took less than 24 hours for data to appear in Google Analytics. This a few weeks ago but it would seem that this change wasn’t advertised by Google. I appreciate your comments about using Real Time to monitor interactions with onepage – I hadn’t thought of using that approach. I’ll be sure to update the article to include that.