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.

<?php

	//Add email and name to the database
	$servername = "localhost";
	$username = "username";
	$password = "password";
	$dbname = "database";

	// Create connection
	$connection = mysqli_connect($servername, $username, $password, $dbname);

	$errors         = array();  	// array to hold validation errors
	$data 			= array(); 		// array to pass back data
	// validate the variables ======================================================
	// if any of these variables don't exist, add an error to our $errors array

	if(filter_var($_POST['name'], FILTER_SANITIZE_STRING) === false) 
	{
		$errors['email'] = "The given name isn't valid.";
	} 
		
	if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) 
	{
		$errors['email'] = "The given email isn't valid.";
	} 
	
	if (empty($_POST['name']))
	{
		$errors['name'] = "Your name is required for signing up.";
	}
			
	if (empty($_POST['email']))
	{	
		$errors['email'] = "You email is required for signing up.";
	}
		
	// return a response ===========================================================
	// if there are any errors in our errors array, return a success boolean of false
	if (!empty($errors)) 
	{
		// if there are items in our errors array, return those errors
		$data['success'] = false;
		$data['errors']  = $errors;
	} 
	else 
	{
		// if there are no errors process our form, then return a message
		// DO ALL YOUR FORM PROCESSING HERE
		// THIS CAN BE WHATEVER YOU WANT TO DO (LOGIN, SAVE, UPDATE, WHATEVER)
		// show a message of success and provide a true success variable

		//Check if emailadres isn't allready in our database
		$sql = "SELECT name, email FROM newsletter WHERE email = '".$_POST['email']."'";
		$result = mysqli_query($connection, $sql);
		
		//When the email doesn't exist in the database
		if(mysqli_num_rows($result) == 0)
		{
			$data['success'] = true;
			$data['message'] = 'Success!';	

			//Add name and email to the database
			$sql = "INSERT INTO newsletter (name, email) VALUES ('".$_POST['name']."', '".$_POST['email']."')";
			mysqli_query($connection, $sql); 		
		}
		else
		{
			$errors['email'] = "Emailadres is allready added to the database!";
			$data['success'] = false;
			$data['errors']  = $errors;		
		}

		mysqli_close($connection);
	}
	// return all our data to an AJAX call
	echo json_encode($data);

<?php

//Add email and name to the database

$servername = "localhost";

$username = "username";

$password = "password";

$dbname = "database";

// Create connection

$connection = mysqli_connect($servername, $username, $password, $dbname);

$errors = array(); // array to hold validation errors

$data = array(); // array to pass back data

// validate the variables ======================================================

// if any of these variables don't exist, add an error to our $errors array

if(filter_var($_POST['name'], FILTER_SANITIZE_STRING) === false)

{

$errors['email'] = "The given name isn't valid.";

}

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false)

{

$errors['email'] = "The given email isn't valid.";

}

if (empty($_POST['name']))

{

$errors['name'] = "Your name is required for signing up.";

}

if (empty($_POST['email']))

{

$errors['email'] = "You email is required for signing up.";

}

// return a response ===========================================================

// if there are any errors in our errors array, return a success boolean of false

if (!empty($errors))

{

// if there are items in our errors array, return those errors

$data['success'] = false;

$data['errors'] = $errors;

}

else

{

// if there are no errors process our form, then return a message

// DO ALL YOUR FORM PROCESSING HERE

// THIS CAN BE WHATEVER YOU WANT TO DO (LOGIN, SAVE, UPDATE, WHATEVER)

// show a message of success and provide a true success variable

//Check if emailadres isn't allready in our database

$sql = "SELECT name, email FROM newsletter WHERE email = '".$_POST['email']."'";

$result = mysqli_query($connection, $sql);

//When the email doesn't exist in the database

if(mysqli_num_rows($result) == 0)

{

$data['success'] = true;

$data['message'] = 'Success!';

//Add name and email to the database

$sql = "INSERT INTO newsletter (name, email) VALUES ('".$_POST['name']."', '".$_POST['email']."')";

mysqli_query($connection, $sql);

}

else

{

$errors['email'] = "Emailadres is allready added to the database!";

$data['success'] = false;

$data['errors'] = $errors;

}

mysqli_close($connection);

}

// return all our data to an AJAX call

echo json_encode($data);

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

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$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:

<style>
    #ouibounce-modal {
      	display: none;  
    }
  
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        background: 	url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat fixed transparent\9;
        z-index: 9998;
        color: #fff;
        transition: opacity 500ms;
    }
  
    .content h2 {
        font-size: 17pt;
        color: #777;
    }

    .popup {
        margin: 0px;
        padding: 20px;
        z-index: 9999;    
        padding-bottom: 0px;
        text-align: left;
        height: 450px;
        background: #fff;
        border-radius: 5px;
        width: 700px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #000;
    }

    .popup .closePopupCross {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
    }
  
    .form-group {
    	padding-top: 20px;    
    }
  
    .help-block {
    	font-size: 10pt;
    	color: #C71585;
    }
  
    .popup .closePopupLink {
	font-size: 11pt;
    	color: #aaa;
    	margin-left: 30px;
    }  
  
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.11/ouibounce.min.js"></script>

<script>
    
