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

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.

​
Step 1: Install Navattic JS

Follow these instructions to install Navattic JS. 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 on this page.

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

​
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. 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 TraitEvent Parameter** in GA**
Project Nameproject__name
Flow Nameflow__name
Step Numberstep__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.
Tip: For the most helpful tracking, give each Project and Flow an informative name. This will help organize your data in Google Analytics.