Add analytics and tracking libraries to your FoxyCart store to discover how customers interact with your site.

The Google Tag integration allows you add tracking for Google Analytics 4 or Google Ads (or both) to your store.

• Google Analytics 4 (via gtag.js and GTM)
• Google Ads

• You must be including loader.js (as found on the “Sample Code” section of your store's administration) in your website template (do not include this in your cart, checkout, or receipt template). If you're not sure if you are, you can view your website source to confirm - you should see it included once in your own website's HTML, but not included if you view the source of the full-page cart, checkout or receipt.
• You must include the Google Tag code on your own website, on every page you want tracking to happen, but not on the cart, checkout or receipt template (we include it for you there already). This should take the form of the Google Tag (gtag.js) option. You can see details on that here.

1. On your website, ensure that you are including the Google Tag gtag.js code. You should be either specifying a Tag ID of the format G-123456789, GTM-12345 or AW-123456789, depending if you're tracking Google Analytics (and optionally Ads) or just Google Ads. Note that you should not manually include the Google Tag code on the cart, checkout or receipt.
   If you're using GTM, please review the notes on that below.
2. In the Foxy administration, go to the template configuration, and within the “Configure your third-party analytics” option, enable “Google Tag”.
3. For the “Tag ID”, specify the tag ID for the property you're wanting to track, which should be the same tag ID as you used on your website. If you are integrating GA4, then you will need the gtag G-123456789 tag ID or GTM GTM-123456 tag ID. If you are just wanting to track Google Ads, then your tag ID will look like AW-123456789.
4. You can optionally specify a “Send To” value, if you are tracking with Google Ads, or have added your Google Ads profile as an additional destination to your Google Analytics tag. This will trigger the conversion event to be tracked on the receipt. You can get the “Send To” value from the installation steps for your Google Ads tag for your campaign. Look for the send_to value within the integration code, which will have a format like AW-123456789/sABDCLqU3K2BEJb8cxDE.
5. If you are requiring user consent for tracking, and are not using GTM, you can also check the “Require consent before tracking customers” checkbox. Note that if you enable this checkbox, you need to ensure that you give consent for tracking with custom code. More details on that below.
6. Save the configuration to enable the Google Tag for your site.

• Within your Google Tag configuration, within the “Settings” section, we recommend setting your domains within the “Configure your domains” section. You should add any domains that your Google Tag will be set on, as well as your FoxyCart subdomain (*.foxycart.com) if you're not using a custom subdomain.

The Google Analytics integration tracks the following events:

• page_view
• add_to_cart*
• remove_from_cart
• view_cart
• begin_checkout
• login
• add_shipping_info
• add_payment_info
• purchase

The Google Ads integration tracks the following events:

• conversion

If there are any other events that you want to track, these will need to be handled yourself manually.

Note that for the add_to_cart event, the integration will try to pull out the cart details from the add to cart when it's processed by the Foxy javascript, including support for add to carts that add multiple products at once.

If you have a particularly custom set up or if you're not actually defining a normal add to cart form/URL, and our integration is not able to detect the product, the add_to_cart event will not execute and you would instead need to trigger that manually yourself.

Note also that price option modifiers are currently not taken into account for the add_to_cart event specifically.

As Foxy doesn't manage your website or product catalogue directly, it's hard for us to be able to track all of the ecommerce events that GA4 provides. One in particular, view_item, is quite useful to track for customer journey reporting within GA4, but we don't track that as part of our integration. We would recommend adding that event as a custom event on your website on your product pages for a more complete ecommerce journey within your analytics.

You can see details on the ''view_item'' event on the GA4 documentation here.

As a reference, for the Foxy integration, we pass the following attributes for items in GA4 ecommerce event calls:

• item_name
• item_category
• price
• quantity
• item_id (if the item has a code attribute)

If you prefer to use Google Tag Manager, our integration pushes the events into the dataLayer for you to then utilise in Custom Event tags.

All of the events listed above are supported, and for your tag within GTM, under “More Settings > Ecommerce”, you can simply check the “Send ecommerce data” with the data source set to “Data Layer”. As the data we push into the dataLayer already includes all of the ecommerce data in the format that Google expects, it will automatically carry over for you.

If you prefer to have clean URL's in your analytics (like /cart instead of /cart?fcsid=abc123), then we do also pass a virtual_page_location parameter with all of the events. You can add this as a User-Defined Variable in GTM, using the Data Layer v2 as the source. You can then pass an additional Event Parameter in your Custom Event tags for page_location, with the value being the virtual_page_location variable you created.

Specifically for GTM, there is also one additional custom event for virtual_page_view. This is triggered when the Sidecart is opened, along with when the cart, checkout and receipt are loaded. It's up to you if you want to include this for your set up to track clean URL's for the page views for those aspects as well, instead of the default page view. The dataLayer for this event passes a virtual_page_location parameter with the clean URL, along with a virtual_page_title parameter to match to the page_title for the page view event. Note that for events that occur on your website (for example, for add_to_cart, remove_from_cart or view cart that happen via the Sidecart), the virtual_page_location will be your website URL.

Example of individual tags configured within GTM for the ecommerce events:

Example of the add to cart custom GA4 event tag

Example of the trigger for the custom add to cart event tag

One important note with the GTM integration is that it relies on Googles autoLinker to carry the users session across domains if you're making use of the *.foxycart.com subdomain. If you're performing any custom redirects to the cart or checkout outside of standard Foxy functionality, then this might impact the ability for a customer session to be linked between your domain and the *.foxycart.com store subdomain.

With this in mind, it's important that you set your *.foxycart.com store subdomain as described within the Google Tag Configuration section.

Our gtag.js integration is able to account for this as we can maintain the users session as part of the cart session and use it when initialising the session on the cart/checkout/receipt. For GTM though, we aren't able to force a specific client/session ID to be used by GA from our side.

If you make use of a custom subdomain for your store which matches your website domain, then it's no longer cross-domain tracking, so it will be able to read the cookies fine.

If you enable the “Require consent before tracking customers” checkbox in the Google Tag configuration, then the following default values are set when the tracker is initialised on the full-page cart, checkout and receipt:

gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'wait_for_update': 500
});

