Set up Google Tag Manager with GA4

  • Updated

Follow these steps to add Google Tag Manager to your Google Analytics 4 Web Property:

If you already have a Google Tag Manager account set up, see the section below.

Google Tag Manager implementation requires a testing process. Optimizely recommends that you implement Tag Manager on your Sandbox site first and verify accurate tracking of user events before recreating the tracking on your Production site. You must complete the following steps twice: once for Sandbox and once for Production.

Default tags included in Optimizely’s template tag container

This article details a basic setup of Tag Manager and includes a template container with a set of tags that will help you get your Tag Manager site up and running. This section walks through the details of the tags included in that container and refers to the json file entitled Spire-ga4-container.json (the json file for Classic CMS is coming soon).

The Tags provided in the template container are designed to work for the B2B Analytics product. Changes to the CSS may affect the behavior of these tags and should be tested and/or reviewed by your implementation partner or someone knowledgeable about Google Analytics 4 (GA4) before being pushed to production.

Below is the list of self-service tags that are in the template provided by Optimizely and are organized by group for easier identification.

  • Tags related to PageView Navigation  – These tags are maintained in the variables setup called Digital Self Service Pageview Lookup and under the name GA4 – Event – Self-Service.
    • myaccount  
    • catalog  
    • contactus  
    • orders  
    • requestaccount  
    • dealerlocator  
  • Tags related to Lists 
    • create list (named: GA4 – Event – createList)
    • add to list (named: GA4 – Event – addToList)
    • share list (named: GA4 – Event – shareList)
  • Tags related to Orders 
    • quickorder (named: GA4 – Event – QuickOrder)
    • reorder button (named: GA4 – Event – reorderButton)
    • upload order (named: GA4 – Event – UploadOrder)
  • Tags related to Search 
    • search Event (named: GA4 – Event – Search Results)
    • search Autocomplete Event (named: GA4 – Event – Search Autocomplete Results)
  • Tags related to Downloading Content
    • download content (pdf, jpg, xlsx, doc) (named: GA4 – Event – File Download)

Create a Tag Manager account and container

  1. Access Google Tag Manager.
  2. Click Create Account to create a new Tag Manager account.
  3. Enter an Account Name, country, and Container Name for your Tag Manager account. Select Web as the Target platform.
    • An example Account Name would be the name of your website
    • An example Container Name would be “Optimizely Default Spire GA4 Container”
  4. Click Create. Read and accept the Google Tag Manager Terms of Service Agreement. A modal with Install Google Tag Manager instructions displays with information for later.
  5. Copy and paste these snippets for easy access, then close the modal.

Import default tags to your Tag Manager Container

  1. Click Admin on the top menu. 
  2. Go to Container > Import Container. Import the Spire-ga4-container.json file in this article.
  3. Select Existing workspace, and then click on the Default Workspace.
  4. Select Merge and Rename conflicting tags, triggers, and variables. Click Confirm.
  5. Go to Variables > User-Defined Variables.
  6. Search for the Measurement ID and click its name to edit. Under Variable Configuration, ensure that your Measurement ID displays. If not, click the Edit icon, and update the ID to match. Click Save.
  7. Click Submit at the top right. 
  8. Put today's date under Version Name so you can track when these changes were published. Click Publish.
  9. Click Tags in the left menu. Review the list and ensure that there is only one tag with the Google Tag type. There should only be one tag with this type: the tag included in the Optimizely Default Container entitled GA4 - Pageview. Please delete or disable any other tag with this type.

Customers who already have Google Tag Manager set up

If you already have Google Tag Manager set up, follow the step below for B2B Analytics:

  1. Sign in to Google Tag Manager.
  2. Click Variables.
  3. Click New under User-Defined Variables.
  4. Create each of the below variables one at a time and click Save each time.
No. Variable Name Variable Type Data Layer Variable Name
1 dlv - currency Data Layer Variable currency
2 dlv - transaction Products Data Layer Variable transactionProducts
3 dlv - transaction Shipping Data Layer Variable transactionShipping
4 dlv - transaction Tax Data Layer Variable transactionTax
5 dlv - transaction Total Data Layer Variable transactionTotal

Go to Tags and create a new tag:

  • Tag Name – GA4 – Purchase
  • Tag Type – Google Analytics: GA4 Event
  • Configuration Tag – GA4 – Pageview
  • Event Name – purchase

Enter the following Event Parameters:

No. Parameter Name Value
1 transaction_id {{dlv transaction id}}
2 value {{dlv - transaction Total}}
3 tax {{dlv - transaction Tax}}
4 shipping {{dlv - transaction Shipping}}
5 items {{dlv - transaction Products}}
6 currency {{dlv - currency}}

Set eCommerce Transaction Event_GA4 for the Firing Triggers, and click Save.

Json files