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 

Add the code below to your website right after the Convert + Clarity tracking codes which will send Convert Experience and Variation names to Clarity Dashboard. We are using custom tags:

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

// Function to handle the data sending to another platform
function sendDataToPlatform(data) {
    if (typeof clarity === "function") {
        data.forEach(item => {
            clarity("set", "Exp_Name", item.expName);
            clarity("set", "Var_Name", item.varName);
            console.log("Sent data to platform: Exp_Name =", item.expName, "Var_Name =", item.varName);
        });
    } else {
        console.error("Clarity function is not available.");
    }
}

// Function to check if a library (e.g., Clarity) is loaded, with a timeout
function whenAvailable(name, callback) {
    const maxTime = 150 * 1000; // Maximum time to wait in milliseconds (2.5 minutes)
    const interval = 100; // Poll every 100 milliseconds
    let elapsedTime = 0; // Track the elapsed time

    var intervalId = setInterval(function() {
        if (window[name]) {
            clearInterval(intervalId);
            callback();
        } else if (elapsedTime > maxTime) {
            clearInterval(intervalId);
            console.error(name + " library did not load in time.");
        }
        elapsedTime += interval;
    }, interval);
}

// Convert snippet lifecycle hook for experiences evaluated
window._conv_q = window._conv_q || [];
window._conv_q.push({
    what: 'addListener',
    params: {
        event: 'snippet.experiences_evaluated',
        handler: () => {
            console.log("All experiments have been evaluated");

            // Prepare the data for each experiment and variation
            const allData = Object.keys(convert.currentData.experiences).map(expId => {
                const expData = convert.currentData.experiences[expId];
                const variation = expData.variation;
                let experimentName = convert.data.experiences.find(exp => exp.id === expId)?.name || 'Unknown Experiment';
                return { expName: experimentName, varName: variation.name };
            });

            // Wait for the Clarity library to be available
            whenAvailable('clarity', function() {
                // Once Clarity is available, process and send data
                sendDataToPlatform(allData);
            });
        }
    }
});

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.