It is then up to you to update some or all of those four denied attributes to granted when the user gives permission, like the following. If you use a custom subdomain for your store, you would be able to detect the consent state from your own domain, but if you use a *.foxycart.com subdomain, you would need to seek consent for the cart/checkout/receipt specifically.

gtag('consent', 'update', {
    'ad_storage': 'granted',
    'ad_user_data': 'granted',
    'ad_personalization': 'granted',
    'analytics_storage': 'granted'
});

The default values Foxy sets also sets wait_for_update to 500 (milliseconds), giving you a short window to set the granted state before any tracking takes place.

If you are using GTM, the “Require consent before tracking customers” checkbox won't do anything, but instead you will need to configure consent within your tag manager.

First off, 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.

Within GA4, they have a feature called DebugView which is accessible from the “Property” section of the profile's “Admin”. To have your events appear within the DebugView, you either need to utilise the Google Analytics Debugger Chrome extension, or their Tag Assistant. You can see details on those here.

Once enabled, you can then monitor the DebugView timeline while interacting with your site, adding products to the cart and moving through checkout flow. You should see your normal interactions with the page like page views, scrolling and interactions, along with the events that the Foxy integration also tracks as listed above. The DebugView will also show you what details are passed with the events, including in most cases for the ecommerce based events, the items that were in the cart at that time.

• You must be including loader.js (as found on the 'Sample Code' section of your store's administration) in your website template (do not include this in your cart, checkout, or receipt template). If you're not sure if you are, you can view your website source to confirm - you should see it included once in your own website's HTML, but not included if you view the source of the full-page cart, checkout or receipt.
• Your products will be passed to Google Analytics with an SKU parameter, which is the code parameter in FoxyCart. If your products do not include a code value (as passed in your add to carts) 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 with the https (and not http).

• We strongly recommend setting up a separate Google Analytics property in your account 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 property it may dirty up your data (which you cannot undo).
• This is all for analytics.js and not gtag.js, urchin.js or ga.js, which you can determine by the code that Analytics suggests you insert in your page. If you're still using an older Google Analytics type (like urchin.js or ga.js), we recommend upgrading to the new Universal type.

1. From the “Admin” section of your Google Analytics account, select the “Account” and “Property” you 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.)
2. In the “Tracking Info” section under “Property”, select “Tracking Code”.
3. If you only see the option for the gtag.js within the Analytics administration, you can reference the analytics.js tracking code you will need from this page.
4. Complete the setup as Google Analytics instructs: “Copy and paste it into the code of every page you want to track.” Do not put this code on your FoxyCart cart, checkout, or receipt templates. If you're only using Google Analytics to track FoxyCart transactions, and aren't doing anything else custom with Google Analytics, you can skip the copy/pasting into your own site, and rely on the checkbox in the FoxyCart admin, detailed below.
5. Proceed to the next section.

1. Edit your View Settings in your Google Analytics Settings section. (You can get here by clicking the “Admin” link in the top right, then select your “Account” and “Property” dropdowns.) Select “View Settings” under “View”
2. Add fcsid to the “Exclude URL Query Parameters” in your analytics settings. Details here.
3. Set your timezone and currency as desired.
4. 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 here and here.
5. Click the “Save” button at the bottom.
6. Click the “Ecommerce Settings” on the left. Enable ecommerce, but leave “Enhanced Ecommerce” off. (If you'd like to see this supported, please let us know). Click the “Submit” or “Save” button.
7. Proceed to the next section.

1. Go back a level in the Google Analytics settings (you may need to click the left arrow on the far left edge of the screen) and click 'Tracking Info', then click 'Referral Exclusion List'.
2. Click 'Add Referral Exclusion' and add your website's domain(s). By default, your own website's domain may be present here, but if it's not, you'll need to add it.
3. If you're using a FoxyCart subdomain (like mystore.foxycart.com), click 'Add Referral Exclusion' and enter your store domain and click “Create”. (You can find this in the “store sub domain” value in your FoxyCart admin's “settings” page.) If you're using a custom subdomain like secure.yourstore.com, you don't need to add it there.
4. If you're using a hosted payment option where the customer is redirected to a separate page to complete payment, you will need to add an exclusion for them as well.

