Subscribe to Events

﻿Event-based analytics platforms are used to analyze how users interact with your website and may receive Navattic events similar to how they receive other website events. 
Navattic demos emit events about user interaction - which step they're on, if they complete a form, if they click a CTA button, etc. When your demo is embedded on a page, our universal event integration allows you to easily send those events to any third-party service that can accept them like Amplitude, PostHog, and Mixpanel. 
Use events-based platforms 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 demos lead to the most conversions? 
Note:  If you're not sure what counts as an event-based platform, they usually:
Ask you to install a script on your website
Track or analyze actions taken by your users
Navattic Events
Event data for each Navattic Product Demo includes: 
Navattic Event Name
Example
Description
View Step
(VIEW_STEP)
﻿Example﻿
A Flow step is viewed.
Start Flow
(START_FLOW)
﻿Example﻿
A user starts a Flow.
Complete Flow
(COMPLETE_FLOW)
﻿Example﻿
A user reached the last step of a flow OR completed a "Complete flow" step
Start Checklist
(START_CHECKLIST)
﻿Example﻿
A user loads a Checklist for the first time.
Open Checklist
(OPEN_CHECKLIST)
﻿Example﻿
A user expands a Checklist.
Close Checklist
(CLOSE_CHECKLIST)
﻿Example﻿
A user clicks "x" to close a Checklist or starts a flow.
Complete Task
(COMPLETE_TASK)
﻿Example﻿
A user completed a Task in a Checklist.
Converted
(CONVERTED)
﻿Example﻿
A user completed a step tagged "Mark as converted".
Navigate
(NAVIGATE)
﻿Example﻿
A user clicked a button with the click action "Navigate to URL".
Identify
(IDENTIFY_USER)
﻿Example﻿
A form has been filled out in the demo that can identify the user.
Engage
(ENGAGE)
﻿Example﻿
A user makes it past the first step of a flow.
The exact event shape is as follows:
JS
{
	// event can be one of:
	// - VIEW_STEP
	// - START_FLOW
	// - COMPLETE_FLOW
	// - START_CHECKLIST
	// - OPEN_CHECKLIST
	// - CLOSE_CHECKLIST
	// - IDENTIFY_USER
	// - CONVERTED
	// - NAVIGATE
	// - COMPLETE_TASK
	type: "VIEW_STEP",
	
	// Current project.
	project: {
		id: "ID_OF_PROJECT",
		name: "NAME_OF_PROJECT",
	},
	
	// Current flow.
	flow: {
		id: "ID_OF_CURRENT_FLOW",
		name: "NAME_OF_CURRENT_FLOW",
	},
	
	// Current step.
	step: {
		name: "NAME_OF_CURRENT_STEP",
		indx: 0, // Steps start counting at 0!
	},
	
	// NOTE: checklist can be undefined if the project
	// has no checklist.
	checklist: {
		id: "ID_OF_CHECKLIST",
		name: "NAME_OF_CHECKLIST",
	},
	
	// Current task (only defined if on checklist).
	task: {
	  title: "TITLE_OF_TASK",
	  id: "ID_OF_TASK",
	}
	
	// List of IDs of completed tasks.
	completions: ["...", "..."],
	
	// URL that the visitor clicked.
	// Only populated if event is NAVIGATE.
	url: "",

	// shows up at https://app.navattic.com/your-workspace/customers/{customerId}
	customerId: "ID_OF_CURRENT_VISITOR",

	// a session is scoped to a browser tab, so any action
	// performed in that tab is tied to a session
	sessionId: "ID_OF_CURRENT_SESSION",
	
	// Technical metadata about the user (ex: browser, device, etc).
	clientSideMetadata: ...,
	
	// Attributes that have been identified from the user, grouped
	// by the source they come from (i.e. "FORM").
	eventAttributes: {
	  // The source can be one of
	  // - FORM
	  // - IDENTIFY
	  // - QUERY_PARAMS
	  // - SHARE_LINK
	  // - ENRICHMENT
	  // - OTHER
	  "FORM": {
  	    // Example attributes.
  	    "user.email": "[email protected]",
  	    "company.fullName": "Steve Jobs"
  	  },
  	  "QUERY_PARAMS": {
  	    // Example attributes.
  	    "utm_source": "linkedin",
  	    ...
  	  },
  	  ...
  	}
}
{
	// event can be one of:
	// - VIEW_STEP
	// - START_FLOW
	// - COMPLETE_FLOW
	// - START_CHECKLIST
	// - OPEN_CHECKLIST
	// - CLOSE_CHECKLIST
	// - IDENTIFY_USER
	// - CONVERTED
	// - NAVIGATE
	// - COMPLETE_TASK
	type: "VIEW_STEP",
	
	// Current project.
	project: {
		id: "ID_OF_PROJECT",
		name: "NAME_OF_PROJECT",
	},
	
	// Current flow.
	flow: {
		id: "ID_OF_CURRENT_FLOW",
		name: "NAME_OF_CURRENT_FLOW",
	},
	
	// Current step.
	step: {
		name: "NAME_OF_CURRENT_STEP",
		indx: 0, // Steps start counting at 0!
	},
	
	// NOTE: checklist can be undefined if the project
	// has no checklist.
	checklist: {
		id: "ID_OF_CHECKLIST",
		name: "NAME_OF_CHECKLIST",
	},
	
	// Current task (only defined if on checklist).
	task: {
	  title: "TITLE_OF_TASK",
	  id: "ID_OF_TASK",
	}
	
	// List of IDs of completed tasks.
	completions: ["...", "..."],
	
	// URL that the visitor clicked.
	// Only populated if event is NAVIGATE.
	url: "",

	// shows up at https://app.navattic.com/your-workspace/customers/{customerId}
	customerId: "ID_OF_CURRENT_VISITOR",

	// a session is scoped to a browser tab, so any action
	// performed in that tab is tied to a session
	sessionId: "ID_OF_CURRENT_SESSION",
	
	// Technical metadata about the user (ex: browser, device, etc).
	clientSideMetadata: ...,
	
	// Attributes that have been identified from the user, grouped
	// by the source they come from (i.e. "FORM").
	eventAttributes: {
	  // The source can be one of
	  // - FORM
	  // - IDENTIFY
	  // - QUERY_PARAMS
	  // - SHARE_LINK
	  // - ENRICHMENT
	  // - OTHER
	  "FORM": {
  	    // Example attributes.
  	    "user.email": "steve@apple.com",
  	    "company.fullName": "Steve Jobs"
  	  },
  	  "QUERY_PARAMS": {
  	    // Example attributes.
  	    "utm_source": "linkedin",
  	    ...
  	  },
  	  ...
  	}
}
﻿
Implementations
Send Navattic events to third-party systems
The installed script has some tools to help your website communicate bi-directionally with the embedded demo. To send Navattic event data to other tools such as PostHog, Amplitude, Mixpanel, or Segment, add a script like the following.
JS
<script>
	navattic.onEvent(function(eventData){
		posthog.capture("navattic_event", eventData); // PostHog example.
		amplitude.track("navattic_event", eventData); // Amplitude example.
		mixpanel.track("navattic_event", eventData); // Mixpanel example.
		analytics.track("navattic_event", eventData); // Segment example.
	});
