> ## Documentation Index
> Fetch the complete documentation index at: https://docs.navattic.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Subscribe to Events
> Connect to tracking scripts you already have installed.
Once you've [installed Navattic JS](/tracking/navattic-js#navattic-js-setup), you can connect to any tracking script you already have installed on pages with Navattic JS by **subscribing to events**.
```javascript theme={null}
```
}>
```javascript theme={null}
```
}>
```javascript theme={null}
```
}>
```javascript theme={null}
```
}>
```javascript theme={null}
```
}>
```javascript theme={null}
```
}>
```javascript theme={null}
```
}>
```javascript theme={null}
```
}>
```javascript theme={null}
```
}>
```javascript theme={null}
```
}>Follow instructions for setting up GA4
}>Follow instructions for setting up GTM
### Navattic Events
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. |
```javascript theme={null}
{
// 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: ...,
// Properties that have been identified from the user.
properties: [{
name: "NAME_OF_PROPERTY"
// The object can be one of
// - END_USER
// - COMPANY_ACCOUNT
object: "OBJECT_OF_PROPERTY"
value: "VALUE_OF_PROPERTY"
// The source can be one of
// - FORM
// - IDENTIFY
// - QUERY_PARAMS
// - SHARE_LINK
// - PRESENTATION
// - ENRICHMENT
// - INTEGRATION
// - OTHER
source: "SOURCE_OF_PROPERTY_VALUE",
// The capture method can be one of
// - DEMO
// - SCRIPT_AUTO
// - SCRIPT_MANUAL
// - INTEGRATION
captureMethod: "CAPTURE_METHOD_OF_PROPERTY",
// Form properties, if the property was identified from a form submission.
form: {
id: "ID_OF_FORM",
versionId: "VERSION_ID_OF_FORM",
Subscribe: "SUBMISSION_ID_OF_FORM",
}
}]
projectShareLinkId: "ID_OF_PROJECT_SHARE_LINK"
projectVersionId: "VERSION_ID_OF_PROJECT"
projectLanguage: "LANGUAGE_CODE_OF_PROJECT"
}
```
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.