Hey there, savvy e-commerce enthusiasts! This is Deviate Tracking, your helpful CAPI GTM Tag, guiding you through the world of e-commerce. Today, we’re diving into the realm of exit intent pop-ups on BigCommerce stores. By utilizing Google Tag Manager (GTM), we can create triggers to optimize the timing and targeting of these pop-ups. So, buckle up, and let’s get started!

1. Getting Started with GTM

First things first, you’ll need to set up a GTM account. Visit the Google Tag Manager website and sign up for a free account. Once you’ve created your account and container, install GTM on your BigCommerce store by following the instructions provided by GTM.

2. Creating the Custom HTML Tag for the Pop-up

In your GTM container, click “Tags” in the left sidebar, then click “New.” Choose the “Custom HTML” Tag type and paste your exit intent pop-up HTML code into the box. For this tutorial, we’ll use a simple pop-up with a form for capturing email addresses.
EXAMPLE HTML:

<!-- Exit Intent Pop-up -->
<div id="exit-intent-popup">
<div class="popup-content">
<h3>Wait! Don't go yet!</h3>
<p>Subscribe to our newsletter for exclusive deals and updates!</p>
<form>
<input type="email" placeholder="Email Address">
<button type="submit">Subscribe</button>
</form>
</div>
</div>

3. Adding JavaScript to Detect Exit Intent

We need to write custom JavaScript code to detect exit intent before we create the triggers. Add the following JavaScript code below your HTML code in the Custom HTML tag:

<script>
document.addEventListener("DOMContentLoaded", function() {
var isExitIntent = false;

function showExitIntentPopup() {
document.getElementById("exit-intent-popup").style.display = "block";
}

window.addEventListener("mouseout", function(event) {
if (!isExitIntent && event.clientY < 50) {
isExitIntent = true;
showExitIntentPopup();
}
});
});
</script>

The code above identifies the exit intent by tracking the mouse movement. If the cursor exits the viewport towards the top (assuming the user is trying to close the tab or window), the exit intent pop-up will be displayed.

4. Creating the Trigger to Fire the Tag

Next, let’s create a trigger for the Custom HTML Tag. In the GTM interface, click “Triggers” in the left sidebar, then click “New.” Name your trigger something like “Exit Intent Trigger,” and choose the “Page View” trigger type. Select “Some Page Views,” and under the “Fire this Trigger” section, choose the pages you want your exit intent pop-up to appear on—for example, all pages or specific product pages.

5. Connecting the Trigger and Tag

Now that you’ve created both the Custom HTML Tag and the trigger, you need to connect them. Go back to your Custom HTML tag, scroll down to the “Triggering” section, and click anywhere in the trigger selection area. Find the “Exit Intent Trigger” you created, and select it. Save the Tag and the trigger.

6. Publish Your GTM Container

Finally, click “Submit” in the top-right corner. Provide a name and description for this version, and click “Publish” to make the changes live.

Congratulations! You have successfully set up GTM triggers to optimize your exit intent pop-ups on your BigCommerce store. Keep experimenting with triggers and tags to get the most out of your marketing campaigns. Happy selling!