$(document).ready(function() {
    
        $('body').prepend('<div id="ouibounce-modal"><div class="overlay"></div><div class="popup"><a class="closePopupCross" href="#">×</a><div class="content"><h2>Want to stay in touch with new updates?</h2>Fill out the form to subscribe to my newsletter!<form action="/progress.php" method="POST" id="newsletter_popup"><div id="name-group" class="form-group"><label for="name">Name</label><input type="text" class="form-control" name="name" placeholder="Your name"></div><div id="email-group" class="form-group"><label for="email">Email</label><input type="text" class="form-control" name="email" placeholder="mail@example.com"></div><br/><button type="submit" class="">Sign up</button> <a class="closePopupLink" href="#">No thanks!</a></form></div></div></div>');

        $('.closePopupLink, .closeLeavePage, .overlay').click(function() {
            $('.overlay, .popup').fadeOut(500);
        });
  
        $('#newsletter_popup').submit(function(event) {

              $('.form-group').removeClass('has-error');
              $('.help-block').remove();

              var formData = {
                  'name' 				: $('input[name=name]').val(),
                  'email' 				: $('input[name=email]').val()
              };

              jQuery.ajax({
                  type 			: 'POST',
                  url 			: '/progress.php',
                  data 			: formData,
                  dataType 		: 'json',
                  encode 		: true,
                  async 		: true
              })
              .done(function(data) 
              {
                  console.log(data); 

                  if(!data.success) 
                  {					
                      if(data.errors.name) 
                      {
                          $('#name-group').addClass('has-error');
                          $('#name-group').append('<div class="help-block">' + data.errors.name + '</div>');
                      }

                      if(data.errors.email) 
                      {
                          $('#email-group').addClass('has-error');
                          $('#email-group').append('<div class="help-block">' + data.errors.email + '</div>');
                      }
                  } 
                  else 
                  {
                      $('#newsletter_popup').append('<div class="alert alert-success">' + data.message + '</div>');
                      //window.location = '/thank-you';
                  }
              })
              .fail(function(data) {
                  console.log(data);
              });

              event.preventDefault();
        });
  
        var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
        	aggressive: true,
        	timer: 0,
        	callback: function() { console.log('ouibounce fired!'); }
      	});
});

</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

<style>

#ouibounce-modal {

display: none;

}

.overlay {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(0, 0, 0, 0.4);

background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat fixed transparent\9;

z-index: 9998;

color: #fff;

transition: opacity 500ms;

}

.content h2 {

font-size: 17pt;

color: #777;

}

.popup {

margin: 0px;

padding: 20px;

z-index: 9999;

padding-bottom: 0px;

text-align: left;

height: 450px;

background: #fff;

border-radius: 5px;

width: 700px;

position: fixed;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

color: #000;

}

.popup .closePopupCross {

position: absolute;

top: 20px;

right: 30px;

transition: all 200ms;

font-size: 30px;

font-weight: bold;

text-decoration: none;

color: #333;

}

.form-group {

padding-top: 20px;

}

.help-block {

font-size: 10pt;

color: #C71585;

}

.popup .closePopupLink {

font-size: 11pt;

color: #aaa;

margin-left: 30px;

}

</style>

$(document).ready(function() {

$('body').prepend('<div id="ouibounce-modal"><div class="overlay"></div><div class="popup"><a class="closePopupCross" href="#">×</a><div class="content"><h2>Want to stay in touch with new updates?</h2>Fill out the form to subscribe to my newsletter!<form action="/progress.php" method="POST" id="newsletter_popup"><div id="name-group" class="form-group"><label for="name">Name</label><input type="text" class="form-control" name="name" placeholder="Your name"></div><div id="email-group" class="form-group"><label for="email">Email</label><input type="text" class="form-control" name="email" placeholder="mail@example.com"></div><br/><button type="submit" class="">Sign up</button> <a class="closePopupLink" href="#">No thanks!</a></form></div></div></div>');

$('.closePopupLink, .closeLeavePage, .overlay').click(function() {

$('.overlay, .popup').fadeOut(500);

});

$('#newsletter_popup').submit(function(event) {

$('.form-group').removeClass('has-error');

$('.help-block').remove();

var formData = {

'name' : $('input[name=name]').val(),

'email' : $('input[name=email]').val()

};

jQuery.ajax({

type : 'POST',

url : '/progress.php',

data : formData,

dataType : 'json',

encode : true,

async : true

})

.done(function(data)

{

console.log(data);

if(!data.success)

{

if(data.errors.name)

{

$('#name-group').addClass('has-error');

$('#name-group').append('<div class="help-block">' + data.errors.name + '</div>');

}

if(data.errors.email)

{

$('#email-group').addClass('has-error');

$('#email-group').append('<div class="help-block">' + data.errors.email + '</div>');

}

else

{

$('#newsletter_popup').append('<div class="alert alert-success">' + data.message + '</div>');

//window.location = '/thank-you';

}

})

.fail(function(data) {

console.log(data);

});

event.preventDefault();

});

var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {

aggressive: true,

timer: 0,

callback: function() { console.log('ouibounce fired!'); }

});

</script>

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.

aggressive: false

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.

Was it interesting? Share it, so someone else can read this too!

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

Steve says:

8 September 2015 at 18:09

Thank you for this tutorial! My only question is:
Why use that encrypted Base64 code for the Background? Seems kind of seedy to do that.

Dana says:

17 November 2015 at 22:22

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?

Francois says:

13 July 2017 at 15:56

Very usefull ! I use it to fire a survey for user who leave my website.

Create an exit popup with the Google Tag Manager

Short version

Step 1

Step 2

Step 3

Step 4

Step 5

Conclusion

Related

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

Leave a Reply Cancel reply