Google Tag Manager

Overview
Google Analytics 4 (GA4) integration  demo engagement data with your other website event data. This sends Navattic event data such as "step viewed" or "converted" to GA4. 
Once set up, GA4 may be used to answer questions like: 
How many users or sessions engage with my Navattic demo?
Where in my website flow do users engage with my Navattic demos?
Which of my Navattic projects lead to the most conversions? 
Event data for each Project includes: 
Navattic Event Types
Description
View Step
A Flow step is viewed
Start Flow
A user starts a Flow
Complete Flow
A user reached the last step of a flow OR completed a "Complete flow" step
Start Checklist
A user loads a Checklist for the first time
Open Checklist
A user expands a Checklist
Close Checklist
A user clicks "x" to close a Checklist
Complete Task
A user completed a Task in a Checklist
Converted
A user completed a step tagged "Mark as converted" 
Navigate
A user clicked a button with the click action "Navigate to URL" 
Engage 
A user makes it past the first step of a flow
Implementation
Below are the steps to implement embed events with Google Tag Manager. All steps are outlined in this video as well.
Step 1: Create a Tag in Google Tag Manager
Create a tag in Google Tag Manager under the Tags tab. Name the tag "Google Analytics: GA4 Configuration". Make sure to select "Send a page view event when this configuration loads". 
Step 2: Copy the Navattic JS script and add it to a custom HTML GTM tag
In Navattic, navigate to Settings > Navattic JS (link) and copy the installation code snippet. 
Note: make sure you copy the Google Tag Manager version of the installation code.
Create a custom HTML Google Tag Manager Tag named "Navattic JS Setup” and paste the installation code.
GTM Script
﻿
Step 3: Make a Custom Navattic GA4 Event
To create the custom Navattic GA4 event, select "New" in Google Tag Manager > Select Google Analytics: GA4 Event as the Tag Type. The configuration tag should be "Google Analytics: GA4 Configuration" and the Event name should be "navattic_event".
Next, add a Trigger named "Navattic Event".  The Trigger Type is "Custom Event" and the event name should be "navattic_event". Set up This trigger fires on Event equals navattic_event.
Step 4: Add Another Custom HTML tag
Create a custom HTML Google Tag Manager Tag with the following script. Name the tag "Navattic onEvent Handler". This will trigger all events. 
Google Tag Manager
<script>
    navattic.onEvent(function(event){
        dataLayer.push({
          event: "navattic_event",
          data: navattic.flatten(event)
        });
    });
</script>
<script>
    navattic.onEvent(function(event){
        dataLayer.push({
          event: "navattic_event",
          data: navattic.flatten(event)
        });
    });
</script>
﻿
Step 5: Create Custom Variables
By default, Navattic passes through all available events which can be seen in the table here. Custom variables will be used to present the events in GA4.
On the left hand side of Google Tag Manager, select "Variables". Click New > Custom Event. Customize the configuration using the image below as an example. After creating the variable, go to Navattic GA4 Event Tag and add a new Events Parameter. 
﻿
﻿

Navattic Event Types	Description
View Step	A Flow step is viewed
Start Flow	A user starts a Flow
Complete Flow	A user reached the last step of a flow OR completed a "Complete flow" step
Start Checklist	A user loads a Checklist for the first time
Open Checklist	A user expands a Checklist
Close Checklist	A user clicks "x" to close a Checklist
Complete Task	A user completed a Task in a Checklist
Converted	A user completed a step tagged "Mark as converted"
Navigate	A user clicked a button with the click action "Navigate to URL"
Engage	A user makes it past the first step of a flow

Did this page help you?

Google Analytics (GA4)

Workspace Organization