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);

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!

Update: Transparent Background PNGs in IE6

This is an update to a previous post I made about Transparent PNGs in IE6. I finally tried out the “IEPNGFIX v2.0” which was supposed to be the only solution I’ve found to support transparent background PNGs and tiling background PNGs in IE6. The other PNG fixes worked just fine for non-background images, but I am happy to report that the IEPNGFIX v2.0 works like a charm! It’s still in Alpha mode but it appears to work just fine with a background PNG image on one of my client’s websites. Woohoo!

Align Image to Bottom of Table Cell in IE with CSS

Sometimes you might set the table cell to “valign=bottom” to place an image at the bottom of a table cell but a space of 1 or 2 pixels is still appearing at the bottom in Internet Explorer. A quick way to fix that is to apply the CSS declaration “vertical-align: bottom;” to the image itself.

JavaScript Generic Form Validation Script

Here’s a simple JavaScript form validation script that is easy to implement.  It’s not rock solid but it’s a decent solution for a lot of sites.

Styling Unordered Lists with CSS

I always seem to forget the steps I take in order to style unordered lists with CSS so I’m outlining the process below so I’ll always have it to check back on for future use. And maybe you’ll find it useful, too.

(Note: I ALWAYS use a “reset.css” stylesheet to strip out all of the browser-default styles. Doing so means that I won’t have to reset those styles in the declarations below.)

Style for UL

padding-left: 10px;

Style for individual listed items

ul.class li{
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
padding-left: 8px;
background-position: 0 12px;
line-height: 20px;
padding-top: 5px;
padding-bottom: 5px;

Reset Reloaded Stylesheet

A global reset.css file is a must for anyone who develops in Cascading Style Sheets. Eric Meyer’s Reset Reloaded will likely fulfill all of your needs.