Integrate Clarity

📘

Note

You must have an account set up for Clarity. Go to https://clarity.microsoft.com/ and sign up for a new account (if you do not already have one). When prompted, select the installation method you prefer.

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

Configure Clarity

1. Log in at https://app.optimizely.com/.
2. Go to Settings > Integrations.
3. Expand the Create Analytics Integration drop-down list and select Using JSON.

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

{
 "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.

📘

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 either add the new app to specific experiments, shown in the image below:

Or you can 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.

📘

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 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/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.

📘

Note

If you do not see any names (only numbers), your Optimizely Web project is masking this information from third party tools. You can disable this in your project settings.