Microsoft Clarity

Ttoolab can tag Microsoft Clarity sessions with experiment and variant metadata, so you can filter recordings and heatmaps by variant.

Prerequisites

1. A Microsoft Clarity project
2. The Clarity script installed on your site
3. The Ttoolab pixel installed on the same pages

Important: The Clarity script must load before the Ttoolab pixel.

Install Clarity

Add the Clarity snippet to your site (replace YOUR_CLARITY_PROJECT_ID):

<script type="text/javascript">
  (function(c,l,a,r,i,t,y){
    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "YOUR_CLARITY_PROJECT_ID");
</script>

Then install the Ttoolab pixel as described in Installation.

Enable the integration

1. Open Integrations → Microsoft Clarity in the Ttoolab dashboard.
2. Enable the Clarity integration for your project.

When enabled, the SDK sets Clarity tags and fires custom events on exposures and conversions.

What the SDK sends to Clarity

On each exposure or conversion, for each active assignment:

const clarity = window.clarity;
if (!clarity) return;

clarity("set", "ttoolab_experiment_id", "EXPERIMENT_ID");
clarity("set", "ttoolab_experiment_name", "Hero CTA Test");
clarity("set", "ttoolab_variant_id", "VARIANT_ID");
clarity("set", "ttoolab_variant_name", "Variant B");

clarity("event", "ttoolab_exposure"); // or "ttoolab_conversion"

Filter in Clarity

Use these tags in the Clarity dashboard:

| Tag | Purpose | | :— | :------ | | ttoolab_experiment_name | Filter by experiment | | ttoolab_variant_name | Filter by variant | | ttoolab_experiment_id | Filter by experiment ID | | ttoolab_variant_id | Filter by variant ID |

Custom events ttoolab_exposure and ttoolab_conversion appear in Clarity’s event list.

Capabilities

When the integration is active, Ttoolab provides:

• Session tags with experiment and variant metadata
• ttoolab_exposure event on each exposure
• ttoolab_conversion event on each tracked conversion

Troubleshooting

• If tags are missing, confirm Clarity loads before the Ttoolab pixel.
• Check that window.clarity is defined before bootstrap completes.
• Verify the integration is enabled in the Ttoolab dashboard.
• See Common issues.

Next steps

• Google Analytics
• Experiments overview