Skip to main content
Follow these steps to integrate Navattic JS events with GA4 Logo Google Analytics 4:
1

Install Navattic JS

Follow these instructions to install Navattic JS. This JS snippet should be installed after your existing GA4 tag.
Use these instructions if you are using GTM Logo Google Tag Manager instead.
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.
<script>
	navattic.onEvent(function(eventData){
		gtag("event", `navattic_event`, eventData);
	});
</script>
3

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.
Google Analytics can take 24-48 hours to process data from your website or Navattic demo.
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).
4

Building Custom Reports

To view the specific action, project, flow, or step of a navattic_event, use Event Parameters in Google Analytics 4.
Navattic Event Traitin 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 Demo and Flow an informative name. This will help organize your data in Google Analytics.
⌘I