How to show an exit-intent pop-up with GTM
This article explores how to effectively set up an exit-intent pop-up to capture visitors' information before they leave your website
Implementing exit-intent pop-ups using Google Tag Manager (GTM) can significantly enhance user engagement and reduce bounce rates on your website. This article will guide you through the step-by-step process of setting up an effective exit-intent pop-up, leveraging GTM to capture visitors' attention just as they are about to leave your site.
The whole process consists of 3 main elements: the pop-up, the exit-intent event and the automation that unites them.
What is the exit intent pop-up
An exit-intent pop-up is a type of online advertisement that appears when a user is about to leave a website. Using technology to track cursor movements and scrolling behavior, these pop-ups are triggered to display a message or offer just as the user shows intent to exit the page. The goal of exit-intent pop-ups is to capture the user's attention one last time, often to encourage them to stay, complete a purchase, sign up for a newsletter, or engage with the content in some other way.
How to create an exit intent pop-up
First let's focus on creating a pop-up. For an exit-intent pop-up to be effective, it should have the following characteristics:
Clear and Concise Message: The content should be straightforward and to the point, immediately communicating the value or offer.
Strong Call to Action (CTA): Include a compelling CTA that stands out, encouraging users to take immediate action, such as "Sign Up Now," "Get Your Discount," or "Download Free Guide."
Eye-Catching Design: Use bold colors, high-contrast elements, and an attractive layout that grabs attention without being too distracting or annoying.
Minimal Form Fields: If capturing information, keep form fields to a minimum to reduce friction and make it quick and easy for users to complete.
Responsive: Ensure the pop-up is optimized for all devices, including desktops and tablets for a seamless user experience.
Relevant Imagery: Use relevant and appealing images or icons that support the message and make the pop-up visually appealing.
Exit Option: Include a clear and easy way to close the pop-up, such as a visible 'X' button, to avoid frustrating the user and ensure a good user experience.
To create a pop-up in User.com you need to go to Tools > Pop-ups section and choose one of two possible options:
You can create a pop-up using the HTML editor or go with the simple pop-up builder. To know more about pop-up creation please check this article.
Here is an example of such a pop-up:
How to create exit intent event with GTM
To show a pop-up on the page in a right moment we need to catch the "Exit intent" event. To do so, we need to configure a tag in the Google Tag Manager (GTM) to send this event to the User.com application. Later on we will use the event in the automation.
Make sure you have GTM container installed on your website.
If you use other methods of sending the data to User.com, please check our API docs.
So, let's move to GTM and create a new tag: User.com | Exit intent event
Please remember, this script is intended for a desktop use!
<script>
function addEvent(obj, evt, fn) {
obj.addEventListener(evt, fn, false);
}
function handleMouseLeave(evt) {
if (window.sessionStorage) {
var timeout = JSON.parse(window.sessionStorage.getItem('__ue__timeout'));
if (timeout) {
var elapsedTime = (new Date() - timeout) / (1000 * 60);
if (elapsedTime <= 1) {
return;
}
}
}
if (evt.clientY <= 0) {
userengage('event.Exit intent', {
URL: window.location.href
});
if (window.sessionStorage) {
window.sessionStorage.setItem('__ue__timeout', JSON.stringify(+new Date()));
}
}
}
addEvent(document, 'mouseleave', handleMouseLeave);
</script>
Possible adjustments:
In if (elapsedTime <= 1) you can modify interval for how often User.com event can be sent.
Default value of 1 means that the User.com Event will not be sent more often than once per minute.In userengage('event.Exit intent', you can modify the Event Name.
In URL: window.location.href you can modify URL attribute, which passes current website url.
When it comes to the trigger you need to decide when and where you want the event to be sent. It can be "all pages" or only specific pages where you want to catch the exit intent of the visitors.
Also, we recommend to take the User.com implementation script loading into account.
Automation for the exit intent pop-up
When you have both pop-up and the event tested and ready you can finally go to the Automations section to build the flow and make it live.
It is a simple automation that combines the elements you previously created.
Example:
Event trigger should include the event "Exit intent" that you have implemented via GTM.
Show a pop-up should include the pop-up that you have configured in Tools > Pop-ups.
Create Event module is needed if you collect the email address and the marketing consent in your pop-up to redirect the user to the Double opt-in flow. (Otherwise it's not necessary).
Timing recommended: Max once per day.
By following this guide, you'll be able to effectively implement exit-intent pop-ups with Google Tag Manager, helping you retain visitors, boost conversions, and enhance overall user engagement on your website. Start leveraging this powerful tool today to capture valuable leads and reduce bounce rates.
Elements used in this use case
Automations
Pop-ups
GTM tag