Integrations
      Back to home
      1. Help Center
      2. Integrations

      Integrate Convert Experiences with Triple Whale Analytics

      Convert-Triple Whale Analytics Integration

      IN THIS ARTICLE YOU WILL:

      Overview

      Integrating Convert Experiences with Triple Whale Analytics allows you to track experiments and variations directly within Triple Whale. This integration enhances your conversion rate optimization efforts by enabling the analysis of user behavior for each variation of your experiments. Custom events are used to pass the experiment and variation names the visitor is bucketed into.

      Sign Up for Triple Whale Analytics

      1. Visit the Triple Whale Website
        Go to the Triple Whale website and sign up.

      2. Create an Account
        Register using your email address and follow the prompts to set up your account.

      3. Obtain Your Pixel ID
        After setup, you’ll receive a unique Triple Pixel ID required for tracking.

      Add Tracking Code Snippets

      To track user interactions, ensure that both the Convert Experiences tracking code and the Triple Whale Pixel are added to your website.

      1. Install the Convert Tracking Code

        • Navigate to Project Settings > Tracking Code in your Convert Experiences account.
        • Add the tracking code to the <head> section of your website’s HTML.

      2. Install the Triple Whale Pixel

        • Add the Triple Whale Pixel to your website as per Triple Whale’s guidelines.

      Activate the Convert-Triple Whale Integration

      Add the following JavaScript code to your website, immediately after the Convert and Triple Whale tracking codes. This sends custom events containing experiment and variation names to Triple Whale Analytics.

      // Function to handle the data sending to Triple Whale
      function sendDataToPlatform(data) {
          if (typeof triple === "function") {
              data.forEach(item => {
                  triple('track', 'Convert Experiment Viewed', {
                      experimentName: item.expName,
                      variationName: item.varName
                  });
                  console.log("Sent data to Triple Whale: experimentName =", item.expName, "variationName =", item.varName);
              });
          } else {
              console.error("Triple Whale function is not available.");
          }
      }

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

          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 Triple Whale library to be available
                  whenAvailable('triple', function() {
                      sendDataToPlatform(allData);
                  });
              }
          }
      });

      Explanation of the Code:

      • sendDataToPlatform Function: Sends custom events with experiment and variation names to Triple Whale.
      • whenAvailable Function: Ensures the Triple Whale library is loaded before attempting to send data.
      • Event Listener: Captures the snippet.experiences_evaluated event, gathers experiment data, and triggers the data transfer process.

      Steps to Implement

      • Access Global Project JavaScript

        • Navigate to Project Settings > Global Project JavaScript in Convert Experiences.

      • Insert the Code

        • Paste the provided code into the editor.

      • Save and Publish

        • Click Save to apply the changes and Publish any unpublished changes in your project.

      View Convert Data in Triple Whale Dashboard

      • Log into Triple Whale
        Sign in to your account on the Triple Whale website.

      • Navigate to Events
        Go to the Events or Custom Events section in the dashboard.

      • Filter for Convert Experiment Viewed Events
        Use filters or search functionality to locate events named Convert Experiment Viewed.

      • Analyze Experiment Interaction
        Review data such as experimentName and variationName to understand user behavior.

      Additional Tips

      • Test the Integration: Visit your website to trigger experiments and check if events appear in Triple Whale.
      • Leverage the Data: Use Triple Whale’s analytics tools to segment users and gain insights.
      • Stay Updated: Monitor updates from Convert Experiences and Triple Whale for new features.