Set up GA4 tracking via Google Tag Manager

Table of contents

GA4 Technical Implementation

Finally, it’s time to do the job! Let’s jump to the Google Tag Manager, open the container of your office, and create a folder named GA4 to organize your variables, triggers and tags.

1. Set up the Variables

Our setup relies on several variables to extract the correct information from our web pages and send to Google Analytics 4 in the right way.

There are for main variable types that we are using: Constant Variables, DataLayer Variables, Custom Javascript Variables and Lookup Table Variables. We will divide the instructions into each one of these types.

1.1. Constant Variables

Follow the instructions and create the variables below:

[VARIABLE] GA4 ID

  • See the example below:

  • Go to your Google Analytics 4 > Property Settings > Data Stream and copy the Measurement ID:

  • Create a constant type variable

  • Name it: GA4 [NRO_NAME] ID

  • Paste your GA4 Property ID to the Value field (back to this)

  • Save

1.2. DataLayer Variables

We use a lot of DataLayer variables that were previously created in Google Tag Manager due to previous iterations of the global tracking. Follow the instructions under the DataLayer Setup page to create each one of these variables in your container, if you don't have them already.

1.3. Custom Javascript Variables

We often use custom javascript variables to extract specific information from the page through a custom function.

Follow the instructions and create the variables below:

[VARIABLE] CSJ - page_language

  • This variable will help us to extract the HTML Lang attribute from our websites.

  • Create a Custom Javascript Variable

  • Name it: CSJ - page_language

  • Copy the code below and paste it on your variable:

function() {
  'use strict';
  var language=document.documentElement.lang;
  return language;
}

  • Add to the GA4 folder

  • Save

1.4. Lookup Table Variables

We use Lookup Table variables to assign specific values based on certain conditions. These variables help us to keep the setup simple, as we can use the same tags and triggers while sending multiple values to Google Analytics 4.

Follow the instructions and create the variables below:

[VARIABLE] LT - form_plugin

  • We are using a Lookup variable to help us customize the form_plugin value according to the DataLayer Event (input) used as trigger.

  • Create a Lookup Table Variable

  • Name it: LT - p4_form_plugin

  • Define the input variable as: {{Event}}

  • Enter the details in your Lookup Table:

    • Input = dataLayer event name (eg. formSubmission, petitionSignup, GFTrackEvent)

    • Output = plugin or platform name (eg. Hubspot, Gravity Forms)

  • Add to the GA4 folder

  • Save

[VARIABLE] LT - form_goal

  • We are using a Lookup variable to help us customize the form_goal value according to the DataLayer Event (input) used as trigger

  • Create a Lookup Table Variable

  • Name it: LT - form_goal

  • Define the input variable as: {{Event}}

  • Enter the details in your Lookup Table:

    • Input = dataLayer event name (eg. formSubmission, petitionSignup, GFTrackEvent)

    • Output = form type (eg. in Planet4 you can use the variable {{gGoal}} to extract dynamic form type values, in other cases you might want to define a specific value "Petition Signup" per dataLayer event)

    • See example:

  • Add to the GA4 Folder

  • Save

[VARIABLE] LT - OS - engagement_type

  • See the variable below:

  • Create a Lookup Table type variable

  • Name it: LT - OS - engagement_type

  • Setup as follows:

  • Add to the GA4 folder

  • Save

[VARIABLE] LT - OS - signup events

  • See the variable below:

  • Create a Lookup Table type variable

  • Name it: LT - OS - signup events

  • Setup as follows:

  • Add to the GA4 folder

  • Save

2. Set up the Triggers.

We use multiple trigger types to fire specific events to Google Analytics 4 on the right moment. This section is divided by trigger category, follow each one of the steps to make sure you are creating all triggers needed for this setup.

2.1. Scroll Depth Trigger

[TRIGGER] Scroll Depth - wider

  • See the example below:

  • Create Scroll Depth type trigger

  • Name it: Scroll Depth - wider

  • Paste to the Percentages under the Vertical Scroll Depth section: 5,10,15,25,50,60,75,90,100

  • Add to the GA4 folder

  • Save

2.2. Clicks Trigger

[TRIGGER] Click with Category

  • See the example below

  • Create a “Click - All Elements” type trigger

  • Name it: Click with Category

  • Check Some Clicks under the This trigger fires on section

  • Set up like this:

  • Add to the GA4 folder

  • Save

[TRIGGER] Click with Action

  • See the example below:

  • Create a “Click - All Elements” type trigger

  • Name it: Click with Category

  • Check Some Clicks under the This trigger fires on section

  • Set up like this:

  • Add to the GA4 folder

  • Save