</script>
<script>
	navattic.onEvent(function(eventData){
		posthog.capture("navattic_event", eventData); // PostHog example.
		amplitude.track("navattic_event", eventData); // Amplitude example.
		mixpanel.track("navattic_event", eventData); // Mixpanel example.
		analytics.track("navattic_event", eventData); // Segment example.
	});
</script>
﻿
Once the JS snippet is installed on your website, you should now see a new event named "navattic_event" in your third-party platform.
Be sure to follow the best practices provided by your third-party platform for analyzing and organizing your events.
Tip: For the most helpful tracking, give each Demo and Flow an informative name. This will help organize your data in third-party platforms.
Send Navattic events to GA4 or Google Tag Manager
Visit these additional setup guides to send events to GA4 (Google Analytics) or Google Tag Manager specifically: 
﻿Google Analytics (GA4)﻿ 
﻿Google Tag Manager﻿ 
﻿

Navattic Event Name	Example	Description
View Step (VIEW_STEP)	Example	A Flow step is viewed.
Start Flow (START_FLOW)	Example	A user starts a Flow.
Complete Flow (COMPLETE_FLOW)	Example	A user reached the last step of a flow OR completed a "Complete flow" step
Start Checklist (START_CHECKLIST)	Example	A user loads a Checklist for the first time.
Open Checklist (OPEN_CHECKLIST)	Example	A user expands a Checklist.
Close Checklist (CLOSE_CHECKLIST)	Example	A user clicks "x" to close a Checklist or starts a flow.
Complete Task (COMPLETE_TASK)	Example	A user completed a Task in a Checklist.
Converted (CONVERTED)	Example	A user completed a step tagged "Mark as converted".
Navigate (NAVIGATE)	Example	A user clicked a button with the click action "Navigate to URL".
Identify (IDENTIFY_USER)	Example	A form has been filled out in the demo that can identify the user.
Engage (ENGAGE)	Example	A user makes it past the first step of a flow.

Did this page help you?

Identify Visitors

Google Analytics (GA4)