mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01:00 
			
		
		
		
	docs: Finish initial draft of how-to guide
This commit is contained in:
		
							parent
							
								
									b56f809fb8
								
							
						
					
					
						commit
						845168385b
					
				| @ -39,7 +39,7 @@ To create a feature toggle with impression data enabled, set the `impressionData | ||||
| 
 | ||||
| ### Enabling impression data for existing feature toggles {#step-1-existing-toggles} | ||||
| 
 | ||||
| To enable impression data for an existing toggle, use the "edit" button on the toggle's page in the admin UI. It will take you to a form that looks like the toggle creation form. Follow the same steps as you would for [enabling impression data for a new feature toggle](#step-1-new-toggles). | ||||
| To enable impression data for an existing toggle, use the "edit" button on the toggle's page in the admin UI. It will take you to a form that looks like the toggle creation form. Use the "impression data" toggle to enable impression data the same way you would when [enabling impression data for a new feature toggle](#step-1-new-toggles). | ||||
| 
 | ||||
|  | ||||
| 
 | ||||
| @ -50,16 +50,25 @@ To enable impression data for an existing toggle, use the [API's toggle patching | ||||
| 
 | ||||
| ## Step 2: Capture impression events in your client {#step-2} | ||||
| 
 | ||||
| ### Initialize your analytics service | ||||
| In your client SDK, initialize the library for the third party service you're using. | ||||
| For the full details on setting up a Posthog client, see [the official Posthog JavaScript client docs](https://posthog.com/docs/integrate/client/js). | ||||
| The steps below will use extracts from said documentation. | ||||
| 
 | ||||
| ``` js | ||||
| After initializing the library, you'll probably also want to identify the current user, so that events can be correlated properly: | ||||
| 
 | ||||
| ``` js title="Identify the user." | ||||
| posthog.identify(userId); | ||||
| ``` | ||||
| 
 | ||||
| ### Set up a listener | ||||
| ### Capture and transform the event | ||||
| 
 | ||||
| ``` js | ||||
| Attach an event listener to Unleash that listens for `"impression"` events. Inside the listener, transform the event data to the format you want and send it to your analytics service. | ||||
| 
 | ||||
| ``` js title="Capture, transform, and send impression data." | ||||
| // listen for impression events | ||||
| unleash.on("impression", (event) => { | ||||
| 
 | ||||
|     // capture and transform events | ||||
|     posthog.capture(event.eventType, { | ||||
|         ...event.context, | ||||
|         distinct_id: event.context?.userId, | ||||
| @ -67,58 +76,10 @@ unleash.on("impression", (event) => { | ||||
|         enabled: event.enabled, | ||||
|         variant: event.variant, | ||||
|     }); | ||||
| 
 | ||||
| }); | ||||
| ``` | ||||
| 
 | ||||
| option: | ||||
| 
 | ||||
| 
 | ||||
| ``` js | ||||
| unleash.on("impression", (event) => { | ||||
|     posthog.capture(event.eventType, transform(event)); | ||||
| }); | ||||
| ``` | ||||
| 
 | ||||
| ### Transform and record the data {#step-3} | ||||
| 
 | ||||
| Posthog requires the `distinct_id` property. For the rest, we'll just spread everything into a flat object. | ||||
| 
 | ||||
| ``` js | ||||
| const transform = (event) => ({ | ||||
|     ...event.context, | ||||
|     distinct_id: event.context?.userId, | ||||
|     featureName: event.featureName, | ||||
|     enabled: event.enabled, | ||||
|     variant: event.variant, | ||||
| }) | ||||
| ``` | ||||
| 
 | ||||
| ## Full example | ||||
| 
 | ||||
| ```js | ||||
| import posthog from "posthog-js"; | ||||
| 
 | ||||
| const unleash = new UnleashClient({ | ||||
|   url: 'https://eu.unleash-hosted.com/hosted/proxy', | ||||
|   clientKey: 'your-proxy-key', | ||||
|   appName: 'my-webapp', | ||||
| }); | ||||
| 
 | ||||
| posthog.identify(userId); | ||||
| 
 | ||||
| unleash.start(); | ||||
| 
 | ||||
| unleash.on("ready", () => { | ||||
|   unleash.isEnabled("my-feature-toggle"); | ||||
| }) | ||||
| 
 | ||||
| unleash.on("impression", (event) => { | ||||
|     posthog.capture(event.eventType, { | ||||
|         ...event.context, | ||||
|         distinct_id: event.context?.userId, | ||||
|         featureName: event.featureName, | ||||
|         enabled: event.enabled, | ||||
|         variant: event.variant, | ||||
|     }); | ||||
| }) | ||||
| ``` | ||||
| Posthog expects an object with a `distinct_id` property that it uses to correlate data. | ||||
| Additionally, you can add whatever properties you want, such as the feature toggle name, its state and/or variant, or the whole Unleash context. | ||||
| The `posthog.capture` method sends the event data to your Posthog instance. | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user