Google Tag Manager

Follow these steps to integrate Navattic JS events with Google Tag Manager:

Create and configure the Navattic JS tag

In Google Tag Manager, create a new tag:

Go to Tags → New and name it “Navattic JS”
Under Tag Configuration, select Custom HTML
Navigate to Navattic Settings > Navattic JS and copy the installation code
Paste the code into the Custom HTML field

If you have GA4 + Google Tag Manager integration enabled in Navattic JS configuration, events will be automatically tracked. Otherwise, add this to your installation snippet:

Show push events to dataLayer

<script>
    navattic.onEvent(function(event){
        dataLayer.push({
          event: "navattic_event",
          data: navattic.flatten(event)
        });
    });
</script>

View complete GTM tag code

<script>
    void 0 === window.navatticQueue &&
      ((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 async src="https://js.navattic.com/sdk.js?key=<your_key>"></script>
<script>
    navattic.onEvent(function(event){
        dataLayer.push({
          event: "navattic_event",
          data: navattic.flatten(event)
        });
    });
</script>

Under Triggering, select All Pages or create a custom trigger for specific pages
Click Save

Create a custom event trigger

Set up a trigger to capture Navattic events:

Go to Triggers → New
Under Trigger Configuration, select Custom Event
Set Event name to navattic_event
Under This trigger fires on, select Some Custom Events
Add condition: {{Event}} equals navattic_event
Save the trigger

Create data layer variables

Define variables for the below Navattic event fields:

Variable Name	Type	Data layer variable name
Navattic event type	Data Layer Variable	data.type
Navattic demo name	Data Layer Variable	data.project__name
Navattic flow name	Data Layer Variable	data.flow__name
Navattic step name	Data Layer Variable	data.step__name

Go to Variables → User-Defined Variables → New
For each variable in the table above:
- Set variable name
- Set Variable Type to Data Layer Variable
- Enter the corresponding data layer variable name (e.g., data.type, data.project__name)
Save each variable

These variables will be used in the following step to make the Navattic event data accessible to your GA4 event tag.

Configure GA4 event tag

Create a tag to send Navattic events to GA4:

Go to Tags → New and name it “Navattic event tag”
Under Tag Configuration, select Google Analytics: GA4 Event
Enter your Measurement ID for GA4
Set Event Name to navattic_engagement
Add Event Parameters:

Event Parameter	Data layer variable name
navatticEventType	`{{Navattic event type}}`
navatticDemoName	`{{Navattic demo name}}`
navatticFlowName	`{{Navattic flow name}}`
navatticStepName	`{{Navattic step name}}`

Under Triggering, select the custom event trigger from Step 2
Save the tag

Preview, test, and publish

Click “Preview” in Tag Manager and navigate to a page with a demo.When you engage with the demo, you should see “navattic_event” and “navattic_engagement” events with the variables we defined above populated with the correct values for your demo.

Build

Advanced demos

For Sellers

Share

Analyze

Tracking

Integrations

Workspace

Help