Connect to tracking scripts you already have installed.
Once you’ve installed Navattic JS, you can connect to any tracking script you already have installed on pages with Navattic JS by subscribing to events.
Any tracking script
Show code
Copy
Ask AI
<script>navattic.onEvent(function(eventData){ // Your custom tracking code here});</script>
Event data for each Navattic Product Demo includes:
Event Name
Description
VIEW_STEP
A Flow step is viewed.
START_FLOW
A visitor starts a Flow.
COMPLETE_FLOW
A visitor reached the last step of a flow OR completed a “Complete flow” step
START_CHECKLIST
A visitor loads a Checklist for the first time.
OPEN_CHECKLIST
A visitor expands a Checklist.
CLOSE_CHECKLIST
A visitor clicks “x” to close a Checklist or starts a flow.
COMPLETE_TASK
A visitor completed a Task in a Checklist.
CONVERTED
A visitor completed a step tagged “Mark as converted”.
NAVIGATE
A visitor clicked a button with the click action “Navigate to URL”.
IDENTIFY_USER
A form has been filled out in the demo that can identify the user.
ENGAGE
A visitor makes it past the first step of a flow.
Show full event shape
Copy
Ask AI
{// event can be one of:// - VIEW_STEP// - START_FLOW// - COMPLETE_FLOW// - START_CHECKLIST// - OPEN_CHECKLIST// - CLOSE_CHECKLIST// - IDENTIFY_USER// - CONVERTED// - NAVIGATE// - COMPLETE_TASKtype: "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 sessionsessionId: "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", ... }, ... }}
Once the JS snippet is installed on your website, you should now see a new event named “navattic_event” in your third-party platform.
Tip: For the most helpful tracking, give each Demo and Flow an informative name. This will help
organize your data in third-party platforms.