Analytics

Trailguide Pro tracks tour events — starts, completions, skips, step views, and abandoned tours — and surfaces them in a dashboard with trend comparisons, completion funnels, and step-level drop-off metrics.

What the dashboard shows

The Trail Analytics dashboard in the Pro Editor (/dashboard/analytics) has three levels of detail:

L1 — Snapshot bar Four at-a-glance metrics, each with a trend arrow comparing the current period to the previous one:

• Sessions — total tours started
• Completion rate — percentage of sessions that reached the last step (color-coded: green ≥70%, amber ≥40%, red below that)
• Avg steps viewed — average number of steps users see before stopping
• Top exit step — the step where the most users drop off, with the percentage that left there

L2 — Charts

• Starts vs. completions — a dual-line chart showing how many sessions started and how many completed each day, revealing the gap between acquisition and activation over time
• Step funnel — a horizontal bar per step showing what percentage of sessions reached it. Color-coded (green/amber/red). Drop-off percentages between adjacent steps make it obvious where the tour loses people.

L3 — Raw sessions table (collapsed by default) Every individual session with outcome badge (Completed / Dropped / In Progress), steps viewed, exit step, and relative timestamp.

Time period selector: 7d / 30d / 90d / 6mo / 1yr / All — switching periods is instant (all events are fetched once on load, filtered client-side).

Enable analytics

Pass an analytics config to any hook or component:

import { useTrailManager, Trailguide } from '@trailguide/runtime'
import { onboardingTour } from './tours'
 
const ANALYTICS: AnalyticsConfig = {
  endpoint: 'https://app.gettrailguide.com/api/analytics',
  userId: 'your-trailguide-user-id',  // from app.gettrailguide.com
}
 
export default function Page() {
  const { isActive, dismiss } = useTrailManager(onboardingTour, {
    once: true,
    analytics: ANALYTICS,
  })
 
  return (
    <>
      {isActive && (
        <Trailguide
          trail={onboardingTour}
          onComplete={dismiss}
          onSkip={dismiss}
          analytics={ANALYTICS}
        />
      )}
    </>
  )
}

Events tracked

Debug mode

Set debug: true to log all events to the browser console:

const ANALYTICS: AnalyticsConfig = {
  endpoint: 'https://app.gettrailguide.com/api/analytics',
  userId: 'your-user-id',
  debug: true,
}

You will see entries like:

[Trailguide Analytics] trail_started { trail_id: "onboarding", step_id: "step-1", step_index: 0 }
[Trailguide Analytics] step_viewed { trail_id: "onboarding", step_id: "step-1", step_index: 0 }

Override trail ID

If you want analytics to use a different ID than trail.id (e.g. to merge events from multiple tour versions), pass trailId:

const ANALYTICS: AnalyticsConfig = {
  endpoint: 'https://app.gettrailguide.com/api/analytics',
  userId: 'your-user-id',
  trailId: 'onboarding-canonical', // override trail.id for analytics
}

Vanilla JS

Analytics work identically with the core Trailguide class:

import { Trailguide } from '@trailguide/core'
 
const instance = new Trailguide({
  analytics: {
    endpoint: 'https://app.gettrailguide.com/api/analytics',
    userId: 'your-user-id',
  },
})
 
instance.start(myTour)

Or with the static API:

import { start } from '@trailguide/core'
 
start(myTour, {
  analytics: {
    endpoint: 'https://app.gettrailguide.com/api/analytics',
    userId: 'your-user-id',
  },
})