Integrating Lyssna with Convert.com (SPA & Live Web Ready)

IN THIS ARTICLE YOU WILL:

• Get an Overview of the Integration

• Understand the Script

• Analyse Results in Lyssna

• Some Technical Notes

• Verification Process

Overview

This integration allows you to pass Convert.com experiment data into Lyssna as Custom Variables. This is incredibly powerful for "Live Website Testing" in Lyssna, as it allows you to filter your usability heatmaps, click maps, and video recordings by the specific A/B test variation the participant was assigned to.

The Integration Script

Add this script to Project Settings > Global JavaScript in your Convert dashboard. It uses the snippet.experiences_evaluated event to ensure that even in SPAs, the correct variation data is sent to Lyssna.

window._conv_q = window._conv_q || [];


// 1. Listen for the Convert lifecycle event
_conv_q.push({
  what: 'addListener',
  params: {
    event: 'snippet.experiences_evaluated',
    handler: function() {
      var attempts = 0;
      
      // 2. Poll for the Lyssna tracking snippet
      var waitForLyssna = function() {
        // Lyssna uses 'usabilityhub' or 'lyssna' depending on your snippet version
        var lyssnaObj = window.Lyssna || window.UsabilityHub;
        
        if (typeof lyssnaObj !== "undefined") {
          sendToLyssna(lyssnaObj);
        } else if (attempts < 50) {
          attempts++;
          setTimeout(waitForLyssna, 100); 
        }
      };
      
      waitForLyssna();
    }
  }
});


// 3. Send variation data as Custom Variables
function sendToLyssna(api) {
  var experiences = window.convert.currentData.experiences;
  
  for (var expId in experiences) {
    var exp = experiences[expId];
    
    // Set Custom Variables in Lyssna
    // These will appear in your Lyssna results dashboard
    api('variable', 'exp_name', exp.name);
    api('variable', 'var_name', exp.variation.name);
  }
}

How to Analyze Results in Lyssna

Once your Lyssna "Live Website Test" is active and receiving traffic from your Convert experiment, you can filter your research data:

1. Open your Study Results: Navigate to your active study in the Lyssna dashboard.
2. Filter by Variable: Click on the "Filter" icon at the top of your results.
3. Select Your Variation: Look for the custom variable var_name. You can now select "Variation A" or "Variation B".
4. View Segmented Insights:
   • Heatmaps: See if users in "Variation B" struggle more with navigation than those in the "Original."
   • Task Completion: Compare the time-on-task between different A/B test groups.
   • Video Responses: Watch recordings specifically from users who saw your new design to hear their qualitative feedback.

Technical Notes

• Variable Naming: Lyssna custom variables are case-sensitive. The script uses exp_name and var_name.
• SPA Support: Because we use the experiences_evaluated hook, if a user navigates to a new "page" in your SPA and Convert triggers a new experiment, Lyssna will be updated with the most recent variation data.
• Lyssna Version: If you are using an older version of Lyssna, the global object might be UsabilityHub. The script above is designed to detect both the old and new branding automatically.

Verification

• Asynchronous: The setTimeout ensures that Lyssna’s researcher-facing script (which can be heavy) doesn't block Convert's execution.
• Accuracy: Using the api('variable', ...) method is the official Lyssna way to tag participants with external metadata.