Google Tag Manager with GA4

Table of Contents

• Prerequisites
• Integration for all Storefronts
• Custom Integration for Individual Storefronts
• Cross-Domain Tracking for Store Builder Library
• Configure your domains in Google Analytics
• Set Up Variables in GTM
• Set Up Configuration GA4 Tag inside GTM
• Set Up GA4 Events Tag
  • Use the FastSpring events
  • Use the GA4 events
• Appendix I

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.

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 Developer Tools > 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.9.2/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.

2. Choose the GA4 property that you want to modify. Then select Data Streams.

3. Choose the data stream to modify.

4. Under the Google tag section, select Configure tag settings.

5. Under the Settings section choose Configure your domains.

6. In the form add a new row with the following data (as the following image):
   a. Match type: Contains
   b. Domain: onfastspring.com

7. 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}}">
</script>
<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 FastSpring	Trigger
FSC-checkoutStep1	Payment Method Selected
FSC-checkoutStep2	Name Entered
FSC-checkoutStep3	Email Entered (Payment Window)
FSC-checkoutStep4	Payment Data Entered
FSC-checkoutStep5	Payment Started
FSC-purchaseComplete	Purchase Complete
FSC-itemRemovedFromCart	Item removed from cart
FSC-detailedItemView	Item details viewed
FSC-promotionView	Related Offers viewed
FSC-promotionClick	Related 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 > Custom 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

Event	Trigger when	CAN BE CREATED
add_payment_info	a user submits their payment information	YES
add_shipping_info	a user submits their shipping information	YES
add_to_cart	a user adds items to cart	YES
add_to_wishlist	a user adds items to a wishlist	N/A
begin_checkout	a user begins checkout	YES
generate_lead	a user submits a form or a request for information	N/A
purchase	a user completes a purchase	YES
refund	a user receives a refund	N/A
remove_from_cart	a user removes items from a cart	YES
select_item	a user selects an item from a list	YES
select_promotion	a user selects a promotion	YES
view_cart	a user views their cart	YES
view_item	a user views an item	YES
view_item_list	a user sees a list of items/offerings	YES
view_promotion	a user sees a promotion	YES