2.3. Custom Event Trigger

The custom event triggers are the most used in our setup, they are able to identify when a dataLayer event is fired on a page and trigger a specific tag.

Follow the instructions and create the triggers below:

[TRIGGER] Event is purchase

This trigger is used for the Enhanced E-commerce Tracking.

  • See the example below:

  • Create a Custom Event Type trigger

  • Name it "Event is purchase"

  • Add the event name: purchase

  • Add to GA4 folder

  • Save

[TRIGGER] Event is userLogin

  • See the example below:

  • Create Custom Event type trigger

  • Name it: Event is userLogin

  • Type in under the Event name section: userLogin

  • Add to the GA4 folder

  • Save

[TRIGGER] Event is userLogout

  • See the example below:

  • Create Custom Event type trigger

  • Name it: Event is userLogout

  • Type in under the Event name section: userLogout

  • Add to the GA4 folder

  • Save

[TRIGGER] Event is createContent

  • See the example below:

  • Create Custom Event type trigger

  • Name it: Event is createContent

  • Type in under the Event name section: createContent

  • Add to the GA4 folder

  • Save

[TRIGGER] Event is userAction

  • See the example below:

  • Create Custom Event type trigger

  • Name it: Event is userAction

  • Type in under the Event name section: userAction

  • Add to the GA4 folder

  • Save

[TRIGGER] Event is signUp

  • See the example below:

  • Create Custom Event type trigger

  • Name it: Event is signUp

  • Type in under the Event name section: signUp

  • Add to the GA4 folder

  • Save

[TRIGGER] Event is search

  • See the example below:

  • Create Custom Event type trigger

  • Name it: Event is search

  • Type in under the Event name section: search

  • Add to the GA4 folder

  • Save

[TRIGGER] Event is uaevent and category is Social Share

  • See the example below:

  • Create a Custom Event type trigger

  • Name it: "Event is uaevent and category is Social Share"

  • Add the event name as uaevent

  • Check Some Custom Events under the This trigger fires on section

  • Set up like this:

  • Add to GA4 Folder

  • Save

[TRIGGER] Event is uaevent and category is Like

  • See the example below:

  • Create Custom Event type trigger

  • Name it: Event is uaevent

  • Type in under the Event name section: uaevent

  • Check “Some custom events” and create a setup as follows:

  • Add to the GA4 folder

  • Save

3. Set up the Tags

We are using two types of tags for Google Analytics 4 setup: the Configuration Tag which is triggered in all pageviews and connects the data to the correct GA4 destination, and the Event Tags which are triggered on actions. Follow the instructions in each one of the sections below:

3.1. GA4 Configuration Tag

The configuration tag is the most important in your setup because it informs which is the Google Analytics 4 Data Stream destination that you want to send your data to. Beyond that, the configuration tag also informs which are the key parameters (fields to set and user properties) that will be sent together with all pageviews.

Here's an example of a complete configuration tag created for Planet 4, Hubspot and Open Social:

Follow the instructions below:

  • Create a GA4 Configuration tag type

  • Name it: GA4 Config. Tag

  • Expand Fields to Set and fill them in line with the migration plan:

  • Repeat the same process with the User Properties:

  • Add Trigger in line with the migration plan.

  • Add to the GA4 folder

  • Save

3.2. GA4 Events Tags

As mentioned above, the GA4 Event Tags allow us to send custom events to Google Analytics 4 according to specific actions performed on our web pages. Follow the instructions below to create each one of the global standard event tags:

[TAG] GA4 Event - purchase

  • See the example below:

  • Create a GA4 Event tag type

  • Name it: GA4 Event - purchase

  • Choose the event name: purchase

  • Expand the More Settings option and click on the checkbock "Send Ecommerce Data" and select DataLayer on the dropdown

  • Add add the purchase event trigger:

  • Add to the GA4 folder

  • Save

IMPORTANT: The tag above will extract the values from the standard EEC dataLayer.push tag. Check out the instructions on the section Enhanced Ecommerce Setup to understand how to create and customise this custom tag.

[TAG] GA4 Event - form_submission

We are standardizing all types of form submissions in one GA4 event name = form_submission.

In order to break down our future analysis, we will also add specific parameters to the event tag:

  • form_goal = type of submission (eg. Petition Signup, Newsletter Signup, etc)

  • form_plugin = identifies the plugin or platform used (eg. Hubspot, Gravity Forms, etc).

  • form_id = identifies the ID of the form (eg. Hubspot Form ID or Gravity Forms ID)

  • form_title = identified the title of the form (eg. Hubspot Form Title or Gravity Forms title)

  • form_value = identifies the value of the form (eg. donation value)

