Collapse Menu
Documentation
FastSpring App
Contact Support

Google Tag Manager with GA4

Table of Contents

This documentation provides implementation instructions and reference materials focused on how to implement Google Analytics 4 (GA4) inside of google tag manager container and using the FastSpring GA events. GA4 is an analytics service that enables you to measure traffic and engagement across your websites and apps.

For more information about the migration from Universal Analytics to GA4 see Make the switch to Google Analytics 4.


Google Tag Manager can be used together with Google Analytics but is a separate tool. You can use Google Tag Manager to inject Google Analytics tracking scripts, but the two can also be used completely separately.

You may need to periodically update your Google Tag Manager settings to stay in compliance with changing browser standards and best practices.

If you are using Google Tag Manager to insert your Google Analytics tracking snippet, do not include your Google Analytics tracking ID in the FastSpring App. This could result in double-counting of events and sales.

Prerequisites

  • Create your Google Tag Manager account and obtain your Google Tag Manager Container ID.
  • Create your GA4 property and obtain your MEASUREMENT ID.
  • Do not set up Google Analytics integration in the FastSpring App or configure cross-domain tracking using plain code in the SBL integration.

Integration for all Storefronts

To set up Google Tag Manager integration for all storefronts:

  1. In the FastSpring App, navigate to Integrations > Extensions > Google Tag Manager.
  2. Click Setup.
  3. Enter your Google Tag Manager Container ID and click Enable.

Custom Integration for Individual Storefronts

Only configure custom Google Tag Manager integration for individual Storefronts if you need to use different IDs for different Storefronts. Otherwise, configure Google Tag Manager integration for all Storefronts following the steps above.

  1. In the FastSpring App, navigate to the Storefront you want to modify and click Settings.
  2. Within the Storefront Settings, click Analytics Integration in the left menu.
  3. In the Google Tag Manager Integration Behavior drop-down, select Use custom Google Tag Manager container ID for this storefront.
  4. Enter your Google Analytics Tracking ID in the Google Tag Manager > Google Tag Manager custom container ID for this storefront field and click Save at the top right-hand corner of the page.

Cross-Domain Tracking for Store Builder Library

Cross-domain measurement is a Google Analytics feature that allows you to see sessions from two related sites (such as your site and fastspring app) as a single session, rather than as two separate ones. This is sometimes called ‘site linking’, and it allows you to more effectively measure the entire customer journey. When using Store Builder Library or a Popup Storefront in your site include the following attribute in the script that loads the FastSpring library: data-decorate-callback=”decorateURL”

Example of loading the FastSpring library with the data-decorate attribute included:

<script
id="fsc-api"
src="https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.7/fastspring-builder.min.js"
type="text/javascript"
data-storefront="yourexamplestore.onfastspring.com/popup-yourexamplestore"

data-decorate-callback="decorateURL">
</script>

Copy and paste the following code into your page:

function decorateURL(url) {
if(window.clsid){
var _pl = '&clientId=' + window.clsid.client_id
+ '&sessionId=' + window.clsid.session_id;

}
return url + '?' + _pl;
}

Configure your domains in Google Analytics

This step is required for Web Storefronts. Enable the cross-domain measurement and further define which links on your site do not trigger Outbound Click events when using enhanced measurement.

  1. Open your Google Analytics account. Go to the Admin menu.
  1. Choose the GA4 property that you want to modify. Then select Data Streams.
  1. Choose the data stream to modify.
  1. Under the Google tag section, select Configure tag settings.
  1. Under the Settings section choose Configure your domains.
  1. In the form add a new row with the following data (as the following image):
    a. Match type: Contains
    b. Domain: onfastspring.com
  1. Repeat the previous steps to also include the domains paypal.com and sofort.com.

Set Up Variables in GTM

Create user-defined variables:

  1. Enter fsc-url as the Variable name.
  2. Choose Data Layer Variable as the Variable Type.
  3. Type fsc-url as the Data Layer Variable Name and choose Data Layer Version 2.
  4. Click Save.
  5. Repeat the steps above for the following variables:
    • fsc-url
    • fsc-referrer
    • fsc-eventAction
    • fsc-eventCategory
    • fsc-eventLabel
    • fsc-eventValue
    • fsc-currency
    • fsc-order-id – Contains the FastSpring order reference ID
    • fsc-order-tax – Contains the tax amount for this order
    • fsc-order-total – Contains the order total
    • fsc-coupon – Contains order coupon
  6. Create the variable “ga4-tracking-id” with Constant as the Variable Type.
  7. In the value field for ga4-tracking-id put your GA4 measurement ID.

Set Up Configuration GA4 Tag inside GTM

This step is required for Popup Storefronts. Create the Google Analytics GA4 Configuration Tag using a Custom HTML tag type:

  1. Inside Google Tag Manager, go to the Tags left menu and after that click the New button.
  2. Choose the tag type Custom HTML
  3. Click triggers, in the Choose a Trigger panel choose “Initialization – All pages”.
  4. In the HTML field paste the following code.
