Google Analytics (GA4)

Beginning on July 1, 2023, Google will replace Universal Analytics (UA) with Google Analytics 4 (GA4). Customers currently using UA integration will need to follow this guide to integrate their demos with GA4. 
Note: A Navattic Form is not required for this integration, although Form details (name, email, company) will be sent to GA4 if included.
Overview
Google Analytics 4 (GA4) integration is used to combine demo engagement data with your other website event data. This sends Navattic event data such as "step viewed" or "converted" to GA4. 
As an events based platform, standalone demos (i.e., demos that are shared directly using a Navattic project share link and not embedded in an iframe on a marketing website) will no longer be able to send data to Google Analytics. A workaround for this would be to embed the Navattic demo onto a landing page, and to perform the following steps on the root level of that page.
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
Since Google Analytics 4 is an event-based platform, it can automatically pick up on Navattic events similar to website events. To connect Navattic events to GA4 you will need to add a snippet of Javascript to your website. 
Note:  For this integration, your demo must be embedded on a landing page with an existing GA4 tag.
Step 1: Install Embed Events
Copy the below snippet and add it below the header of your website. This JS snippet should be installed after your existing GA4 tag. ﻿
Note: If you use Google Tag Manager for your GA4 tag, you will need to follow a custom installation outlined in this video.
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 2: Send Navattic events to GA4
The above script has some tools to help your website communicate bi-directionally with the embedded demo. To send Navattic event data to GA4, add the following script to the <head> right after the script above.
Raw GA4 (No GTM)
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>
﻿
See Navattic Events in GA4
Once the JS snippet is installed on your website, no further configuration is needed in Google Analytics to start seeing Navattic events. You should now see a new event named "navattic_event" under the events sections of GA4.
Note: Google Analytics can take 24-48 hours to process data from your website or Navattic demo. You will not immediately see "navattic_event" in your events table. 
To troubleshoot your integration, use real-time reporting. The event "navattic_event" should appear under the Event count by Event Name widget in real-time reporting. 
GA4 Realtime Report
﻿
Navattic events include all actions a user takes within a demo such as step viewed, flow completed, checklist started, and various click actions (ex. navigate to URL).
To view the specific action, project, flow, or step of a "navattic_event", use Event Parameters in Google Analytics 4. 
Navattic Event Trait
Event Parameter in GA
Project Name
project__name
Flow Name
flow__name
Step Number
step__index
Event Name (View_step, Start_checklist, Navigate, etc.) See Google Analytics (GA4)﻿ for a list of Navattic Events.
type

To build reports using these Event Parameters, you can create a Custom Dimension under the Custom Definitions section of Properties. Below is an example of a Custom Dimension for Navattic Projects. 
GA4 Custom Dimesions
﻿
Tip: For the most helpful tracking, give each Project and Flow an informative name. This will help organize your data in Google Analytics.
﻿

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

Navattic Event Trait	Event Parameter in GA
Project Name	project__name
Flow Name	flow__name
Step Number	step__index
Event Name (View_step, Start_checklist, Navigate, etc.) See Google Analytics (GA4) for a list of Navattic Events.	type

Did this page help you?

Embed Events

Google Tag Manager