Testing and Tracking Poptin Popups with Convert Experiences

IN THIS ARTICLE YOU WILL

• Understand the purpose of integrating Poptin

• Review the prerequisites

• Show Poptin popups with code

• Track popups as goals

• Use code examples

• Test your setup

• Get A/B testing ideas

• Fix common issues

Introduction

This guide will show you how to programmatically display Poptin popups and track their impressions as goals within Convert Experiences. By the end of this article, you'll be able to:

• Trigger Poptin popups using JavaScript

• Track popup displays as Convert goals

• Test different popup trigger strategies in your A/B tests

Prerequisites

• An active Convert Experiences account

• A Poptin account with popups already created

• Your Poptin popup ID(s)

• Basic understanding of JavaScript or access to a developer

Showing Poptin Popups Programmatically

Step 1: Locate Your Poptin ID

1. Log in to your Poptin dashboard

2. Open the popup you want to display

3. Find the popup ID in the URL or in the popup settings

4. Make note of this ID for later use

Step 2: Add Code to Trigger the Popup

In Convert Experiences, navigate to:
Visual Editor > Code Editor > Variation JS
Add the following code (without script tags):

document.addEventListener('DOMContentLoaded', function() {
  // Ensure Poptin is loaded before trying to use it
  var poptinCheck = setInterval(function() {
    if (typeof poptin_show !== 'undefined' || typeof poptin !== 'undefined') {
      clearInterval(poptinCheck);

      // Replace 'YOUR_POPTIN_ID' with your actual Poptin ID
      poptin_show('YOUR_POPTIN_ID');

      // Alternative method:
      // poptin.show('YOUR_POPTIN_ID');
    }
  }, 100);
});

Tracking Popup Events as Convert Goals

Step 1: Create a Custom Goal in Convert

1. Log in to your Convert dashboard

2. Navigate to Goals → Create Goal

3. Select "Custom Goal" and provide a name (e.g., "Poptin Popup Shown")

4. Save the goal and note the goal ID

Step 2: Add Goal Tracking Code to Global JS

In Convert Experiences, navigate to:
Project > Configuration > Global JS
Add this code (without script tags):

document.addEventListener('DOMContentLoaded', function() {
  // Function to show popup and track as goal
  window.showAndTrackPoptin = function(poptinId, convertGoalId) {
    // Ensure Poptin is loaded
    if (typeof poptin_show !== 'undefined') {
      // Show the Poptin popup
      poptin_show(poptinId);

      // Track in Convert
      window._conv_q = window._conv_q || [];
      _conv_q.push(["triggerConversion", convertGoalId]);

      console.log("Poptin displayed and tracked in Convert");
    } else {
      console.error("Poptin library not loaded yet");
    }
  };

  // Track Poptin form submissions
  document.addEventListener("poptinSubmit", function(event) {
    console.log("Poptin submission detected:", event.detail);

    // Trigger Convert goal for form submission
    window._conv_q = window._conv_q || [];
    _conv_q.push(["triggerConversion", "YOUR_FORM_SUBMISSION_GOAL_ID"]);
  }, false);

  // Detecting experiment variations
  document.addEventListener('convert_experiment_started', function(event) {
    // Get experiment and variation details
    var experimentId = event.detail.experiment_id;
    var variationId = event.detail.variation_id;

    // Wait for Poptin to be available
    var poptinCheck = setInterval(function() {
      if (typeof poptin_show !== 'undefined' || typeof poptin !== 'undefined') {
        clearInterval(poptinCheck);

        // Example: Show different popups based on variation
        if (experimentId === 'YOUR_EXPERIMENT_ID') {
          if (variationId === 'YOUR_VARIATION_A_ID') {
            showAndTrackPoptin('POPTIN_ID_FOR_VARIATION_A', 'CONVERT_GOAL_ID');
          } else if (variationId === 'YOUR_VARIATION_B_ID') {
            showAndTrackPoptin('POPTIN_ID_FOR_VARIATION_B', 'CONVERT_GOAL_ID');
          }
        }
      }
    }, 100);
  });
});

Implementation Examples

Example 1: Show Popup on Button Click (Variation JS)

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('showPopupButton').addEventListener('click', function() {
    // Ensure the function exists and Poptin is loaded
    if (typeof window.showAndTrackPoptin === 'function') {
      window.showAndTrackPoptin('YOUR_POPTIN_ID', 'YOUR_CONVERT_GOAL_ID');
    }
  });
});

Example 2: Show Popup After Scroll Depth (Variation JS)

document.addEventListener('DOMContentLoaded', function() {
  var poptinShown = false;

  window.addEventListener('scroll', function() {
    if (!poptinShown && typeof window.showAndTrackPoptin === 'function') {
      var scrollPercent = (document.documentElement.scrollTop + document.body.scrollTop) / 
                          (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100;

      if (scrollPercent > 50) {
        poptinShown = true;
        window.showAndTrackPoptin('YOUR_POPTIN_ID', 'YOUR_CONVERT_GOAL_ID');
      }
    }
  });
});

Testing Your Implementation

1. Open your website in a browser with Developer Tools enabled

2. Execute your trigger code (click the button, scroll, etc.)

3. Verify that:

   • The Poptin popup appears

   • You see the console log "Poptin displayed and tracked in Convert"

4. Check your Convert dashboard to confirm the goal was registered

A/B Testing Ideas for Poptin Popups

• Test different trigger timing (immediate vs. delayed)

• Compare scroll depth triggers (25% vs. 50% vs. 75%)

• Test exit-intent popups against time-based triggers

• Compare different popup designs or content

Troubleshooting

• Popup doesn't appear: Verify your Poptin ID is correct and the Poptin script is loaded properly

• Convert goal not tracked: Check your Convert goal ID and ensure Convert's tracking code is installed

• Multiple goals triggered: Implement checks to prevent duplicate tracking

• JavaScript errors: Ensure the Poptin library is fully loaded before trying to use it

Need More Help?

Contact our support team at support@convert.com for personalized assistance with your Poptin and Convert integration.