---- dataentry ---- type : integration # do not change this line supports-foxycart-version-from : 0.7.0 # Minimum required FoxyCart version for this to work supports-foxycart-version-to : # Last FoxyCart version that supports this (leave empty if unknown) systems : Google Analytics (Asynchronous) # the system(s) that the integration is for, separated with commas if more than one name : Ecommerce Tracking for Google Analytics (Asynchronous) # the name of the integration description : Tutorial to set up ecommerce tracking for Google Analytics and FoxyCart tags : analytics, tutorial, tracking # tags, separated by commas. don't include the "system" here. date_dt : 2010-10-19 # the date in YYYY-MM-DD format version : # if you have a version for your code, enter it here developer_url : http://www.foxycart.com/ # if you'd like a link back to your site, stick it here ---- **Using FoxyCart 2.0?** Google Analytics is now a configuration option within your store's administration. Take a look at [[v:2.0:analytics|Store Analytics]] for more information. ====== Google Analytics Ecommerce Tracking ====== ===== Read This First: ===== **You //probably// don't want to be at this page!** Unless you're on a very old Foxy account, you'll want to use [[v:2.0:analytics|these docs over here]]. It's considerably easier and more powerful in our latest release. === Assumptions === - The instructions and code below is current as of FoxyCart v0.7.0 and Google Analytics as of 2010-10-19. If you notice things that should be changed please let us know on [[http://forum.foxycart.com/|our forum]]. - 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. === Requirements === * Your products should use the ''SKU'' parameter in Google Analytics, which is the ''code'' parameter in FoxyCart. If your products do not include a ''code'' value (as passed to FoxyCart) FoxyCart will attempt to generate one from the ''name'' attribute, but FoxyCart will not take into account duplicate product names, which can clobber your data. If you are not using the ''code'' parameter for your products, this Google Analytics tracking may not work correctly. * All your add-to-cart links and forms must point to ''https://your_foxycart_domain'' and not ''http://your_foxycart_domain''. * You must be using either ''foxycart.colorbox.js'' (the default behavior) or ''foxycart.js'' in your website template (do not include this in your cart, checkout, or receipt template). If you don't know what you're using, you're probably using ''foxycart.colorbox.js'' and don't have to worry, but you can view your template source to confirm. The code below assumes that ''fcc'' has been declared as a ''new FC.client'', so if you're using ''foxycart.raw.js'' you'll need to create ''fcc'' or modify the ''FC.ga'' object accordingly. === Other important Google Analytics stuff === * We strongly recommend setting up a separate Google Analytics profile to test with. This setup can be tricky, it can't be confirmed immediately because Google Analytics has a delay on reporting, and if you use your primary profile it may dirty up your data (which you cannot undo). * [[:integration:googleanalytics:campaign_tracking|Tracking your banner ads and email marketing links]]. Very cool, and you should definitely do it if you're going to do anything described below. * This is all for ''ga.js'' and not ''urchin.js''. If you need to use ''urchin.js'' it should be similar to this, but the ''urchin.js'' Google Analytics code is deprecated at this point so you'll have to adapt these instructions as necessary. === Known Issues and Limitations === * This code may not work correctly if you're doing direct-to-checkout (''cart=checkout'') links originating from outside the site being tracked by Google Analytics. For instance, if you have ''cart=checkout'' links in an email, the referrer or campaign may not be maintained. If this is an issue for you please [[http://forum.foxycart.com/|let us know]]. === Changes To This Page === * 2011-08-08: Critical change to the include code. Details on [[http://forum.foxycart.com/comments.php?DiscussionID=4924&page=1#Item_7|our forum]]. The important pieces are:On the cart, change this line: window.location.hash = fc_json.custom_fields['ga']; to this: window.location.hash = fc_json.custom_fields['ga'].replace( /\&/g, '&' ); And this line: var href_link = $(this).attr('href') + fc_json.custom_fields['ga']; to this: var href_link = $(this).attr('href') + fc_json.custom_fields['ga'].replace( /\&/g, '&' ); On the checkout, change this line: window.location.hash = fc_json.custom_fields['ga']; to this: window.location.hash = fc_json.custom_fields['ga'].replace( /\&/g, '&' ); On the receipt, change this: window.location.hash = fc_json.custom_fields['ga']; to: window.location.hash = fc_json.custom_fields['ga'].replace( /\&/g, '&' ); This has been changed in all the examples below. ===== Setting Up Google Analytics ===== === Getting the Tracking Code === {{ http://img.skitch.com/20101019-8yidjdi9x6yq118kmpf2n9n9tm.png?250}} - From your "Overview" page, click the "Edit" link for the profile your want to add tracking to. (You may want to create a new profile to test with, so as not to dirty up your real account with test data.) - In the "Tracking Code" section (click the "Check Status" link to get there with an existing account)... * If your cart and checkout are at something like ''example.foxycart.com'', select the "Multiple top-level domains" radio button, as shown on the screenshot to the right. * If your cart and checkout are at a custom subdomain, something like ''secure.example.com'', select the "One domain with multiple subdomains" radio button. - Complete the setup as Google Analytics instructs: "Copy the following code, then paste it onto every page you want to track immediately before the closing '''' tag." Do not put this code on your FoxyCart cart, checkout, or receipt templates. - We'll refer back to this block of code as **the main Google Analytics code block**, so make a mental note that this is what we're talking about. - Proceed to the next section. === Configuring Your Profile Settings === - Edit your Profile Settings in your Google Analytics Settings section. (You can get here by clicking the "Edit" link to the right of the profile name from your analytics dashboard, then click the "Edit" link to the right of the "Main Website Profile Information" heading.) - Add ''fcsid'' to the "Exclude URL Query Parameters" in your analytics settings. [[http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55499|Details here]]. - Set it to "Yes, an E-Commerce Site" and set your currency as desired. - Set your timezone as necessary. - You may want to set your "Default Page" to ''index.html'' or ''index.php'' or etc. But make sure you understand what this means, as it affects stuff like ''yourdomain.com/'' as well as ''yourdomain.com/dir/sub/''. More info [[http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=32995|here]] and [[http://www.epikone.com/blog/2006/09/21/google-analytics-configuration-mistake-1-missing-default-page/|here]]. - Proceed to the next section. === Creating Your Goals === - Go back to your Profile Settings and click "Add goal" on one of your four goal sets. 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 in set #1. - Enter a "Goal Name" that makes sense to you, like "E-commerce Sale" or "Transaction" or etc. - Make sure it's set to "Active" up top. - Set the "Goal Type" to "URL Destination". - Switch the Match Type to "Exact Match" or "Equals To" depending on the options you see. - Enter for your Goal URL: ''/receipt'' - Create a funnel for this Goal: - Step 1: use ''/cart'' for the URL and "Cart" for the Name. (You won't have this step if you are using "direct to checkout" with the parameter "cart=checkout"). Do not check the "required step" checkbox, as there are situations where the cart can be skipped. - Step 2: ''/checkout'' for the URL and "Checkout" for the Name. - 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.) {{ https://img.skitch.com/20110804-mb7c4w848thcb77njswc3k7j85.png}}If you're using PayPal Express Checkout, you can create two additional goals. We'll call them "Sale (PayPal as Checkout)" and "Sale (PayPal as Payment Method)". Create them the same as above, but for "Sale (PayPal as Checkout)" set the funnel like this: - ''/cart'', Cart - ''/paypal_checkout'', PayPal (Checkout) - ''/checkout'', Checkout (Confirmation) And for "Sale (PayPal as Payment Method)" set the funnel like this: {{ https://img.skitch.com/20110804-j8b6u8f55nxj834u5mxsi6i3nf.png}} - ''/cart'', Cart - ''/checkout'', Checkout - ''/paypal_payment'', PayPal (Payment Method) Proceed to the next section. ===== Setting Up Your Site ===== - On your own site, add the following //below// your GA script tags: * In case you're wondering... The key is that we want to keep the FoxyCart session up to date with the GA session data. The code above basically tells Google Analytics to track a "pageview" for "/cart" when a cart request is made. It also pushes the Google Analytics cookies into the FoxyCart session so the GA session can be maintained between your own site's domain and your site's FoxyCart domain. * Also note that this line replaces the need to set up crosslinks/forms as Google describes in this [[http://www.google.com/support/analytics/bin/answer.py?hl=en_US&answer=175538&utm_id=ad|article on tracking multiple domains]]. The JSONP code that we'll use throughout the cart-checkout-receipt process ensures that the Foxycart session has the correct GA session values. - Do not put this code in your cart, checkout, or receipt templates. - Proceed to the next section. ===== Setting Up Your FoxyCart Templates, The Easy Way ===== This section includes "the easy way" for getting Google Analytics going. It doesn't include the full "why", but if you just want to copy and paste, follow the steps below. Copy the code, paste it into the appropriate template (either in FoxyCart's admin directly, or on your system that FoxyCart is template-caching), and change the ''XXXXXXXX-X''. NOTE: YOU MUST CHANGE THE XXXXXXXX-X IN ALL LOCATIONS TO YOUR UA CODE! === The Cart Template === === The Checkout Template === === The Receipt Code === ^^receipt_only_begin^^ ^^analytics_google_ga_async^^ ^^receipt_only_end^^ === Test === Once you've replaced all the ''XXXXXXXX-X'' in the copy/paste code above and got it successfully saved as your FoxyCart templates, proceed to [[#testing|test things out]]. ===== Setting Up Your FoxyCart Templates, The Full Details ===== This section includes the details that "the easy way" above skips over. If you've already done the above "easy way" section you can safely skip down to [[#testing|the testing section]]. === The Cart Template === - Copy the main Google Analytics tracking code used from above and paste it above the closing '''' tag in your cart template. This can be directly in your [[https://admin.foxycart.com/|FoxyCart admin]] or (preferably) in your cart template on your server that you will load into FoxyCart via FoxyCart's template caching functionality. - Remove or comment out the ''_gaq.push(['_trackPageview']);'' line. We're tracking it manually already. (It's not very reliable when called inside an iframe loaded from a separate domain, in case you're wondering.) - Add the following code //above// the Google Analytics '' - Add the following //below// the Google Analytics closing '''' tag on your cart template. - Proceed to the next section. === The Checkout Template === - Copy the main Google Analytics tracking code used from above and paste it above the closing '''' tag in your checkout template. This can be directly in your [[https://admin.foxycart.com/|FoxyCart admin]] or (preferably) in your checkout template on your server that you will load into FoxyCart via FoxyCart's template caching functionality. - Find this line:_gaq.push(['_trackPageview']); and change it to this: _gaq.push(['_setAllowAnchor', true]); _gaq.push(['_trackPageview', '/checkout']);Notice that we added a line there. That's very important. - Add the following code //above// the Google Analytics '' - Add the following //below// the Google Analytics closing '''' tag on your cart template. - Confirm that the entire section looks something like this: You could copy this entire block, but you'll need to replace the XXXXXXX-X with your own account number. - Proceed to the next section. === The Receipt Template === - Repeat steps 1, 2, and 3 from the checkout template above but on the receipt template. - Change the ''_gaq.push(['_trackPageview', '/checkout']);'' to ''_gaq.push(['_trackPageview', '/receipt']);'' - Add the following 3 lines beneath the main Google Analytics code:^^receipt_only_begin^^ ^^analytics_google_ga_async^^ ^^receipt_only_end^^ - Confirm that the entire section looks something like this: ^^receipt_only_begin^^ ^^analytics_google_ga_async^^ ^^receipt_only_end^^ You could copy this entire block, but you'll need to replace the XXXXXXX-X with your own account number. - Proceed to the next section ([[#testing|Testing]]). ===== Testing ===== {{ http://img.skitch.com/20101022-ki8kesq7397r7ucs2yjstgr5e5.png?250}} - We strongly recommend creating a new profile in Google Analytics to test with. That way you don't have to worry about running 100 transactions and completely destroying the accuracy of the analytics, which is the entire point. - To test, try clearing your browser's cookies (at least for the domains in question: your site domain and FoxyCart.com) and preferably using a browser that you don't use to develop in. So if you use Firefox to administer your site through a CMS and to login to the FoxyCart admin, try testing in Chrome or Safari. The goal is to pretend you're a normal customer. - Try adding something to your cart and proceeding through and completing a checkout. - Clear your cookies, especially any of the Google Analytics cookies, which are named ''_utm*''. - Try adding something to your cart a few times. Don't go to the checkout. - Clear your cookies as before. - Try adding something to your cart then going to the checkout. Go back to the site, add something else, go back to checkout, but don't checkout. - Clear your cookies as before. - If you're using PayPal Express Checkout, try testing that a few times both from the cart and from the checkout. Go all the way through, stop before completing, bail out on the PayPal end of things, etc. - Once you've tested quite a bit go to your Google Analytics -> Goals -> Funnel Visualization. It should hopefully look something like the image to the right. The key is that the numbers in between the steps are not zero. If you have values there it's tracking the user through the steps, indicating that the Google Analytics info is being passed correctly across domains. If you have zeroes in there, go back through the steps to ensure you have all the code inserted as it should be. Post on [[http://forum.foxycart.com/|our forum]] if you get stuck. - Party down! You're done. === Checking Cookies === It's often difficult to troubleshoot because it takes upwards of four hours for any transactions to appear in Google Analytics. So if you set up FoxyCart to be tracked in Google Analytics, and you try a few test transactions, it will take at least a few hours before you can see if things are working correctly. There's a faster way: you can look directly at the cookies set by Google Analytics. GA sets cookies named ''utma'', ''utmb'', ''utmc'', and ''utmz''. Each has a "host" parameter as well as a value. See [[http://www.randycullom.com/chatterbox/archives/2008/10/google_analytic.html|a detailed description]] of the information stored in these cookies. The easiest way to approach this is to view the cookies directly in your browser. Clear out the cookies for your domain, making sure to delete all the ''utm*'' cookies as well as any ''fcsid'' cookies. (If you're using Firefox, you can install Chris Pederick's [[http://chrispederick.com/work/web-developer/|Web Developer Toolbar]] for Firefox, which is amazing, and allows you to clear cookies for a domain (among other things.) Make sure you clear out the ''utm*'' cookies both for your domain //and// for your store's FoxyCart domain. So, ''example.com'' and ''example.foxycart.com''. Otherwise you'll get goofy results. {{ http://img.skitch.com/20101022-jre55ca7bg27sr79kdqjjyr9sn.png?250}} Once you have your cookies cleared, load up a page with a FoxyCart add-to-cart link or form. See what cookies were set. You should see at least an ''fcsid'' cookie and 4 ''%%__%%utm*'' cookies. Take a look at the data in ''%%__%%utma''. Now add something to your cart and proceed through to checkout. View your cookies again. Check the ''%%__%%utma'' for the FoxyCart domain, then compare it to the ''%%__%%utma'' at your domain. They should be identical, or close to identical. If they're radically different, it's not working. Take a look at the image to the right for a screenshot of what it looks like in Firefox on OS X. (Go Preferences -> Privacy (Use constom settings for history) -> Show Cookies. It'll actually show them to you as they're set, which is very handy.) You can also take a close look at the value for the ''%%__%%utmz'' cookie. This cookie encodes all the essential details of how a visitor came to the site, such as referring site or search keyword. This is the data that you want to see tracked all the way to your final order receipt page. That cookie should contain the same info for both your domain (like ''example.com'') and for your store's FoxyCart domain (like ''example.foxycart.com'').