« Back to blog

Tracking Magento one page checkout steps using Google Analytics

If your looking for a way to implement funnel tracking for Magento's one-page checkout then the following solution adapted from here is the implementation that I have used on many of accessions. It involves overriding the accordion function of the onepage, whilst that sounds complicated it's very easy to implement.

First copy the following file

/app/design/frontend/base/default/template/checkout/onepage.phtml

and paste it into your own theme folder which should be located at

/app/design/frontend/default/YOURTHEME/template/checkout/onepage.phtml

After you now have a local copy of the template, open it up and locate the line where the accordion is specified

var accordion = new Accordion('checkoutSteps', '.step-title', true);

After identifying the following line copy the following code before the above identified line but still inside the javascript tag

Checkout.prototype.gotoSection = function(section) {
        try {
                _gaq.push(["_trackPageview", "escape($_SERVER['REQUEST_URI']); ?>" + section + "/"]);
        } catch(err) { }
        section = $('opc-'+section);
        section.addClassName('allow');
        this.accordion.openSection(section);
};

So your javascript tag at the bottom of the template should look something along the lines of

<script type="text/javascript">
        Checkout.prototype.gotoSection = function(section) {
                try {
                        _gaq.push(["_trackPageview", "<?php echo Mage::getSingleton('core/url')->escape($_SERVER['REQUEST_URI']); ?>" + section + "/"]);
                } catch(err) { }
                section = $('opc-'+section);
                section.addClassName('allow');
                this.accordion.openSection(section);
        };
        var accordion = new Accordion('checkoutSteps', '.step-title', true);
        <?php if($this->getActiveStep()): ?>
        accordion.openSection('opc-<?php echo $this->getActiveStep() ?>');
        <?php endif ?>
        var checkout = new Checkout(accordion,{
                progress: '<?php echo $this->getUrl('checkout/onepage/progress') ?>',
                review: '<?php echo $this->getUrl('checkout/onepage/review') ?>',
                saveMethod: '<?php echo $this->getUrl('checkout/onepage/saveMethod') ?>',
                failure: '<?php echo $this->getUrl('checkout/cart') ?>'}
        );
</script>

Now finally the last set that you might want to do is set up a goal with the url of /checkout/onepage/success/ and the following Step URLs

  • /checkout/onepage/
  • /checkout/onepage/billing/
  • /checkout/onepage/shipping/
  • /checkout/onepage/shipping_method/
  • /checkout/onepage/payment/
  • /checkout/onepage/review/
  • /checkout/onepage/success/

Any that's how you set up Google Analytics on Magento's one page checkout, if you have any recommendations on anyway to improve this then then please comment and I will update the post accordingly!

| Viewed
times