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:

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.

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

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).

PHP

1

2

3

4

$servername="localhost";

$username="username";

$password="password";

$dbname="database";

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.

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.

1

aggressive:false

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.