Integrate Convert Experiences with Microsoft Clarity

🚀 This Article Will Help You:

• Convert-Microsoft Clarity Integration
• Sign Up at the Clarity Website
• Add Tracking Code Snippets
• Activate Convert-Clarity Integration 
• View Convert Data in Clarity Dashboard

🔗  Convert-Microsoft Clarity Integration

Convert Experiences can integrate with Microsoft Clarity and this integration offers session replays and heatmaps per experience. Replaying sessions per variation is important for any agency and conversion rate optimization expert.

For each experiment, the integration uses custom instrumentation events to pass along the experiment name and variation name that the visitor is currently bucketed into.

📝 Sign Up at the Clarity Website

Sign up at the Clarity website using your Microsoft or Facebook or Google account. 

When you create a new Clarity project you will be able to retrieve the uniquely generated JavaScript code for your project. 

Clarity works on any HTML webpage (desktop or mobile) after adding this small piece of JavaScript to the website. As soon as the script is added, Clarity receives your site’s data and you can start using Clarity.

The JavaScript code listens to browser events and instruments layout changes, network requests and user interactions. That data is then uploaded and stored in the Clarity server running on Microsoft Azure. 

📜 Add Tracking Code Snippets

Make sure the Convert tracking code and the Clarity JS code are installed on your page. Once you have added the codes to your website, you will be able to use the Clarity dashboard to start replaying user sessions and gain insights.  

⚙️ Activate Convert-Clarity Integration 

This is the code you need to insert in your Your Project Configuration Global Project Javascript:

/* * CONVERT.COM TO MICROSOFT CLARITY INTEGRATION 
 * Release Date: April 1st, 2026
 * Description: Captures raw Experiment and Variation IDs. 
 * Includes Debugging Flag and enhanced logging.
 */
(function () {
  // --- CONFIGURATION ---
  var debugMode = true; // Set to false to disable all console logs
  // ---------------------

  if (debugMode) {
    console.log("⚡ Clarity Bridge [v8.debug] - Active (Release: 2026-04-01)");
  }

  window._conv_q = window._conv_q || [];
  window._conv_q.push({
    what: 'addListener',
    params: {
      event: 'snippet.experiences_evaluated',
      handler: function () {
        var retryCount = 0;
        if (debugMode) console.log("🔍 Bridge: Event 'experiences_evaluated' detected. Starting data scan...");

        var checkData = setInterval(function () {
          retryCount++;

          var cv = window.convert;
          var cl = window.clarity;
          var current = cv && cv.currentData;
          var active = (current && (current.experiences || current.experiments)) || {};

          var ids = [];
          for (var key in active) {
            if (active.hasOwnProperty(key)) ids.push(key);
          }

          // Logging status if debugging is enabled
          if (debugMode && retryCount % 2 === 0) {
            console.log("⏱️ Bridge Polling (Attempt " + retryCount + "): ClarityReady=" + (typeof cl ===
              "function") + " | ActiveTests=" + ids.length);
          }

          // Check if both libraries and bucket data are ready
          if (typeof cl === "function" && ids.length > 0) {
            clearInterval(checkData);

            if (debugMode) console.log("✅ Bridge: Prerequisites met. Processing " + ids.length +
              " test(s).");

            for (var i = 0; i < ids.length; i++) {
              var expId = ids[i];
              var bucket = active[expId];
              var varId = null;

              // Robust extraction for nested structure { variation: { id: "..." } }
              if (bucket && typeof bucket === 'object') {
                if (bucket.variation && bucket.variation.id) {
                  varId = bucket.variation.id;
                  if (debugMode) console.log("📍 Exp " + expId + ": Found nested Variation ID.");
                } else {
                  varId = bucket.variation_id || bucket.v || bucket.id;
                  if (debugMode) console.log("📍 Exp " + expId + ": Found flat Variation ID.");
                }
              } else {
                varId = bucket;
                if (debugMode) console.log("📍 Exp " + expId + ": Found raw value Variation ID.");
              }

              // Send to Clarity
              if (expId && varId !== null && varId !== undefined) {
                window.clarity("set", "Exp_" + (i + 1), String(expId));
                window.clarity("set", "Var_" + (i + 1), String(varId));

                if (debugMode) {
                  console.log("%c🚀 CLARITY PUSH SUCCESS: " + expId + " | " + varId,
                    "color: #00ff00; font-weight: bold;");
                }
              } else if (debugMode) {
                console.warn("⚠️ Bridge: Could not resolve a Variation ID for Experiment " + expId, bucket);
              }
            }
            return;
          }

          // Safety timeout (5 seconds)
          if (retryCount > 10) {
            clearInterval(checkData);
            if (debugMode) {
              console.log(
                "ℹ️ Clarity Bridge: Data check concluded (No active tests found or Clarity missing).");
            }
          }
        }, 500);
      }
    }
  });
})();

📊 View Convert Data in Clarity Dashboard

Using a custom tag in Clarity, you will be able to view all of your Convert Experiences data as they associate to the values that you pass in the tag.