Magento Google Analytics Funnel for Tracking Each Step of One Page Checkout

Magento Google Analytics – I have spent the entire afternoon working on a client’s Magento website. As an update to my previous post “Magento One Page Checkout vs. Multipage Checkout“, I needed to set up a Google Analytics funnel to accurately track each step of the One Page Checkout process. Because it obviously only uses one page and AJAX, the default Google Analytics configuration is not able to track each of the six steps of the checkout process to determine where the visitors are abandoning their transactions. Clearly, it is very valuable to have that information available. Luckily for us, we are able to do just that. Here are the steps:

1. Open up the template file /app/design/frontend/default/YOURTEMPLATENAME/template/checkout/onepage.phtml in a text editor or WYSIWYG web editor such as Dreamweaver.

2. Paste the following code to the very bottom of the onepage.phtml file (You may have to replace the quotes in plaintext for it to work, fyi):

<script type=”text/javascript“>
Checkout.prototype.gotoSection = function(section) {
try {
pageTracker._trackPageview(‘<?php echo $this->getUrl(‘checkout/onepage’) ?>’ + section + ‘/’);
} catch(err) { }

section = $(‘opc-‘+section);
section.addClassName(‘allow’);
this.accordion.openSection(section);
};
</script>

3. Save and upload the template file and you are done with the hard part and you will now be able to track the views of each of the six steps!

4. Now if you want to set up the Google Analytics conversion tracking and funnel to determine where the users are dropping off, you can do so by creating a new Goal in Google Analytics and by using the following settings:

Goal Type: URL Destination
Match Type: Head Match
Goal URL: /checkout/onepage/success/

Funnel Steps:

Step 1: /checkout/onepage/
Step 2: /checkout/onepage/billing/
Step 3: /checkout/onepage/shipping/
Step 4: /checkout/onepage/shipping_method/
Step 5: /checkout/onepage/payment/
Step 6: /checkout/onepage/review/

And that’s it!

Comments

4 Responses to “Magento Google Analytics Funnel for Tracking Each Step of One Page Checkout”

  1. Marco on August 20th, 2010 10:49 am

    We have implemented the code as explained but since then no conversions at all are counted within the funnel. Even the E-commerce Overview shows no conversions anymore.
    Any idea what’s wrong? We use two UA-codes on the site. Can this have an impact? Must the code normaly be adapted or can we just copy/paste as shown on your blog?

  2. Humayun on June 9th, 2011 5:37 am

    Thanks… it really worked.
    Just one little issue:

    gotoSection: function(section)
    {
    section = $(‘opc-‘+section);
    section.addClassName(‘allow’);
    this.accordion.openSection(section);
    }
    this function already exists in opcheckout.js which you have overwritten here and added this:
    try {
    pageTracker._trackPageview(‘getUrl(‘checkout/onepage’) ?>’ + section + ‘/’);
    } catch(err) { }

    Question is can we call the original function and just add the extra code there? So that it looks like this:

    {code type=php}

    Checkout.prototype.gotoSection = function(section) {

    // [call to original function]

    try {
    pageTracker._trackPageview(‘getUrl(‘checkout/onepage’) ?>’ + section + ‘/’);
    } catch(err) { }

    };

    {/code}

    The reason is if later on magento makes changes in gotoSection function in opcheckout.js, we won’t have to change it in script.

    Thanks…

  3. Derek Johnson on August 8th, 2011 11:04 am

    Do the URLs show in the address bar or is it all done behind the scenes?

  4. Ben Munk on October 31st, 2011 6:42 am

    @Derek – Its behind the scenes. I just loaded and checked with HTTP Fox – this Firefox addon saved me days of work – its awesome for debugging analytics (once you have it running, search for ‘google’, click QueryString tab, and look for utmp value). For me this showed slightly different (Magento 1.5);

    Step 1: /checkout/onepage/
    Step 2: /checkout/onepage/opc-billing
    Step 3: /checkout/onepage/opc-shipping
    Step 4: /checkout/onepage/opc-shipping_method
    Step 5: /checkout/onepage/opc-payment
    Step 6: /checkout/onepage/opc-review

    I’ll know tomorrow if it worked 🙂

    Thanks

Leave a Reply