Follow the instructions:

  • See the example below:

  • Create a GA4 Event tag type

  • Name it: GA4 Event - form_submission

  • Choose the event name: form_submission

  • Expand Event Parameters and fill them as the example below:

  • Add all form submissions triggers that you use to identify successful signups:

  • Add to the GA4 folder

  • Save

[TAG] GA4 Event - social_share

  • See the example below:

  • Create a GA4 Event tag type

  • Name it: GA4 Event - social_share

  • Choose the event name: social_share

[TAG] GA4 Event - cookie_consent

  • See the example below:

  • Create a GA4 Event tag type

  • Name it: GA4 Event - cookie_consent

  • Choose the event name: cookie_consent

  • Event Parameters and User Properties fill in line with the migration plan.

  • Add Trigger in line with the migration plan.

  • Add to the GA4 folder

  • Save

[TAG] GA4 Event - click

  • See the example below:

  • Create a GA4 Event tag type

  • Name it: GA4 Event - click

  • Choose the event name: click

  • Event Parameters and User Properties fill in line with the migration plan.

  • Add Trigger in line with the migration plan.

  • Add to the GA4 folder

  • Save

[TAG] GA4 Event - scroll_depth

Google Analytics 4 offers built-in tracking or scrolls, but it only tracks when someone scrolls below the 90% mark of the page height. We want to track other thresholds as well (e.g. 25%, 50%, 75%) so we need to set up this event through Google Tag Manager.

  • See the example below:

  • Create a GA4 Event tag type

  • Name it: GA4 Event - scroll_depth

  • Choose the event name: scroll_depth

  • .Event Parameters and User Properties fill in line with the migration plan.

  • Add Trigger in line with the migration plan.

  • Add to the GA4 folder

  • Save

[TAG] GA4 Event - authentication

  • See the example below:

  • Create a GA4 Event tag type

  • Name it: GA4 Global Event - authentication

  • Add to the GA4 folder

  • Save

[TAG] GA4 Event - content_engagement

  • See the example below:

  • Create a GA4 Event tag type

  • Name it: GA4 Global Event - content_engagement

  • Add to the GA4 folder

  • Save

[TAG] GA4 Event - search

  • See the example below:

  • Create a GA4 Event tag type

  • Name it: GA4 Global Event - search

  • Add to the GA4 folder

  • Save

[TAG] GA4 Event - signup events

  • See the example below:

  • Create a GA4 Event tag type

  • Name it: GA4 Global Event - signup events

  • Type into the name field the name of the variable: {{LT - OS - signup events}}

  • Add to the GA4 folder

  • Save

4. Enhanced E-commerce Tracking

There are two instructions below depending on the system you use. Follow the one that most fit your needs:

General Implementation

Setup in Google Tag Manager

For a generic implementation of the Enhanced Ecommerce tracking in Google Analytics 4 we need three things:

  • DataLayer.push script with the purchase event and standard variables

  • Custom event trigger

  • GA4 event tag

Follow the instructions below to implement each one of these items.

1. EEC Standard DataLayer Script

The script below can be implemented directly on the system/page after the donation was successfully confirmed or through a custom HTML tag in Google Tag Manager. 

<script>// Ecommerce GA4
window.dataLayer = window.dataLayer || []
dataLayer.push({
   'event': 'purchase', 
      'ecommerce': {
        'currency': 'CURRENCY_CODE_HERE',
        'value': 'VALUE_AMOUNT_HERE',
        'transaction_id': 'TRANSACTION_ID_HERE',
        'items': [{
          'item_id': 'ITEM_ID_HERE',
          'item_name': 'ONE_TIME_OR_RECURRING'
     }]
    }
});
</script>

For the items array we recommend using the following standards:

  • One-off donations:

    • item_id = 1

    • item_name = one_time_donation

  • Recurring donations:

    • item_id = 2

    • item_name = recurring_donation

⚠️ IMPORTANT: There are many other e-commerce parameters that you can define but were not included in the script above. For example, you may want to use an additional parameter to send information about the payment type used for the donation. See Google's documentation if you'd like to customize it further.

Option A: Implement the script directly on the system

Share the script above with your developer team and ask them to fire the script only after the donation was successfully confirmed.

