mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-26 13:48:33 +02:00
docs: Add API request component: display in http and httpie easy!
The ApiRequest component is created to make it easier to show code samples for API requests. It shows them in raw HTTP form and with HTTPie for now.
This commit is contained in:
parent
323b9e4247
commit
752a1df343
@ -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. `<placeholder-name>`). 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:
|
||||
|
||||

|
||||
|
||||
### 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:
|
||||
|
||||
<ApiRequest verb="post" payload={{name: "<feature-toggle-name>", impressionData: true}} url="api/admin/projects/<project-id>/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).
|
||||
|
||||

|
||||
|
||||
|
||||
## Capture impression events in your client {#step-2}
|
||||
## Step 2: Capture impression events in your client {#step-2}
|
||||
|
||||
### Initialize your analytics service
|
||||
|
||||
|
@ -40,12 +40,13 @@ module.exports = {
|
||||
},
|
||||
prism: {
|
||||
additionalLanguages: [
|
||||
'java',
|
||||
'swift',
|
||||
'ruby',
|
||||
'csharp',
|
||||
'http',
|
||||
'java',
|
||||
'kotlin',
|
||||
'php',
|
||||
'ruby',
|
||||
'swift',
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
|
48
website/src/components/ApiRequest.jsx
Normal file
48
website/src/components/ApiRequest.jsx
Normal file
@ -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 (
|
||||
<Tabs groupId="api-request">
|
||||
<TabItem value="http" label="HTTP">
|
||||
<CodeBlock language="http" title={title}>
|
||||
{`${verbUpper} <unleash-url>/${url}
|
||||
Authorization: <API-token>
|
||||
content-type: application/json
|
||||
|
||||
${prettyPayload}
|
||||
`}
|
||||
</CodeBlock>
|
||||
</TabItem>
|
||||
<TabItem value="httpie" label="HTTPie">
|
||||
<CodeBlock language="bash" title={title}>
|
||||
{`echo '${prettyPayload}' \\
|
||||
| http ${verbUpper} \\
|
||||
<unleash-url>/${url} \\
|
||||
Authorization:<API-token>`}
|
||||
</CodeBlock>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default Component;
|
BIN
website/static/img/enable-impression-data-existing-toggle.png
Normal file
BIN
website/static/img/enable-impression-data-existing-toggle.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 196 KiB |
Loading…
Reference in New Issue
Block a user