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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<?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).
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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> |
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.
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.
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?
Very usefull ! I use it to fire a survey for user who leave my website.