Option B: Implement the script through a custom HTML tag in GTM

  • See the tag example below:

  • Create a new Custom HTML Tag

  • Name it: dataLayer.push - EEC - purchase

  • Copy and paste the script shared code above

  • Add the trigger that you usually use to identify your successful donations. This will be customized for each NRO. In the example below, we are using a Window Loaded trigger fired on Engaging Networks thank you pages after a successful donation.

  • Save

⚠️ IMPORTANT: If you choose to implement the dataLayer script through the Custom HTML tag in GTM you will need to reference the correct variables in your code to send the right information to Google Analytics. In the screenshot example we are using variables {{variable}} custom for a specific donation platform, but you will need to adapt them to your case.

2. Custom Event Trigger

Check the instructions here

3. GA4 Tag

Check the instructions here

Gravity Forms + Stripe

1. Setup in Gravity Forms

The first step here will be to implement a dataLayer event in the HTML of your confirmation message:

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'formSubmission',
  'gGoal': 'Donation',
  'formPlugin': 'Gravity Forms',
  'formID': '{form_id}', // you can replace that 2 with anything you want. Just make sure it makes sense to you.
  'formTitle': '{form_title}',
  'formValue': '{amount_total:21}'
});
</script>

2. Setup in Google Tag Manager

[TRIGGER] Event is formSubmission + Donation

The purchase event should be triggered whenever event name equals formSubmission and the gGoal variable equals Donation.

  • See the image example below and the following settings:

  • Create a Custom Event type trigger

  • Name it: "Event is formSubmission + Donation"

  • Add the event name as formSubmission

  • Check Some Custom Events under the "This trigger fires on" section

  • Set up like this:

  • Add to GA4 Folder

  • Save

[VARIABLE] CJS - form_value

We need to create some custom variables to extract the donation values from Gravity Forms.

  • See the image example and follow the instructions below:

  • Create a Custom Javascript Variable

  • Name it: CSJ - form_value

  • Copy the code below and paste it on your variable:

function() {
  var dataLayer = window.dataLayer || [];
  var valueString;

  // Loop through the data layer objects to find formValue
  for (var i = 0; i < dataLayer.length; i++) {
    var dlObj = dataLayer[i];
    if (dlObj.hasOwnProperty('formValue')) {
      valueString = dlObj.formValue;
      break;
    }
  }

  // Extract numeric value from string // currency-agnostic
  var regex = /(\d{1,3}(?:[.,]\d{3})*[.,]?\d{0,2})/;
  var match = regex.exec(valueString);
  var strippedValue = match[1];

  // Convert to a number
  var value = parseFloat(strippedValue.replace(',', '.'));

  return value;
}

  • Add to the GA4 folder

  • Save

[VARIABLE] CJS - form_currency

We need to create some custom variables to extract the currency values from Gravity Forms.

  • See the image example and follow the instructions below:

  • Create a Custom Javascript Variable

  • Name it: CSJ - form_currency

  • Copy the code below and paste it on your variable:

function() {
  var dataLayer = window.dataLayer || [];
  var valueString;

  // Loop through the data layer objects to find GFTrackValue
  for (var i = 0; i < dataLayer.length; i++) {
    var dlObj = dataLayer[i];
    if (dlObj.hasOwnProperty('formValue')) {
      valueString = dlObj.formValue;
      break;
    }
  }

  // Extract currency symbol or other characters
  var regex = /^(?:\d+[.,]\d+\s+)(.*)$/;
  var match = regex.exec(valueString);
  var strippedValue = match[1];

  // Convert HTML entity to actual symbol
  var tempDiv = document.createElement('div');
  tempDiv.innerHTML = strippedValue;
  var actualValue = tempDiv.innerText;

  return actualValue;
}

  • Add to the GA4 folder

  • Save

[TAG] dataLayer.push - EEC - purchase

  • See the tag example below:

This tag allows for tracking donations properly in GA4

  • Create a new Custom HTML Tag

  • Copy and paste the code below:

<script>// Ecommerce GA4
window.dataLayer = window.dataLayer || []
dataLayer.push({
   'event': 'purchase', 
      'ecommerce': {
        'currency': '{{CJS - form_currency}}',
        'value': '{{CJS - form_value}}',
        'transaction_id': '',
        'items': [{
          'item_id': '',
          'item_name': 'Donation'
     }]
    }
});
</script>

  • You will notice that our code is referencing the variables we created in previous steps, such as {{CJS - form_currency}} and {{CJS - form_value}}.

  • Add the trigger that we have created in step one to identify successful donations in Gravity Forms:

  • Add to your GA4 folder

  • Save

PreviousSet up the GA4 PropertyNextFAQ

Last updated