Google Tag Manager

Note: If you use Google Tag Manager for your GA4 tag, you will need to follow a custom installation outlined in this video. The steps are outlined below.
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 Script and Add it to a Custom HTML GTM Tag
Create a custom HTML Google Tag Manager Tag with the following script. Name the tag "Navattic Embed Events Setup".
JS
<script>
window.navatticQueue=[],window.navattic=new Proxy({},{get:function n(t,u,e){return function(){for(var n=arguments.length,t=Array(n),e=0;e<n;e++)t[e]=arguments[e];return navatticQueue.push({function:u,arguments:t})}}});
 </script>
 <script src="https://js.navattic.com/embed-events.js"></script>
<script>
window.navatticQueue=[],window.navattic=new Proxy({},{get:function n(t,u,e){return function(){for(var n=arguments.length,t=Array(n),e=0;e<n;e++)t[e]=arguments[e];return navatticQueue.push({function:u,arguments:t})}}});
 </script>
 <script src="https://js.navattic.com/embed-events.js"></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 lefthand 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