Create an exit popup with the Google Tag Manager

These days when you are browsing the web, many websites are using popup boxes to turn you into a newsletter subscriber when you are leaving the page. There are many tools on the web who provide this conversion booster. An example is SumoMe.  Unless it’s free, they serve a link to their website.

In this blogpost I am going to explain how we could use the Google Tag Manager to show up a popup box for leaving visitors. Turning leaving visitors into newsletter subscribers is the goal of this blogpost.

Inspired by this blog post, i have created my own (extended) version. It also handles saving the posted data to the database. Maybe it is a bit complicated, but i have tried my best to keep it as simple possible.

An example of what we are going to build:

previewpopupbox

The technology we are going to use to determine if someone is leaving our website is Ouibounce. This javascript module, written by Carl Sednaoui (thanks!), gives us the trigger we need. I will re-use my popup box code that i have used for showing up a facebook popup.

Short version

Step 1

Create a new table in your database. Use PhpMyAdmin to create a new table.

select database and create table

Choose Table name newsletter. Copy the settings below and push Save.

create newsletter table

Step 2

Next step is creating a new .php file. We will use this for validating and storing our data in our database. Use the script below to create a new file on your computer and upload it to the root directory of your server. The name of the file should be progress.php. The reason for this is that we are using it in our Custom Html tag.

Step 3

To save our obtained data into our database we should edit these lines to use our own credentials. These credentials are served by your hosting provider. The database should be the same as the one where you have added the new table newsletter (step 1).

Step 4

Create a new Custom Html Tag in the Google Tag Manager with these lines of code:

Set the trigger All pages and use isMobile as exception. Instructions how to create the isMobile trigger. We don’t want to show up the popup if your visitor is on a mobile device.

fireon

Step 5

Test if the popup box works as expected. It should popup if you move your cursor to the edge. Set some options to make it fit your needs. To increase the user experience you could set aggressive to false in the Google Tag Manager Custom Html tag. This will show up the popup once per session.

Conclusion

A nice solution to get more newsletter subscribers. Don’t overuse this opportunity to spam your visitors. It may be counterproductive.

Looking for some explanation?

I will update this post at a later moment with a comprehensive explanation.

Was it interesting? Share it, so someone else can read this too!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

3 thoughts on “Create an exit popup with the Google Tag Manager”

  1. Question: how can you see statistics for this approach? I’d like to know how often it was triggered, and what the “conversion” rate is to get signups. Does it show in Google Analytics?

Leave a Reply

Your email address will not be published. Required fields are marked *