Integrations
      Back to home
      1. Help Center
      2. Integrations

      Integrate Convert Experiences with Klaviyo

      THIS ARTICLE WILL HELP YOU:


      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.