Integrate Convert Experiences with Klaviyo

🚀 THIS ARTICLE WILL HELP YOU:

• Convert-Klaviyo Integration
• Add Tracking Code Snippets
• Activate Convert-Klaviyo Integration 
• View Convert Data in Klaviyo

🔗 Convert-Klaviyo Integration

Klaviyo helps growth-focused eCommerce brands drive more sales with super-targeted, highly relevant email, Facebook and Instagram marketing.

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

📋 Add Tracking Code Snippets

Make sure the Convert tracking code and the Klaviyo snippet are installed on your page. Once you have added the codes to your website, you will be able to use Klaviyo account to start sending more personalised emails to your customers through smart data decisions.  

⚙️ Activate Convert-Klaviyo Integration 

Add the code below to your website right after the Convert + Klaviyo tracking codes which will send Convert Experience and Variation names to your Klaviyo account. We are using event tracking:

<script>
    var refObject = window['convert']['data']['experiments'];

    for (var key in window["convert"]["currentData"]["experiments"]) {
        if (!window["convert"]["currentData"]["experiments"].hasOwnProperty(key)) {
            continue;
        }

        var currentExperiment = window["convert"]["currentData"]["experiments"][key];
        var curExperimentName = refObject[key] && refObject[key].n ? refObject[key].n : "unknown experiment name";
        curExperimentName = curExperimentName.replace("Test #", "Test ");
        var curVariant = currentExperiment['variation_name'] ? currentExperiment['variation_name'] : "unknown variant";
        curVariant = curVariant.replace("Var #", "Variation ");

        _learnq.push(['track', 'Convert Experience', { 'Experience': curExperimentName, 'Variation': curVariant }]);
    }
</script>

The following code is for the newer, v1, version of the tracking code:

// Convert snippet lifecycle hook for experiences evaluated
window._conv_q = window._conv_q || [];
_conv_q.push({
  what: 'addListener',
  params: {
    event: 'snippet.experiences_evaluated',
    handler: function () {
      console.log('All experiences have been evaluated');
      // Prepare the data for each experiment and variation
      const data = Object.keys(convert.currentData.experiences).map(
        getEventData
      );
      // Wait for the Klaviyo library to be available
      whenAvailable('_learnq', function () {
        // Once Klaviyo is available, process and send data
        sendDataToKlaviyo(data);
      });
    }
  }
});

// Function to handle the data sending to Klaviyo
function sendDataToKlaviyo(data) {
  if (typeof _learnq?.push === 'function') {
    data.forEach(({experienceName, variationName}) => {
      _learnq.push([
        'track',
        'Convert Experience',
        {
          Experience: experienceName,
          Variation: variationName
        }
      ]);
      console.log(
        'Sent data to Klaviyo: Experience =',
        experienceName,
        'Variation =',
        variationName
      );
    });
  } else {
    console.error('Klaviyo tracking function (_learnq) is not available.');
  }
}

// Function to get experience and variation names for Klaviyo
function getEventData(experienceId) {
  const configExperiences = convert.data.experiences;
  const currentExperience = convert.currentData.experiences[experienceId];
  const experience = configExperiences.find(({id}) => id === experienceId);
  if (!experience) return {};
  const experienceName = String(
    experience?.name || 'unknown experiment name'
  ).replace('Test #', 'Test ');
  const variationName = String(
    currentExperience.variaiton?.name || 'unknown variant'
  ).replace('Var #', 'Variation ');
  return {
    experienceName,
    variationName
  };
}

// Function to check if a library (e.g., Klaviyo) 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

  let 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);
}

📊 View Convert Data in Klaviyo

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