Proceed to the next section

1. Go back up a level again (the left arrow at the far left of the screen). Under your property's “View”, click “Goals” and then “Create a goal” or “New Goal”. (Google makes changes to their Analytics interface, so the exact text might be slightly different.)
2. Enter a “Goal Name” that makes sense to you, like “E-commerce Sale” or “Transaction” or etc.
3. Set the “Goal Type” to “Destination” and click “Next Step”.
4. If you want to capture all receipts in this goal no matter how the customer pays
   1. Switch the “Destination” dropdown to “Regular Expression”
   2. Enter the Goal URL: /receipt($|.*_cart|.*_checkout)
5. Otherwise, if you want to capture just those customers paying by credit cards, and use separate goals for other payment methods (which are detailed below these steps)
   1. Switch the “Destination” dropdown to “Equals To”.
   2. Enter for your Goal URL: /receipt
6. Leave the Value switch off. (It will be calculated dynamically.)
7. Turn on the “Funnel” switch and:
   1. Step 1: use “Cart” for the Name and /cart for the Screen/Page. (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.
   2. Step 2: “Checkout” for the Screen/Page and /checkout for the URL.
8. Hit the “Save Changes” or “Create Goal” button down at the bottom. (The receipt page is the goal, so you don't need to add it in the steps.)

If you're using a hosted payment method like PayPal Express Checkout or Amazon, you can create additional goals to track specific conversions for those options.

Name: “Sale (PayPal as Checkout)“
Destination: /receipt_paypal_ec_from_cart
Funnel:

1. Cart, /cart
2. PayPal (Checkout), /paypal_ec_checkout
3. Checkout (Confirmation), /checkout

Name: “Sale (PayPal as Payment Method)”
Destination: /receipt_paypal_ec_from_checkout
Funnel:

1. Cart, /cart
2. Checkout, /checkout
3. PayPal (Payment Method), /paypal_ec_payment

Name: “Sale (Amazon as Payment Method)“
Destination: /receipt_amazon_mws_from_checkout
Funnel:

1. Cart, /cart
2. Checkout, /checkout
3. Amazon (Payment Method), /amazon_mws_payment

If you use other hosted gateways, you can set up goals for them as well, the goal would look like this:

Name: “Sale (NAME as Payment Method)“
Destination: /receipt_CODE_from_checkout
Funnel:

1. Cart, /cart
2. Checkout, /checkout
3. NAME (Payment Method), /CODE_payment

In that gateway, you'd set NAME to be the actual name of the gateway - this is for your reference within Google Analytics. You'd also change CODE to match the code for your gateway:

Proceed to the next section.

1. Head to your store's FoxyCart administration, and to the template configuration page.
2. Enable the 'Configure your third-party analytics' option, and enable 'Google Analytics'.
3. Enter your Google Analytics profile tracking ID into the text field.
4. If you want FoxyCart to include the Google tracking code on your website, and haven't included it manually yourself - check the option to include it here. This option will include the Google default tracking code within the loader.js file you include on your website. If you're manually including the Google Analytics tracking code on your website, leave this option unchecked.
5. Save your updated configuration setting.

First off, 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.

For testing, Google Analytics has a great feature called “Real-Time” which is the first option under “Standard Reports” when looking at an individual analytics profiles reports. Using this section, you can pretty quickly track whether your analytics code is correctly set up. What you'll be doing is switching between Google Analytics Real-Time Overview page and your store as you perform different actions to ensure it's tracking you correctly. If it is, you should see an individual session being tracked as you move throughout the checkout flow - changing pages as you do.

Before starting, 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.

1. Load up your website in one tab and then load up the Google Analytics Real-Time Overview in a second tab. You should see your analytics session tracking that you're looking at your website.
2. Add a product to the cart, loading up the cart and then look back and Google Analytics. You should see it change your single user session to be on the cart.
3. Complete a checkout, confirming after each stage that your Analytics session is tracking you as you go.
4. After completing a checkout, switch to the 'Conversions' tab in the Real-Time section and ensure that your goal has been correctly tracked.
5. Clear your cookies, especially any of the Google Analytics cookies, which are named _utm*.
6. If you're using PayPal Express Checkout or Amazon FPS, 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.
7. If at any point you see multiple sessions in the 'Overview' page for what you're doing, double check that all of the code is inserted for the page that created a new session as detailed above.
8. Once you've tested quite a bit go to your Google Analytics → Conversions → 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. Contact us if you get stuck.
9. Party down! You're done.

Working with Analytics can be a big undertaking at times, and as changes to your set up isn't retroactively applied to previous statistics, can lead to some confusion in your data. We recommend setting up an analytics journal to keep track of any and all changes you make to your analytics profile and tracking code. By doing that, you can quickly compare your statistics to when you applied a certain change to make sure it's working, and possibly explain why the data is different to an earlier time period.

You can find more information on how to add a custom tracking code here: Using Custom Tracking Code