The availability of features may depend on your plan type. Contact your Customer Success Manager if you have any questions.

Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideLegal TermsGitHubDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide

Integrate Clarity

Integrate Clarity with Optimizely Web Experimentation to view your experiment results and analyze how users interact with your website.

📘

Note

See Optimizely's Third-Party Add-Ons & Platform Integration Terms.

📘

Note

You must have an account set up for Clarity. Sign up for an 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 to Optimizely.
  2. Go to Settings > Integrations.
  3. Expand the Create Analytics Integration drop-down list and select Using JSON.
  1. 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"
 }
}
  1. 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 add the app to specific experiments, shown in the image below:

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.

📘

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 project is masking this information from third-party tools. You can disable this in your project settings.