-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2c797e8
commit b1cf4d5
Showing
6 changed files
with
171 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| --- | ||
| id: google-analytics | ||
| title: Google Analytics - Send feature flag analytics to Google Analytics | ||
| description: ConfigCat Google Analytics integration. This is a step-by-step guide on how to send feature flag analytics events to Google Analytics. | ||
| --- | ||
|
|
||
| import Tabs from '@theme/Tabs'; | ||
| import TabItem from '@theme/TabItem'; | ||
| import CodeBlock from '@theme/CodeBlock'; | ||
|
|
||
| ## Sending feature flag evaluation analytics to Google Analytics | ||
|
|
||
| Ensures that feature flag evaluations are logged into <a href="https://developers.google.com/analytics/devguides/collection/ga4/integration" target="_blank" rel="noopener noreferrer">Google Analytics experiments</a>. With this integration, you can have advanced analytics about your feature flag usages, A/B test results. | ||
|
|
||
| ### Setup | ||
|
|
||
| 1. Install the ConfigCat and Google Analytics SDKs to your application. | ||
| 2. Configure the ConfigCat SDK with your ConfigCat SDK key and the Google Analytics SDK with your Google Analytics measurement ID. | ||
| 3. In your code, subscribe to the `flagEvaluated` hook during the ConfigCat SDK initialization and send feature flag evaluation data to Google Analytics experiments with the `experience_impression` event name. | ||
| The only required parameter is the `exp_variant_string` that should contain the tool name (configcat), the feature flag's key and the feature flag's value. e.g. `configcat-isMyAwesomeFeatureEnabled-true` | ||
|
|
||
| Code samples: | ||
| <Tabs> | ||
| <TabItem value="js" label="JavaScript, SSR" default> | ||
| ```js | ||
| const configCatClient = configcat.getClient("#YOUR_SDK_KEY", PollingMode.AutoPoll, { | ||
| setupHooks: (hooks) => | ||
| hooks.on('flagEvaluated', evaluationDetails => { | ||
| const variant = "configcat-" + evaluationDetails.key + "-" + evaluationDetails.value; | ||
| gtag('event', 'experience_impression', | ||
| { | ||
| 'exp_variant_string': variant, | ||
| 'variation_id': evaluationDetails.variationId | ||
| }); | ||
| }), | ||
| }); | ||
| ``` | ||
| </TabItem> | ||
|
|
||
| <TabItem value="react" label="React"> | ||
| ```tsx | ||
| <ConfigCatProvider | ||
| sdkKey="#YOUR_SDK_KEY" | ||
| pollingMode={PollingMode.AutoPoll} | ||
| options={{ | ||
| setupHooks: (hooks) => | ||
| hooks.on('flagEvaluated', evaluationDetails => { | ||
| const variant = "configcat-" + evaluationDetails.key + "-" + evaluationDetails.value; | ||
| gtag('event', 'experience_impression', | ||
| { | ||
| 'exp_variant_string': variant, | ||
| 'variation_id': evaluationDetails.variationId | ||
| }); | ||
| }), | ||
| }} | ||
| > | ||
| </ConfigCatProvider> | ||
| ``` | ||
| </TabItem> | ||
|
|
||
| <TabItem value="other" label="Other langauges"> | ||
| The documentation only shows code examples to Javascript-based SDKs, but you can use this integration in other languages as well with sending an event to Google Analytics with using the <a href="https://developers.google.com/analytics/devguides/collection/protocol/ga4/sending-events?client_type=gtag" target="_blank" rel="noopener noreferrer">Send Measurement Protocol events to Google Analytics</a> endpoint. | ||
| You can subscribe to the FlagEvaluated hook in the ConfigCat SDK and send an Event to Google Analytics with the `experience_impression` event name and the following event properties: | ||
| 1. `exp_variant_string`: the variant in a format like `XXX-YYYYYYYYY-ZZZZZZZZ` where `XXX` is the tool name (configcat), `YYYYYYYYY` is the feature flag's key and `ZZZZZZZZ` is the feature flag's value. e.g. `configcat-isMyAwesomeFeatureEnabled-true` | ||
| 2. `variant_id`: the evalated feature flag's value or the variationId from the FlagEvaluated hook's EvaluationDetails | ||
| 3. `user_id` (optional): in case you are using the tracking in a backend component and you use the user_id feature in Google Analytics, you have to send the `user_id` property as well to identify your user. You can use the User object's Identifier property from the FlagEvaluated hook or a value that best describes your user. | ||
| </TabItem> | ||
|
|
||
| </Tabs> | ||
|
|
||
| :::note | ||
| If you are using Text feature flags with long text values (e.g. JSON values), you can send the `variationId` in the `exp_variant_string` to Google Analytics instead of the `value`. | ||
| The `variationId` is a hashed version of the feature flag value and you can access the `variationId` on the ConfigCat Dashboard after turning on the _Show VariationIDs to support A/B testing_ | ||
| <a href="https://app.configcat.com/product/preferences" target="_blank" rel="noopener noreferrer">Product preference</a>. | ||
| ::: | ||
|
|
||
| 4. Deploy your application and wait for feature flag evaluations to happen so the `experience_impression` in Google Analytics could be populated. This could take up 1-2 days. | ||
|
|
||
| 5. Follow the <a href="https://developers.google.com/analytics/devguides/collection/ga4/integration#audiences" target="_blank" rel="noopener noreferrer">Define an audience using the exp_variant_string parameter</a> guide to define an audience so you can start using your feature flag evaluation event in Google Analytics. | ||
|
|
||
| ### Example audiences reports | ||
| <img src="/docs/assets/googleanalytics/audiences.png" className="zoomable" alt="Google Analytics Audience report" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 82 additions & 0 deletions
82
website/versioned_docs/version-V1/integrations/google-analytics.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| --- | ||
| id: google-analytics | ||
| title: Google Analytics - Send feature flag analytics to Google Analytics | ||
| description: ConfigCat Google Analytics integration. This is a step-by-step guide on how to send feature flag analytics events to Google Analytics. | ||
| --- | ||
|
|
||
| import Tabs from '@theme/Tabs'; | ||
| import TabItem from '@theme/TabItem'; | ||
| import CodeBlock from '@theme/CodeBlock'; | ||
|
|
||
| ## Sending feature flag evaluation analytics to Google Analytics | ||
|
|
||
| Ensures that feature flag evaluations are logged into <a href="https://developers.google.com/analytics/devguides/collection/ga4/integration" target="_blank" rel="noopener noreferrer">Google Analytics experiments</a>. With this integration, you can have advanced analytics about your feature flag usages, A/B test results. | ||
|
|
||
| ### Setup | ||
|
|
||
| 1. Install the ConfigCat and Google Analytics SDKs to your application. | ||
| 2. Configure the ConfigCat SDK with your ConfigCat SDK key and the Google Analytics SDK with your Google Analytics measurement ID. | ||
| 3. In your code, subscribe to the `flagEvaluated` hook during the ConfigCat SDK initialization and send feature flag evaluation data to Google Analytics experiments with the `experience_impression` event name. | ||
| The only required parameter is the `exp_variant_string` that should contain the tool name (configcat), the feature flag's key and the feature flag's value. e.g. `configcat-isMyAwesomeFeatureEnabled-true` | ||
|
|
||
| Code samples: | ||
| <Tabs> | ||
| <TabItem value="js" label="JavaScript, SSR" default> | ||
| ```js | ||
| const configCatClient = configcat.getClient("#YOUR_SDK_KEY", PollingMode.AutoPoll, { | ||
| setupHooks: (hooks) => | ||
| hooks.on('flagEvaluated', evaluationDetails => { | ||
| const variant = "configcat-" + evaluationDetails.key + "-" + evaluationDetails.value; | ||
| gtag('event', 'experience_impression', | ||
| { | ||
| 'exp_variant_string': variant, | ||
| 'variation_id': evaluationDetails.variationId | ||
| }); | ||
| }), | ||
| }); | ||
| ``` | ||
| </TabItem> | ||
|
|
||
| <TabItem value="react" label="React"> | ||
| ```tsx | ||
| <ConfigCatProvider | ||
| sdkKey="#YOUR_SDK_KEY" | ||
| pollingMode={PollingMode.AutoPoll} | ||
| options={{ | ||
| setupHooks: (hooks) => | ||
| hooks.on('flagEvaluated', evaluationDetails => { | ||
| const variant = "configcat-" + evaluationDetails.key + "-" + evaluationDetails.value; | ||
| gtag('event', 'experience_impression', | ||
| { | ||
| 'exp_variant_string': variant, | ||
| 'variation_id': evaluationDetails.variationId | ||
| }); | ||
| }), | ||
| }} | ||
| > | ||
| </ConfigCatProvider> | ||
| ``` | ||
| </TabItem> | ||
|
|
||
| <TabItem value="other" label="Other langauges"> | ||
| The documentation only shows code examples to Javascript-based SDKs, but you can use this integration in other languages as well with sending an event to Google Analytics with using the <a href="https://developers.google.com/analytics/devguides/collection/protocol/ga4/sending-events?client_type=gtag" target="_blank" rel="noopener noreferrer">Send Measurement Protocol events to Google Analytics</a> endpoint. | ||
| You can subscribe to the FlagEvaluated hook in the ConfigCat SDK and send an Event to Google Analytics with the `experience_impression` event name and the following event properties: | ||
| 1. `exp_variant_string`: the variant in a format like `XXX-YYYYYYYYY-ZZZZZZZZ` where `XXX` is the tool name (configcat), `YYYYYYYYY` is the feature flag's key and `ZZZZZZZZ` is the feature flag's value. e.g. `configcat-isMyAwesomeFeatureEnabled-true` | ||
| 2. `variant_id`: the evalated feature flag's value or the variationId from the FlagEvaluated hook's EvaluationDetails | ||
| 3. `user_id` (optional): in case you are using the tracking in a backend component and you use the user_id feature in Google Analytics, you have to send the `user_id` property as well to identify your user. You can use the User object's Identifier property from the FlagEvaluated hook or a value that best describes your user. | ||
| </TabItem> | ||
|
|
||
| </Tabs> | ||
|
|
||
| :::note | ||
| If you are using Text feature flags with long text values (e.g. JSON values), you can send the `variationId` in the `exp_variant_string` to Google Analytics instead of the `value`. | ||
| The `variationId` is a hashed version of the feature flag value and you can access the `variationId` on the ConfigCat Dashboard after turning on the _Show VariationIDs to support A/B testing_ | ||
| <a href="https://app.configcat.com/product/preferences" target="_blank" rel="noopener noreferrer">Product preference</a>. | ||
| ::: | ||
|
|
||
| 4. Deploy your application and wait for feature flag evaluations to happen so the `experience_impression` in Google Analytics could be populated. This could take up 1-2 days. | ||
|
|
||
| 5. Follow the <a href="https://developers.google.com/analytics/devguides/collection/ga4/integration#audiences" target="_blank" rel="noopener noreferrer">Define an audience using the exp_variant_string parameter</a> guide to define an audience so you can start using your feature flag evaluation event in Google Analytics. | ||
|
|
||
| ### Example audiences reports | ||
| <img src="/docs/assets/googleanalytics/audiences.png" className="zoomable" alt="Google Analytics Audience report" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters