====== Store Analytics ====== Add analytics and tracking libraries to your FoxyCart store to discover how customers interact with your site. ===== Google Tag (GA4, Google Ads) ===== The Google Tag integration allows you add tracking for Google Analytics 4 or Google Ads (or both) to your store. ==== Supported Properties ==== * Google Analytics 4 (via gtag.js and GTM) * Google Ads ==== Requirements ==== * 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. [[https://developers.google.com/tag-platform/gtagjs/install|You can see details on that here]]. ==== Configuration ==== The Google Tag integration supports Google Analytics 4 via the gtag ''G-123456789'' tag ID or GTM ''GTM-123456'' tag ID and Google Ads via the ''AW-123456789'' tag ID. If you want to track both GA4 and Ads together, you can do this by adding your Google Ads profile as an additional destination for your GA4 Google Tag. You can [[https://support.google.com/tagmanager/answer/12329709?hl=en|see details on working with the Google Tag and merging tags here]].\\ \\ While Google Tag may also provide a ''GT-123456789'' formatted tag ID, that is not fully supported at this time, and we recommend using one of the ''G-'', ''GTM-'' or ''AW-'' formats. - 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, [[#google_tag_manager|please review the notes on that below]]. - In the Foxy administration, go to the template configuration, and within the "Configure your third-party analytics" option, enable "Google Tag". - 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''. - 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''. - 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. - Save the configuration to enable the Google Tag for your site. **Have you customised your cart, checkout or receipt templates?** The tracking code is added through the custom footer placeholder within the templates. If you've customised them - double check that you've included the custom code placeholders as detailed on the [[v:2.0:templates:intermediate-automagicache#include_custom_code_placeholders|template customisation wiki page]] ==== Google Tag Configuration ==== * 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. ==== Supported Events ==== 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. === * "add_to_cart" event === 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. === "view_item" event === 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 [[https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtag#view_item_details|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) ==== Google Tag Manager ==== This is currently beta functionality. Specifying a ''GTM-'' Google Tag ID will show a warning currently that it's not fully supported - but it is available for use as long as you have reviewed the notes below, especially around cookies and ''*.foxycart.com'' subdomains. If you enable our Google Tag integration with a ''GTM-'' tag ID, note that the integration will include the GTM initialisation code on the cart, checkout and receipt for you. As such, you should **not** include the GTM initialisation code yourself on those pages, either directly in the template or in the configuration header/footer. 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. === GTM Screenshots === Example of individual tags configured within GTM for the ecommerce events: {{ :v:2.0:gtm_1.png?direct&600 |}} Example of the add to cart custom GA4 event tag {{ :v:2.0:gtm_2.png?direct&600 |}} Example of the trigger for the custom add to cart event tag {{ :v:2.0:gtm_3.png?direct&600 |}} === GTM, Cookies and *.foxycart.com subdomains === 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 [[#google_tag_configuration|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 [[v:2.0:custom_domain|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. ==== Consent Mode ==== 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. Foxy does not display any consent prompt to customers automatically - it is up to you to use whatever consent manager you prefer, and to ensure that the ''granted'' state is being set after consent is given. **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. ==== Testing ==== 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. [[https://support.google.com/analytics/answer/7201382?hl=en&utm_id=ad|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. ===== Google Analytics (Universal Analytics) Ecommerce Tracking ===== Google Analytics via their Universal Analytics integration will stop tracking in July 2023. You can instead use the new Google Tag approach detailed above to add tracking with GA4 on your store. ==== Requirements ==== * 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''). ==== Other important Google Analytics stuff ==== * 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. ==== Setting Up Google Analytics ==== === Getting the Tracking Code === - 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.) - In the "Tracking Info" section under "Property", select "Tracking Code". - 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 [[https://developers.google.com/analytics/devguides/collection/analyticsjs/|from this page]]. - 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. - Proceed to the next section. **Using Google Tag Manager?** Instead of using the Analytics tag that is provided by default with Google Tag Manager, create a "Custom HTML" tag, and paste into that the Tracking Code as detailed above. Also, if you include Google Tag Manager on your cart, checkout or receipt templates, ensure you don't include the Analytics tracking code on those pages - we include it for you automatically. === Configuring Your Profile Settings === - 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" - Add ''fcsid'' to the "Exclude URL Query Parameters" in your analytics settings. [[https://support.google.com/analytics/answer/1010249?hl=en-GB|Details here]]. - Set your timezone and currency as desired. - 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 [[https://support.google.com/analytics/answer/1009675|here]] and [[http://www.epikone.com/blog/2006/09/21/google-analytics-configuration-mistake-1-missing-default-page/|here]]. - Click the "Save" button at the bottom. - Click the "Ecommerce Settings" on the left. Enable ecommerce, but leave "Enhanced Ecommerce" off. (If you'd like to see this supported, please [[https://www.foxy.io/contact|let us know]]). Click the "Submit" or "Save" button. - Proceed to the next section. === Excluding Referral Sources === - 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'. - 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. - 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. - 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. ^ Name ^ URL ^ | 2Checkout | ''2checkout.com'' | | Amazon FPS | ''amazon.com'' | | Bitpay | ''bitpay.com'' | | Curbstone | ''c3plp.net'' | | CyberSource Secure Acceptance | ''cybersource.com'' | | DIBS | ''payment.architrade.com'' | | Dwolla | ''dwolla.com'' | | iDEAL Ogone | ''secure.ogone.com'' | | PayPal | ''paypal.com'' | | Skrill | ''skrill.com'' | Proceed to the next section === Creating Your Goals === - 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.) - Enter a "Goal Name" that makes sense to you, like "E-commerce Sale" or "Transaction" or etc. - Set the "Goal Type" to "Destination" and click "Next Step". - If you want to capture all receipts in this goal no matter how the customer pays - Switch the "Destination" dropdown to "Regular Expression" - Enter the Goal URL: ''/receipt($|.*_cart|.*_checkout)'' - 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) - Switch the "Destination" dropdown to "Equals To". - Enter for your Goal URL: ''/receipt'' - Leave the ''Value'' switch off. (It will be calculated dynamically.) - Turn on the "Funnel" switch and: - 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. - Step 2: "Checkout" for the Screen/Page and ''/checkout'' for the URL. - 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.) === Hosted Payment Method Goals === 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. Note that the following isn't required, as the regular expression goal you configured above will catch successful transactions for all payment methods. You only need to set up specific goals as detailed below if you have a specific need to track them individually. == PayPal Express Checkout (Reference Transactions) == Name: "Sale (PayPal as Checkout)"\\ Destination: ''/receipt_paypal_ec_from_cart''\\ Funnel:\\ - Cart, ''/cart'' - PayPal (Checkout), ''/paypal_ec_checkout'' - Checkout (Confirmation), ''/checkout'' Name: "Sale (PayPal as Payment Method)" {{ :integration:analytics_funnel.jpg?direct&400|}}\\ Destination: ''/receipt_paypal_ec_from_checkout''\\ Funnel:\\ - Cart, ''/cart'' - Checkout, ''/checkout'' - PayPal (Payment Method), ''/paypal_ec_payment'' == Amazon Payment == Name: "Sale (Amazon as Payment Method)"\\ Destination: ''/receipt_amazon_mws_from_checkout''\\ Funnel:\\ - Cart, ''/cart'' - Checkout, ''/checkout'' - Amazon (Payment Method), ''/amazon_mws_payment'' == Other Hosted Gateways == 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:\\ - Cart, ''/cart'' - Checkout, ''/checkout'' - 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: ^ Name ^ Code ^ | 2Checkout | ''twocheckout'' | | Amazon | ''amazon_mws'' | | Amazon FPS | ''amazon_fps'' | | Bitpay | ''bitpay'' | | Curbstone | ''curbstone'' | | CyberSource Secure Acceptance | ''cybersource_sa_web'' | | DIBS | ''dibs'' | | Dwolla | ''dwolla'' | | iDEAL Ogone | ''ogone'' | | PayPal (Reference Transactions) | ''paypal_ec'' | | PayPal (Legacy) | ''paypal'' | | Skrill | ''skrill'' | | Stripe Connect | ''stripe_connect_plastic_new'' and ''stripe_connect_plastic_saved'' | Proceed to the next section. ==== Enabling Google Analytics for your store ==== {{ :v:2.0:analytics_template_config.jpg?nolink&350|}} - Head to your store's FoxyCart administration, and to the template configuration page. - Enable the 'Configure your third-party analytics' option, and enable 'Google Analytics'. - Enter your Google Analytics profile tracking ID into the text field. - 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. - Save your updated configuration setting. **Have you customised your cart, checkout or receipt templates?** The tracking code is added through the custom footer placeholder within the templates. If you've customised them - double check that you've included the custom code placeholders as detailed on the [[v:2.0:templates:intermediate-automagicache#include_custom_code_placeholders|template customisation wiki page]] ==== Testing ==== {{ https://skitch-img.s3.amazonaws.com/20101022-ki8kesq7397r7ucs2yjstgr5e5.png?250}} 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. - 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. - 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. - Complete a checkout, confirming after each stage that your Analytics session is tracking you as you go. - After completing a checkout, switch to the 'Conversions' tab in the Real-Time section and ensure that your goal has been correctly tracked. - Clear your cookies, especially any of the Google Analytics cookies, which are named ''_utm*''. - 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. - 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. - 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. [[https://foxy.io/contact|Contact us]] if you get stuck. - Party down! You're done. ==== Tracking Your Changes ==== 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. ===== Using Custom Ecommerce Tracking ===== You can find more information on how to add a custom tracking code here: [[https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code|Using Custom Tracking Code]]