Skip to content

Usage tracking

Project Level

Project-level analytics enable teams to view how users are engaging with available demo content for an individual project. This can be a helpful piece of information for sales and marketing teams looking to find new leads and nurture existing ones.

Working with Forms

A Form step provides a data entry point for users to enter information such as name and email address for downstream tracking.

To create a Form, first change the step type to Form.

Next, select the Form step to open the Form sidebar menu. In this menu, you can add a custom Title and Subtitle to greet your users.

You can add in custom fields to collect additional information (e.g., phone number, company name, address, ect.) from users going through the demo. As a note, when adding a custom field, you must include an Identify Field value for the entries to properly save.

Viewing Form Submissions

Once the Flow with a Form has been published and assocaited with a Project, Form entries collected will be available in the customers section of the Project view.

From this view, you can track session information from identified users (users who have completed the form information). This information includes name, email, device details, number of sessions (how many times the same browser accessed the demo), and last viewed session.

You are also able to download this information as a CSV file.

Guide Activity

View a step-by-step breakdown for each guide associated with a project. Track step views and drop-off over the course of a product tour to see how your users engage with the experience.

Views vs. Completions

Track project engagement to view aggregated views and tour completions on a daily, weekly, and monthly basis.

Customers

Workspace-level analytics enable teams to view how users are engaging with available demo content across all projects in your workspace. This can be a single reference point to quickly view how users are engaging with available content.

Aggregated Analytics

To view the aggregated usage across all projects, first navigate to the "Customers" tab on the left guide menu bar.

From this view, you can track session information from identified users (users who have completed the form information) across all projects. This information includes name, email, device details, number of sessions (how many times the same browser accessed the demo), and last viewed session.

Boosting Demo Engagement

Navattic makes it easy to view your engagement data and to make changes quickly.

Below are our learnings from top performing demos, and tips to boost customer engagement and conversion. We have consolidated these high-level findings with more detailed guidance in our Best Practices section.

Top performing demos contain:

  • 8-15 steps per Flow
  • A value-driven introduction (ex., ”Build a no-code interactive demo in four steps”)
  • A Checklist to create a “choose your own adventure” experience
  • Consistent and accessible CTAs in multiple steps
  • Backdrops to better emphasize Tooltips and Elements
  • Ability for viewers to see their step progress (to turn Step Progress on for a Flow, visit Settings > “Has navigation buttons” > “Show step progress”)
  • A custom Theme to match product brandings

If you identify a step with greater drop-off than others:

  • Consider adding a CTA around here to engage viewers before they navigate away from the demo
  • Investigate the appearance of the step: could customers be confused by the text or other elements at this step?
  • Let us know - our team is happy to provide tailored guidance for your demo

You may occasionally see some later steps that have a higher # of views than earlier steps. This may indicate that viewers are navigating back to a particular step or copy/pasting a direct link to this step.

Cross-frame Communication

Note: This section is technical and requires (some) knowledge of JavaScript.

Overview

If you're embedding a Navattic demo into your marketing website, you may want real-time insight into what actions end-users are performing. Some use-cases include:

  • Launching a chat window if a visitor visits a certain step
  • Enriching marketing website analytics with Navattic events

Implementation

On each step, every Navattic project posts a message to the top window. Each message contains info about the current project, flow, and step metadata. You can listen to these events on your marketing website (or whichever website into which Navattic is embedded).

window.addEventListener('message', (event) => {
  if (event.data.kind === 'navattic:event') {
    console.log(event.data)
  }
})

Each event.data has the following shape:

{
	// event can be one of:
	// - VIEW_STEP
	// - START_FLOW
	// - COMPLETE_FLOW
	// - START_CHECKLIST
	// - OPEN_CHECKLIST
	// - CLOSE_CHECKLIST
	// - IDENTIFY_USER
	// - CONVERTED
	// - NAVIGATE
	// - COMPLETE_TASK
	event: "VIEW_STEP",
	project: {
		id: "ID_OF_PROJECT",
		name: "NAME_OF_PROJECT",
	},
	flow: {
		id: "ID_OF_CURRENT_FLOW",
		name: "NAME_OF_CURRENT_FLOW",
	},
	step: {
		name: "NAME_OF_CURRENT_STEP",
		indx: 0, // 0-based step index
	},
	// NOTE: checklist can be undefined if the project
	// has no checklist
	checklist: {
		id: "ID_OF_CHECKLIST",
		name: "NAME_OF_CHECKLIST",
	},
	// url is populated if event is NAVIGATE
	url: "",

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

	// a session is scoped to a browser tab, so any action
	// performed in that tab is tied to a session
	sessionId: "CURRENT_SESSION_ID",
}