FlowFuse / FlowFuse/flowfuse

Capture Node-RED user actions in posthog

Open
#6,530 1 comment 0 reactions 0 assignees View on GitHub
task
Dominant language
JavaScript
Stars
400
Forks
89
Avg merge
1d 20h
Merged PRs (30d)
149

Description

### Description

We currently don't have any event tracking in PostHog for things a user does inside Node-RED. That leaves us with a blind-spot in terms of understanding user behaviour.

### The Funnel Gap

Our sign-up-to-value funnel (HubSpot → PostHog) tracks users through instance creation and state changes, but **stops before they click "Open Editor"**. We can't answer critical questions:
- Do users actually open the editor after creating an instance?
- How long from sign-up to first editor access?
- Which editor type do they prefer (immersive vs standard)?
- Do they return to the editor after initial access?

**Current tracking ends at:** Instance created/started/restarted (`instances.js`)
**Missing:** Editor button clicks, editor sessions, time-to-editor

### Proposed solution

Add PostHog events to complete the funnel:

**1. Editor Access** (`EditorLink.vue`)
- Event: `$ff-editor-opened`
- Properties: `editor-type` (immersive/standard), `access-method` (click/middle-click)
- Groups: instance, team

**2. Device Editor Access** (`device/index.vue`)
- Event: `$ff-device-editor-opened`
- Groups: device, instance, team

**3. Editor Session Duration** (`EditorWrapper.vue`)
- Track iframe load → unmount time
- Event: `$ff-editor-session-ended`
- Property: `duration-seconds`

**4. First Editor Access** (user property)
- Use audit logs to identify first-time opens
- Add to PostHog user properties

Potential solution details

### What's Feasible

FlowFuse manages Node-RED instances through container drivers. Instances run separately:
- **Standard editor**: Opens Node-RED in new window (`EditorLink.vue`)
- **Immersive editor**: Embeds in iframe wrapper (`EditorWrapper.vue`, NR >= 4.0.2)

**This issue:** Track editor access and sessions from FlowFuse UI
**Future work:** In-editor actions (node creation, deploys) requires launcher instrumentation

### Implementation Files

- `/frontend/src/pages/instance/components/EditorLink.vue` - Add editor opened event
- `/frontend/src/pages/instance/Editor/components/EditorWrapper.vue` - Track session duration
- `/frontend/src/pages/device/index.vue` - Track device editor access
- `/frontend/src/services/product.js` - Product analytics service (already integrated)


### Success Metrics

- Complete funnel: sign-up → instance created → editor opened → [future: first deploy]
- Identify drop-off: instances created but editor never opened
- Measure time-to-editor-access from sign-up
- Track immersive vs standard editor adoption

### Epic/Story

FlowFuse/flowfuse#3839
FlowFuse/product#3

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.