|
| 1 | +## Analytics.js Plugin Architecture |
| 2 | + |
| 3 | +> [!IMPORTANT] |
| 4 | +> This doc may get out-of-date. Please prefer to use and link to Segment documentation for the most up-to-date information. It would be advisable to move this doc to https://segment.com/docs/connections/sources/catalog/libraries/website/javascript, so there is a single source of truth. |
| 5 | +
|
| 6 | +### Event Flow Diagram |
| 7 | +More details on plugin architecture can be found here: |
| 8 | +https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/#plugins-and-source-middleware |
| 9 | + |
| 10 | +### You can use the [vscode mermaid extension](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) to preview the following diagram code block inside of vscode, or copy and paste into the [mermaid live editor](https://mermaid.live/). |
| 11 | + |
| 12 | +```mermaid |
| 13 | +graph TD |
| 14 | + subgraph Event Creation |
| 15 | + A[analytics.track/page/identify] --> B[Event Factory] |
| 16 | + B --> C[Event Queue] |
| 17 | + end |
| 18 | +
|
| 19 | + subgraph Plugin Pipeline |
| 20 | + C --> D[Before Plugins e.g add page context] |
| 21 | + D --> E[Enrichment Plugins] |
| 22 | + E --> F[Destination Plugins e.g Segment.io] |
| 23 | + F --> G[After Plugins] |
| 24 | + end |
| 25 | +
|
| 26 | + subgraph Plugin Types Details |
| 27 | + I[Before Plugins<br/>Priority: Critical<br/>Example: Event Validation] --- D |
| 28 | + J[Enrichment Plugins<br/>Priority: Critical<br/>Parallel Execution<br/>Can Modify Events<br/>Example: Add User Agent] --- E |
| 29 | + K[Destination Plugins<br/>Parallel Execution<br/>Cannot Modify Events<br/>Example: Google Analytics] --- F |
| 30 | + L[After Plugins<br/>Example: Metrics Collection] --- G |
| 31 | + end |
| 32 | +
|
| 33 | + subgraph Notes |
| 34 | + M[Plugin Priorities] |
| 35 | + N[Critical - Must load before<br/>event delivery starts] |
| 36 | + O[Non-Critical - Can load<br/>after event delivery starts] |
| 37 | + M --> N |
| 38 | + M --> O |
| 39 | + end |
| 40 | +``` |
| 41 | + |
| 42 | +### Plugin Types Explanation |
| 43 | +[This information is also available in the Segment documentation](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/#plugins-and-source-middleware) |
| 44 | + |
| 45 | +1. **Before Plugins** (see [Example](#example-plugin-implementation)) |
| 46 | + - Run before any other plugins |
| 47 | + - Critical priority - block event pipeline until `.load()` resolves |
| 48 | + - Use cases: Event validation, data transformation |
| 49 | + - Example: Event validation before passing to other plugins) |
| 50 | + |
| 51 | + A. **Source Middleware** (see [Example](#example-source-middleware-implementation)) |
| 52 | + - **Source Middleware is just a light API wrapper around a "Before" type plugin Plugin** |
| 53 | + - Source Middleware is the legacy API (pre-analytics next). It's less verbose than the full plugin API, but a bit less powerful. It is functionally equivalent to a "Before" type plugin. |
| 54 | + |
| 55 | +2. **Enrichment Plugins** |
| 56 | + - Functionally Identitical to "before" plugins, but run after them. Before plugins are typically used internally (e.g adding page info), but there's no hard and fast rule. |
| 57 | + |
| 58 | +3. **Destination Plugins** |
| 59 | + - Run after enrichment |
| 60 | + - Cannot modify the event |
| 61 | + - Execute in parallel |
| 62 | + - Failures do not halt pipeline |
| 63 | + - Example: Segment.io, Google Analytics, Mixpanel |
| 64 | + |
| 65 | +4. **After Plugins (uncommon)** |
| 66 | + - Run after all other plugins complete |
| 67 | + - Use cases: Metrics, logging |
| 68 | + - Example: segment.io plugin for observability metrics |
| 69 | + |
| 70 | +5. **Utility Plugins** |
| 71 | + - Executes only once during the analytics.js bootstrap. Gives you access to the analytics instance using the plugin's load() method. This doesn't allow you to modify events. |
| 72 | + - Do not directly process events |
| 73 | + - Example: some plugin that registers a bunch of analytics event listeners (e.g. analytics.on('track', ...) and reports them to an external system) |
| 74 | + |
| 75 | +### Example: Plugin Implementation |
| 76 | +```ts |
| 77 | +export const myPlugin = { |
| 78 | + name: 'Do stuff' |
| 79 | + type: 'before', |
| 80 | + isLoaded: () => true, |
| 81 | + load: () => Promise.resolve(), |
| 82 | + // drop page events with a specific title |
| 83 | + page: (ctx) => { |
| 84 | + if (ctx.properties.title === 'some title') { |
| 85 | + return null |
| 86 | + } |
| 87 | + } |
| 88 | + // lowercase all track event names |
| 89 | + track: (ctx) => { |
| 90 | + ctx.event.event = ctx.event.event.toLowerCase() |
| 91 | + return ctx |
| 92 | + } |
| 93 | +} |
| 94 | +analytics.register(myPlugin) |
| 95 | +``` |
| 96 | +### Example: Source Middleware Implementation |
| 97 | +```ts |
| 98 | +analytics.addSourceMiddleware(({ payload, next }) => { |
| 99 | + const { event } = payload.obj.context |
| 100 | + if (event.type === 'track') { |
| 101 | + // change the event name to lowercase |
| 102 | + event.event = event.event.toLowerCase() |
| 103 | + } else if (event.type === 'page') { |
| 104 | + // drop any page events with no title |
| 105 | + if (event.properties.title === 'some title') { |
| 106 | + return null |
| 107 | + } |
| 108 | +} |
| 109 | + next(payload) |
| 110 | +}) |
| 111 | +``` |
| 112 | + |
| 113 | +### Event Flow Example |
| 114 | + |
| 115 | +When `analytics.track()` is called: |
| 116 | + |
| 117 | +1. Event is created via Event Factory |
| 118 | +2. Event enters the queue |
| 119 | +3. Before plugins validate/transform |
| 120 | +4. Enrichment plugins add data in parallel |
| 121 | +5. Destination plugins receive the event in parallel (including Segment.io plugin) |
| 122 | +6. Any after plugins handle post-processing (e.g. metrics collection) |
| 123 | + |
| 124 | +### Plugin Priorities |
| 125 | + |
| 126 | +- **Critical Plugins**: Must be loaded before event delivery starts |
| 127 | + - Example: Before plugins, Validation plugins |
| 128 | +- **Non-Critical Plugins**: Can load after event delivery begins |
| 129 | + - Example: Destination plugins |
0 commit comments