<!-- Google tag (gtag.js) -->

<script async
src="https://www.googletagmanager.com/gtag/js?id={{ga4-tracking-id}}"></sc
ript>
<script>
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
if(!window.clsid){
gtag('config', '{{ga4-tracking-id}}',{
'cookie_flags':'SameSite=None;Secure',
'page_referrer': '{{fsc-referrer}}',
'page_location': '{{fsc-url}}',
});
window.clsid = {client_id:'',session_id:''};
gtag('get','{{ga4-tracking-id}}','client_id',function(r){
window.clsid.client_id = r});
gtag('get','{{ga4-tracking-id}}','session_id',function(r){
window.clsid.session_id = r});
}else{
gtag('config','{{ga4-tracking-id}}', {
'client_id': window.clsid.client_id,
'session_id': window.clsid.session_id,
'cookie_flags':'SameSite=None;Secure',
'page_referrer': '{{fsc-referrer}}',
'page_location': '{{fsc-url}}'
});
}
</script>

Save and put the name according to your naming rules. We recommend “Custom Google Analytics GA4 Configuration” as the name for the tag.

Set Up GA4 Events Tag

FastSpring platforms send to the dataLayer variable a list of events that can be used to obtain the ecommerce data and the different steps in the checkout and purchase event. There are two ways to use this information:

1) Use them directly as they come. In this scenario you can directly use the events in google analytics with their original name (like “FSC-checkoutStep1”).

2) The second scenario is to convert the fastspring events into the standard GA4 events.

The following table shows the FastSpring events push to the dataLayer:

Name of the event sent by FastSpringTrigger
FSC-checkoutStep1Payment Method Selected
FSC-checkoutStep2Name Entered
FSC-checkoutStep3Email Entered (Payment Window)
FSC-checkoutStep4Payment Data Entered
FSC-checkoutStep5Payment Started
FSC-purchaseCompletePurchase Complete
FSC-itemRemovedFromCartItem removed from cart
FSC-detailedItemViewItem details viewed
FSC-promotionViewRelated Offers viewed
FSC-promotionClickRelated Offer Clicked

Use the FastSpring events

  1. Click Tags > New.
  2. Enter FS Events as the tag name or use your naming rules.
  3. Select Tag Configuration > Google Analytics: GA4 Event.
  4. In the Configuration Tag select “None – Manually Set ID”.
  5. Write {{ga4-tracking-id}} for the Measurement ID.
  6. Write {{Event}} for the Event Name.
  7. Expand More Settings > Ecommerce and Select the checkbox for Enable Enhanced Ecommerce Features and Use data layer.
  8. Click Save.
  9. Click within the Triggering area and select New trigger (the plus sign in the top right corner).
  10. Enter the name FastSpring Events.
  11. Click within the Trigger Configuration area and select Other > Custom Event.
  12. Enter .* in the Event name field and select the checkbox for Use regex matching.
  13. Select the radio button for Some Custom Events and then select Event, starts with, and enter FSC-.
  14. Click Save > Save.

Use the GA4 events

You can use the FastSpring events to build new events in GTM. For example, let’s build a purchase event using the “FSC-purchaseComplete” event.

  1. Click Tags > New.
  2. Enter “Purchase Event” as the tag name or use your naming rules.
  3. Select Tag Configuration > Google Analytics: GA4 Event.
  4. In the Configuration Tag select “None – Manually Set ID”.
  5. Write {{ga4-tracking-id}} for the Measurement ID.
  6. Write purchase for the Event Name.
  7. Expand More Settings > Ecommerce and Select the checkbox for Enable Enhanced Ecommerce Features and Use data layer.
  8. Click Save.
  9. Click within the Triggering area and select New trigger (the plus sign in the top right corner).
  10. Enter the name Purchase Event.
  11. Click within the Trigger Configuration area and select Other > Purchase Event.
  12. Enter FSC-purchaseComplete in the Event name field.
  13. Select the radio button for All Custom Events.
  14. Click Save > Save.

You can add Event Parameters for your reports using the fsc variables pushed in the data layer. For a complete list of GA4 events, please review the Google Analytics 4 events reference.

For a complete detail about migrating from Universal to GA4 you can review this link Migrate to Google Analytics 4.

Appendix I

EventTrigger whenCAN BE CREATED
add_payment_infoa user submits their payment informationYES
add_shipping_infoa user submits their shipping informationYES
add_to_carta user adds items to cartYES
add_to_wishlista user adds items to a wishlistN/A
begin_checkouta user begins checkoutYES
generate_leada user submits a form or a request for
information
N/A
purchasea user completes a purchaseYES
refunda user receives a refundN/A
remove_from_carta user removes items from a cartYES
select_itema user selects an item from a listYES
select_promotiona user selects a promotionYES
view_carta user views their cartYES
view_itema user views an itemYES
view_item_lista user sees a list of items/offeringsYES
view_promotiona user sees a promotionYES