Skip to content

Commit 2e069ca

Browse files
adboioadboio
committed
docs(product tours): initial product tours docs
1 parent faa2bc4 commit 2e069ca

File tree

11 files changed

+1089
-2
lines changed

11 files changed

+1089
-2
lines changed

‎contents/docs/api/product-tours/overview.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<CalloutBox icon="IconFlask" title="Product tours is in private beta" type="info">
1+
<CalloutBox icon="IconFlask" title="Product tours is in private alpha" type="info">
22

3-
Product Tours is currently in private beta. [Share your thoughts](https://us.posthog.com/external_surveys/019af5f5-a50e-0000-b10f-e8c30c0b73a0) and we'll reach out with early access.
3+
Product Tours is currently in private alpha. [Share your thoughts](https://us.posthog.com/external_surveys/019af5f5-a50e-0000-b10f-e8c30c0b73a0) and we'll reach out with early access.
44

55
</CalloutBox>

‎contents/docs/product-tours/_snippets/alpha.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<CalloutBox icon="IconFlask" title="Product tours is in private alpha" type="info">
2+
3+
Product Tours is currently in private alpha. [Share your thoughts](https://us.posthog.com/external_surveys/019af5f5-a50e-0000-b10f-e8c30c0b73a0) and we'll reach out with early access.
4+
5+
</CalloutBox>

‎contents/docs/product-tours/analytics.mdx‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
---
2+
title: Analytics
3+
sidebar: Docs
4+
showTitle: true
5+
---
6+
7+
import Alpha from './_snippets/alpha.mdx'
8+
9+
<Alpha />
10+
11+
Track how users interact with your tours using built-in analytics and PostHog's product analytics tools.
12+
13+
## Built-in metrics
14+
15+
Every tour shows key metrics in the PostHog UI:
16+
17+
| Metric | Description |
18+
|--------|-------------|
19+
| **Shown** | How many times the tour was displayed (unique and total) |
20+
| **Completed** | How many users finished all steps |
21+
| **Dismissed** | How many users closed the tour early |
22+
23+
### Per-step metrics
24+
25+
View metrics for each step:
26+
27+
- **Shown** - How many users saw this step
28+
- **Completed** - How many users advanced past this step
29+
30+
Use per-step metrics to identify where users drop off.
31+
32+
## Events captured
33+
34+
Product tours automatically capture events that you can use in insights:
35+
36+
### Tour-level events
37+
38+
| Event | Description |
39+
|-------|-------------|
40+
| `product tour shown` | Tour was displayed to a user |
41+
| `product tour completed` | User finished all steps |
42+
| `product tour dismissed` | User closed the tour early |
43+
44+
### Step-level events
45+
46+
| Event | Description |
47+
|-------|-------------|
48+
| `product tour step shown` | A specific step was displayed |
49+
| `product tour step completed` | User advanced past a step |
50+
| `product tour step selector failed` | Element selector didn't find the target |
51+
52+
### Event properties
53+
54+
All events include:
55+
56+
- `$tour_id` - The tour's unique ID
57+
- `$tour_name` - The tour's name
58+
- `$step_id` - The step's unique ID (for step events)
59+
- `$step_index` - The step's position in the tour (for step events)
60+
61+
## Person properties
62+
63+
PostHog sets person properties when users interact with tours:
64+
65+
| Property | Description |
66+
|----------|-------------|
67+
| `$product_tour_completed/{tour_id}` | Set to `true` when user completes the tour |
68+
| `$product_tour_dismissed/{tour_id}` | Set to `true` when user dismisses the tour |
69+
70+
These properties are used for auto-exclusion (so users don't see the same tour twice) and can be used for targeting and segmentation.
71+
72+
## Using with product analytics
73+
74+
Tour events work with all of PostHog's analytics tools.
75+
76+
### Funnels
77+
78+
Create a funnel to measure tour effectiveness:
79+
80+
1. `product tour shown` - Tour started
81+
2. `product tour step completed` (step 1)
82+
3. `product tour step completed` (step 2)
83+
4. `product tour completed` - Tour finished
84+
85+
See where users drop off and which steps need improvement.
86+
87+
### Trends
88+
89+
Track tour performance over time:
90+
91+
- Total tours shown per day
92+
- Completion rate trends
93+
- Dismissal rate trends
94+
95+
### Retention
96+
97+
Measure if tours improve user retention:
98+
99+
1. Create a cohort of users who completed a tour
100+
2. Compare retention to users who didn't see the tour
101+
3. Measure the impact of your onboarding
102+
103+
### Cohorts
104+
105+
Create cohorts based on tour interactions:
106+
107+
- Users who completed onboarding tour
108+
- Users who dismissed the feature tour
109+
- Users who haven't seen any tours
110+
111+
Use these cohorts for targeting other tours or feature flags.
112+
113+
## Analyzing tour performance
114+
115+
### Completion rate
116+
117+
```
118+
Completion rate = Completed / Shown
119+
```
120+
121+
A healthy completion rate depends on tour length and context. Shorter tours typically have higher completion rates.
122+
123+
### Drop-off analysis
124+
125+
Look at per-step metrics to find problem steps:
126+
127+
1. Large drop between steps → Content or timing issue
128+
2. High dismissal at step 1 → Poor targeting or timing
129+
3. High dismissal at final step → Missing clear value or CTA
130+
131+
### Selector failures
132+
133+
Monitor `product tour step selector failed` events. High failure rates indicate:
134+
135+
- Fragile CSS selectors
136+
- Element not present when expected
137+
- Page structure changes
138+
139+
## Best practices
140+
141+
- **Set baseline metrics** before launching
142+
- **Monitor regularly** during the first few days
143+
- **Iterate quickly** on underperforming steps
144+
- **Compare cohorts** to measure business impact
145+
- **Archive and learn** from completed tours

‎contents/docs/product-tours/creating-announcements.mdx‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
---
2+
title: Creating announcements
3+
sidebar: Docs
4+
showTitle: true
5+
---
6+
7+
import Alpha from './_snippets/alpha.mdx'
8+
9+
<Alpha />
10+
11+
Announcements are single-step messages for when you don't need a full multi-step tour. They're ideal for feature launches, changelogs, or important notices.
12+
13+
## Announcement types
14+
15+
### Modal announcements
16+
17+
Centered popups that demand attention. Use modals for:
18+
19+
- New feature announcements
20+
- Changelog updates
21+
- Welcome messages
22+
- Important notices
23+
24+
Modals can be positioned in different areas of the screen and support rich content.
25+
26+
### Banner announcements
27+
28+
Top or bottom page alerts for less intrusive messages. Use banners for:
29+
30+
- Promotional messages
31+
- Maintenance notices
32+
- Subtle feature hints
33+
- Persistent CTAs
34+
35+
Banners can be sticky (stay visible while scrolling) or static.
36+
37+
## Create a modal announcement
38+
39+
1. Go to [Product tours](https://us.posthog.com/product-tours) in PostHog
40+
2. Click **New tour**
41+
3. Select **Announcement**
42+
4. Choose **Modal**
43+
44+
### Content
45+
46+
Use the rich text editor to write your announcement. You can:
47+
48+
- Add formatted text
49+
- Include images and videos
50+
- Add links
51+
52+
Keep announcements focused on a single message or action.
53+
54+
### Position
55+
56+
Choose where the modal appears:
57+
58+
| Position | Description |
59+
|----------|-------------|
60+
| **Center** | Middle of the screen (default) |
61+
| **Top left** | Upper left corner |
62+
| **Top center** | Top middle |
63+
| **Top right** | Upper right corner |
64+
| **Bottom left** | Lower left corner |
65+
| **Bottom center** | Bottom middle |
66+
| **Bottom right** | Lower right corner |
67+
68+
### Width
69+
70+
Control the modal width:
71+
72+
- **Compact** - Narrow, for short messages
73+
- **Default** - Standard width
74+
- **Wide** - More room for content
75+
- **Extra wide** - Maximum width
76+
77+
### Buttons
78+
79+
Add buttons to your modal:
80+
81+
- **Primary button** - Main action (e.g., "Learn more", "Try it now")
82+
- **Secondary button** - Alternative action (e.g., "Dismiss", "Remind me later")
83+
84+
Button actions:
85+
86+
| Action | Description |
87+
|--------|-------------|
88+
| **Dismiss** | Close the announcement |
89+
| **Link** | Open a URL |
90+
| **Trigger tour** | Start a product tour |
91+
92+
## Create a banner announcement
93+
94+
1. Go to [Product tours](https://us.posthog.com/product-tours) in PostHog
95+
2. Click **New tour**
96+
3. Select **Announcement**
97+
4. Choose **Banner**
98+
99+
### Content
100+
101+
Banner content is more limited than modals. Keep text concise - banners work best with a single line or short message.
102+
103+
### Position
104+
105+
Banners appear at:
106+
107+
- **Top** - Above page content
108+
- **Bottom** - Below page content
109+
110+
### Behavior
111+
112+
Choose how the banner behaves:
113+
114+
- **Sticky** - Stays visible as users scroll
115+
- **Static** - Scrolls with the page
116+
117+
### Action
118+
119+
Banners can have a single action when clicked:
120+
121+
- **None** - Banner is informational only
122+
- **Link** - Open a URL when clicked
123+
- **Trigger tour** - Start a product tour when clicked
124+
125+
## When to use modals vs banners
126+
127+
| Use case | Recommended |
128+
|----------|-------------|
129+
| Major feature launch | Modal |
130+
| Changelog update | Modal |
131+
| Welcome message | Modal |
132+
| Promotional offer | Banner |
133+
| Maintenance notice | Banner |
134+
| Subtle feature hint | Banner |
135+
| Persistent CTA | Banner (sticky) |
136+
137+
Modals interrupt the user experience, so use them sparingly for important messages. Banners are less intrusive and better for ongoing notices.
138+
139+
## Targeting announcements
140+
141+
Announcements use the same targeting options as product tours:
142+
143+
- URL matching
144+
- Device types
145+
- User properties
146+
147+
See [Targeting](/docs/product-tours/targeting) for details.
148+
149+
## Next steps
150+
151+
- [Set up targeting](/docs/product-tours/targeting) to control who sees your announcement
152+
- [Customize the appearance](/docs/product-tours/customization) to match your brand
153+
- [Launch and track](/docs/product-tours/managing-tours) your announcement's performance

0 commit comments

Comments
 (0)