​
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 TypesDescription
View StepA Flow step is viewed
Start FlowA user starts a Flow
Complete FlowA user reached the last step of a flow OR completed a “Complete flow” step
Start ChecklistA user loads a Checklist for the first time
Open ChecklistA user expands a Checklist
Close ChecklistA user clicks “x” to close a Checklist
Complete TaskA user completed a Task in a Checklist
ConvertedA user completed a step tagged “Mark as converted”
NavigateA user clicked a button with the click action “Navigate to URL”
EngageA user makes it past the first step of a flow

​
Implementation

Below are the steps to implement NavatticJS with Google Tag Manager.

​
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. Create a custom HTML Google Tag Manager Tag named “Navattic JS Setup” and paste the installation code.

​
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.

​
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.