Table of Contents
type:
integration
system:
Google Analytics
name:
Ecommerce Tracking for Google Analytics
description:
Tutorial to set up ecommerce tracking for Google Analytics and FoxyCart
tags:
analytics,
tutorial,
tracking

Google Analytics Ecommerce Tracking

Read This First: Assumptions

  1. We're using ga.js and not urchin.js, because it's way more hip. If you need to use urchin.js, it should be similar to this but there will be a few things you'll have to change.
  2. If you've applied any advanced filters to rewrite your request URIs you'll need to take that into account when setting your goal and funnel. If you don't know what that means, you probably don't have to worry about it, but rewriting the request URI can be useful when you're tracking multiple subdomains in one profile.

Other important Google Analytics stuff

Setup Your Tracking Code

With a Custom Subdomain (ie. secure.yourdomain.com)

  1. Because you're tracking users across multiple subdomains (ie. yourdomain.tld, www.yourdomain.tld, secure.yourdomain.tld) you'll need to change your tracking code slightly: http://www.google.com/support/googleanalytics/bin/answer.py?answer=55532
  2. So your tracking code (for your entire site, not just the FoxyCart pages) should look something like this:
    <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXXX-1");
pageTracker._setDomainName("YOURDOMAIN.TLD");
pageTracker._initData();
pageTracker._trackPageview();
</script>
  3. Follow the steps below.

With a *.foxycart.com Subdomain

  1. We're still working on this one. The GA code messes with FoxyBox a bit, but we're working on a solution. http://www.google.com/support/googleanalytics/bin/answer.py?answer=55532

Setup Everything Else

  1. TESTING: Because Google Analytics doesn't allow you to undo or remove data you've collected, you want to make sure you get it right before you go adding it to your main profile. For this reason, we recommend doing the following steps on a new profile. Call it “Testing” or something, and make sure it's working correctly there before applying it to your main profile, otherwise you'll have a bunch of wrong data throwing off your analytics.
  2. PROFILE: Edit your Profile Settings
    1. Add PHPSESSID,fc_PHPSESSID to the “Exclude URL Query Parameters” in your analytics settings. Details
    2. Set it to “Yes, an E-Commerce Site” and set your currency as desired.
    3. You probably want to set your “Default Page” to index.html or index.php or etc. Make sure you understand what this means, as it affects stuff like yourdomain.com/ as well as yourdomain.com/dir/sub/.
  3. GOAL: Go back to your Profile Settings and click “edit” on one of your four goals. It doesn't matter which, but Goal #1 will show up by default in most of your GA reports, so if this is your only (or your primary) goal, you probably want to set it up as Goal #1.
    1. Make sure it's set to “Active” up top.
    2. Switch the Match Type to “Exact Match”
    3. Enter for your Goal URL: /receipt
    4. Enter a “Goal Name” that makes sense to you, like “Orders”
    5. Go down to Step 1 and enter /cart for the URL and “Cart” for the Name.
    6. Step 2: /checkout for the URL and “Checkout” for the Name.
    7. Hit the “Save Changes” button down at the bottom. (The receipt page is the goal, so you don't need to add it in the steps.)
  4. CART: Edit your cart in the FoxyCart admin, or on your site if you use AutoMagiCache on the cart.
    1. Add the Google Analytics script to the bottom of your cart template as directed in your account. Make sure you actually get the code from your profile, and not the XXXXX code from the documentation. Edit your profile, then hit the “Check Status” link towards the top of the page if you need to get this code again. Use the New Tracking Code (ga.js) code, not the urchin.js code.
    2. Change the bottom line from pageTracker._trackPageview(); to pageTracker._trackPageview(”/cart”);
    3. If you're using FoxyCart with the default “FoxyBox” (Thickbox), which you probably are, we'll need a workaround:
      • Edit your code to look like this:
        <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3634691-1");
pageTracker._setDomainName("YOURDOMAIN.COM");
pageTracker._setAllowAnchor(true);
// Workaround for FoxyCart's "FoxyBox" (Thickbox)
function fc_cart_init() {
	pageTracker._initData();
	pageTracker._trackPageview("/cart");
}
setTimeout( fc_cart_init , 2000 );
// end workaround
</script>
      • The important piece is the stuff in between the Workaround comments, which delays the Google Analytics slightly. The 2000 is 2000 milliseconds (2 seconds). You could probably change the 2000 to 1000 or 1500 if you're concerned that people might close the cart before that time. However, if you set it too low it will error and Google Analytics won't record the page view.
    4. Update your cart template in the FoxyCart admin. (AutoMagiCache → Save or just paste in the new one and save).
  5. CHECKOUT:
    1. Add your GA code to the bottom of your checkout template just like you did with the cart.
    2. Change the bottom line from pageTracker._trackPageview(); to pageTracker._trackPageview(”/checkout”);
  6. RECEIPT:
    1. Set up a receipt template separate from your checkout template if you haven't already done so. It can be identical to your checkout template for all intents and purposes, except for the very bottom GA code.
    2. Change the bottom line from pageTracker._trackPageview(); to pageTracker._trackPageview(”/receipt”);
    3. Beneath your GA script tags, add ^^analytics_google_ga^^. This generates code that tracks the sale, is what actually tracks the ecommerce transaction. (If you're using urchin.js, use ^^analytics_google_urchin^^.)
    4. Your finished code should look something like this: 
      <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXXX-1");
pageTracker._setDomainName("YOURDOMAIN.com");
pageTracker._initData();
pageTracker._trackPageview("/receipt");
</script>
^^analytics_google_ga^^
</body>
</html>

      The ^^analytics_google_ga^^ will output the cart array, as described here. GA will pick up on this automatically.

  7. TEST: This should work, but testing is always required.