---
title: Integrate Clarity
slug: web-experimentation/docs/configure-clarity
docTags: 
createdAt: 2026-07-23T11:40:26.461Z
---

:::Iframe{code="<ThirdpartyLegalTerms />"}

:::

:::hint{type="info"}
**📘 Note**
You must have an account configured for Clarity. [Sign up](https://clarity.microsoft.com/) for an account if you do not already have one. When prompted, select the installation method you prefer.

It can take up to two hours for your dashboard to be created after you select your installation method.
:::

## Configure Clarity

1. Log in to [Optimizely](https://app.optimizely.com/).
2. Go to **Settings > Integrations**.
3. Click the **Create Analytics Integration** drop-down list and select **Using JSON**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/uwdQh0dXzSvzKVkA4AaMc_f4b2d28-abcc44c-configure-clarity-step3.png)

4. Paste the following code into the JSON Code field:

```json
{
 "plugin_type": "analytics_integration",
 "name": "Custom Clarity integration",
 "form_schema": [],
 "description": "",
 "options": {
   "track_layer_decision": "var state = window['optimizely'].get('state');\nvar campaignObject = state.getDecisionObject({'campaignId':campaignId});\n\nif(campaignObject !== null){\n var utils = window[\"optimizely\"].get(\"utils\");\n utils.waitUntil(function() {\n \treturn typeof(clarity) === 'function';\n }).then(function() {\n   console.log('clarity is finally a function. Sending now.');\n   clarity(\"set\", \"Optimizely\", campaignObject.experiment +' - ' + campaignObject.variation);\n });\n}\n"
 }
}
```

5. Click **Create Extension**.

:::hint{type="info"}
**📘 Note**
A console log in the code above displays the following message in the console of a browser: "Clarity is finally a function. Sending now."

Once you see this, you can remove this line of code or comment it out by going to **Settings > Integrations > Custom Clarity integration > Edit**.
:::

## Turn on the app

The custom app (integration) that you just added displays on the **Settings > Integrations** page. To turn it on, select **Custom Clarity integration** from the list and set the **Enable Integration** field to **On**.

## Add the app to an experiment

You can add the app to specific experiments, shown in the following image:

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/uu4nviYIDFmw3wC61yXN__6665bf7-add-integration.png)

You can also have it automatically added to all new experiments by doing the following:

1. Go to **Settings > Integrations > Custom Clarity integration**.
2. Click **Edit**.
3. Click **Settings**. The **Edit Custom Analytics Integration** window displays.
4. Select **Enable this integration by default for all new experiments**.
5. Click **Update Custom Analytics Integration**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/gQmxr1OtuyuwdG1zEEqna_a816f6d-a7f2b77-auto-add-integration.png)

:::hint{type="info"}
**📘 Note**
This turns the integration on for all newly created experiments going forward but not for those that you have already created.
:::

## Use the experiment data in Clarity

1. Go to your [Clarity dashboard](https://clarity.microsoft.com/projects/) and select the project/site in which you are interested.
2. Go to **Filters > Customized filters > Customized tags**.
3. Expand **Select tag** and select **Optimizely**.
4. Select your desired experiment or variant.
5. Click **Apply**. This gives you a dashboard overview of the information for that specific experiment/variant.
6. Click **Save as segment** to save this custom filter as a segment.

:::hint{type="info"}
**📘 Note**
If you do not see any names (only numbers), your Optimizely project is masking this information from third-party tools. You can disable this in your [project settings](docId\:BgxHHXMjh1J_RuV_wiMgy).
:::