A complete walkthrough for setting up Navattic demo tracking with Google Analytics

If you’re running interactive demos on your site and want to know if they’re actually making a difference, you need to track them well. This guide is for marketers, product folks, and frankly anyone who wants to see real numbers about demo usage in Google Analytics—not just vanity stats from a vendor dashboard.

We’ll walk through the nuts and bolts of wiring up Navattic to Google Analytics. You’ll know exactly what’s happening in your demo, who’s engaging, and if it’s worth the effort. No guesswork, no glossing over the tricky parts.

Why bother connecting Navattic with Google Analytics?

Let’s be honest: Navattic’s built-in analytics are fine, but they’re siloed. If you’re already relying on Google Analytics (GA4, ideally), you want everything in one place—site visits, demo engagement, conversions. That’s how you answer questions like:

  • Do demos actually lead to signups?
  • Are people dropping off halfway through?
  • Which demo steps get the most attention?

With this setup, you’ll see demo actions alongside everything else in GA, so you can compare apples to apples.

What you’ll need before you start

Don’t waste time if you don’t have these in place:

  • A published Navattic demo embedded on your site (not just in draft)
  • Edit access to your website code (or a tag manager like GTM)
  • Google Analytics 4 property already set up and working
  • (Optional, but helps) Google Tag Manager for easier event management

If you’re missing one of these, go get it sorted. Otherwise you’ll end up frustrated halfway through.

Step 1: Understand what’s actually trackable

Before you start pasting code, think about what you want to track. Don’t just send every possible click to GA—it’ll be a mess.

Typical events that matter:

  • Demo started
  • Demo completed
  • Key steps reached (“feature X viewed”)
  • Demo exited early

Navattic can fire these as “events” via JavaScript. You’ll catch them and relay to Google Analytics.

What to skip: Don’t bother tracking every button press or hover. It’s noise. Focus on the milestones.

Step 2: Enable Navattic event callbacks

Navattic provides global JavaScript event hooks. These let you run your own code when someone interacts with the demo.

How it works:

When someone hits a tracked point in your demo, Navattic fires a window-level event you can listen for. So, you add some JavaScript to your site to listen for these events.

Example Navattic event:

js window.addEventListener("navattic", function(e) { console.log(e.detail); // e.g., { type: "demo_started", ... } });

You’ll get a type property (like "demo_started", "demo_completed", etc.) plus some extra info.

Pro tip: Navattic’s docs have a list of all event types. Keep that handy, but don’t overthink it.

Step 3: Send Navattic events to Google Analytics

Now for the glue: when Navattic fires an event, send it to GA4 as a custom event.

If you’re using Google Tag Manager (preferred)

This is way easier and avoids hardcoding GA logic.

A. Push Navattic events to the dataLayer

Add this script before your closing </body> tag (or in a custom HTML GTM tag):

js window.addEventListener("navattic", function(e) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: "navattic_event", navatticType: e.detail.type, navatticData: e.detail }); });

B. Set up a trigger in GTM

  1. Go to Triggers > New.
  2. Choose “Custom Event.”
  3. Set Event Name to navattic_event.

C. Build a GA4 Event Tag

  1. New Tag > GA4 Event.
  2. Configure to send event name as navattic_{{navatticType}} (use the variable from dataLayer).
  3. Add parameters if you want more detail (e.g. demo name, step).

D. Test with Preview Mode

  • Start your demo, check if events fire in GTM’s preview.
  • Make sure they show up in your GA4 > DebugView.

Pro tip: If you’re not seeing anything, check your browser console for errors and make sure your listeners run after Navattic loads.

If you’re not using GTM (direct integration)

You'll write straight JavaScript to trigger GA4 events.

Add this snippet to your site, ideally after both GA4 and Navattic load:

js window.addEventListener("navattic", function(e) { if (typeof gtag === 'function') { gtag('event', e.detail.type, { event_category: 'Navattic Demo', event_label: e.detail.demoName || '', value: e.detail.stepIndex || '', // add more params as needed }); } });

What if you’re using the older Universal Analytics (analytics.js)?
Stop. Google’s cut over to GA4, and UA events won’t be supported much longer. Now’s the time to upgrade.

Step 4: Verify your events in Google Analytics

Don’t trust that things are working—check it.

  1. Open GA4 > Admin > DebugView.
  2. Open your site in a private window (to avoid cached scripts).
  3. Run through your demo.
  4. You should see events like demo_started, demo_completed, etc.

Not seeing them?
- Make sure your code is running after Navattic loads. - Double-check event names match. - Try triggering a manual event to verify your GA setup.

Step 5: Build reports and conversions

Events are useless unless you put them to work.

A. Create Explorations in GA4

  • Go to Explore > Free Form.
  • Add your new Navattic events as dimensions.
  • Slice by traffic source, page path, etc.

B. Set up conversions

  • Under Configure > Events, mark key events (like demo_completed) as conversions.
  • Now you can see if demos actually impact signups or revenue.

C. Tie demo engagement to other actions

  • Compare demo engagement against signups, downloads, whatever else you care about.
  • If you’re feeling fancy, build funnels to see drop-off points inside and after the demo.

What about privacy, consent, and data noise?

GA4 can be a compliance headache. Here’s what matters:

  • Consent mode: If you use a cookie banner, make sure Navattic/GA4 events only fire after consent.
  • PII: Don’t send emails or names in event data. GA will complain (or worse, suspend you).
  • Bot traffic: Navattic demos embedded on landing pages can get a lot of bot hits. Filter out obvious junk in GA4 with segments.

Common mistakes to avoid

  • Tracking too much: If you fire an event for every button, you’ll drown in data.
  • Hardcoding event names: Use variables so you can update demos without code changes.
  • Not testing on production: Staging might behave differently (especially with tag managers or script loaders).
  • Ignoring mobile: Make sure events fire on all devices—Navattic embeds can get weird on mobile.

What not to stress about

  • Real-time dashboards: Fun, but not all that useful. Check event flow weekly, not every hour.
  • Perfection: You won’t get every single event. Focus on the big milestones.
  • 100% attribution: GA is directionally accurate, not gospel truth.

Keep it simple, iterate, and watch the data

You don’t need a PhD in analytics to get value here. Start by tracking only the essentials—demo started, demo completed, and maybe one or two key steps. Watch how people actually use your demo, and tweak your tracking (and your demo) as you learn.

Remember: dashboards don’t close deals. Good demos and clear insight into what’s working will. Keep it lean, and don’t be afraid to ignore the bells and whistles.