diff --git a/website/docs/how-to/how-to-send-impression-data-to-a-sink.md b/website/docs/how-to/how-to-send-impression-data-to-a-sink.md index 1ab7a664ae2..a6d4c6eef7c 100644 --- a/website/docs/how-to/how-to-send-impression-data-to-a-sink.md +++ b/website/docs/how-to/how-to-send-impression-data-to-a-sink.md @@ -1,11 +1,17 @@ --- title: How to send impression data to a sink --- +import ApiRequest from '@site/src/components/ApiRequest' + +:::info Placeholders +Placeholders in code samples below will be delimited by angle brackets (i.e. ``). You will need to replace them with the values that are correct in _your_ situation. +::: Unleash allows you to gather [**impression data**](../advanced/impression-data.md) from your feature toggles, giving you complete visibility into who checked what toggles and when. What you do with this data is entirely up to you, but a common use case is to send it off to an aggregation and analytics service such as [Posthog](https://posthog.com/) or [Google Analytics](https://analytics.google.com/). This guide will take you through everything you need to do in Unleash to facilitate such a workflow. It will show you how to send data to Posthog as an example sink, but the exact same principles will apply to any other service of the same kind. + ## Prerequisites We will assume that you have the necessary details for your third-party service: @@ -17,20 +23,28 @@ In addition you'll need to have a toggle to record impression data for and an [U When you have those things sorted, follow the below steps. -## Enable impression data for your feature toggle {#step-1} +## Step 1: Enable impression data for your feature toggle {#step-1} Because impression data is an **opt-in feature**, the first step is to enable it for the feature you want to gather data from. You can use both the UI and the API. -### Enabling impression data for new feature toggles +### Enabling impression data for new feature toggles {#step-1-new-toggles} -When you create a new feature toggle via the UI, there's an option at the end of the form that you must enable. +When you create a new feature toggle via the UI, there's an option at the end of the form that you must enable: ![The create feature toggle form. There's a toggle at the end of the form that enables or disables impression data. It's labeled "impression data".](/img/enable-impression-data.png) -### Enabling impression data for existing feature toggles +To create a feature toggle with impression data enabled, set the `impressionData` option to `true` in the request payload: + +", impressionData: true}} url="api/admin/projects//features" title="Create a feature toggle with impression data enabled."/> + +### 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). + +![The create feature toggle form. There's a toggle at the end of the form that enables or disables impression data. It's labeled "impression data".](/img/enable-impression-data-existing-toggle.png) -## Capture impression events in your client {#step-2} +## Step 2: Capture impression events in your client {#step-2} ### Initialize your analytics service diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 3562cc6eb3c..108a0272a1d 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -40,12 +40,13 @@ module.exports = { }, prism: { additionalLanguages: [ - 'java', - 'swift', - 'ruby', 'csharp', + 'http', + 'java', 'kotlin', 'php', + 'ruby', + 'swift', ], }, footer: { diff --git a/website/src/components/ApiRequest.jsx b/website/src/components/ApiRequest.jsx new file mode 100644 index 00000000000..057a5e39052 --- /dev/null +++ b/website/src/components/ApiRequest.jsx @@ -0,0 +1,48 @@ +/** + This component displays API requests in multiple different formats + using the tabs component. It syncs across the page. + + Please note: it doees NOT cover all kinds of API requests just yet. + If the type you're looking for isn't included, you may need to do + some extra development before it can be used. In the future, it may + be necessary to separate into multiple components based on request + types, for instance. + +**/ + +import React from 'react'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import CodeBlock from '@theme/CodeBlock'; + +const indentation = 2; + +const Component = ({ verb, payload, url, title }) => { + const verbUpper = verb?.toUpperCase() || "" + const prettyPayload = JSON.stringify(payload, null, indentation) + + return ( + + + + {`${verbUpper} /${url} +Authorization: +content-type: application/json + +${prettyPayload} +`} + + + + + {`echo '${prettyPayload}' \\ +| http ${verbUpper} \\ + /${url} \\ + Authorization:`} + + + + ); +}; + +export default Component; diff --git a/website/static/img/enable-impression-data-existing-toggle.png b/website/static/img/enable-impression-data-existing-toggle.png new file mode 100644 index 00000000000..e85fa544c30 Binary files /dev/null and b/website/static/img/enable-impression-data-existing-toggle.png differ