How to create a popup using Google Tag Manager

Making pop-ups with Google Tag Manager is simple. If you are new to using Google Tag Manager click here to know more about it and how to set up Google Tag manager.
We at times need to dynamically change the pop-ups or just need a track of how is my pop-up reach to the audience I’m targeting at. So, in this case, we use the Google Tag Manager to trigger the pop-ups with some simple jQuery and HTML.
To make a popup:

1.) Open your google tag manager account and select tags in the left column and then click new.
2.) In Tag configuration, under Custom select custom HTML tag.
3.) You will then need to enter in the HTML content, i.e. the HTML content for your pop-up.

Code

<style type=”text/css”>
#bn-bar {
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-transition: all 0.5s ease;
position: fixed;
-webkit-transform: translateZ(0);
width: 100%;
height: 25px;
line-height:25px;
top: -35px;
font-size:14px;
z-index: 10000;
background-color:#FF9900;
font-family: “Helvetica Neue”, “Arial”, sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.2);
box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.2);
text-align:center;
}
#hider {
height:100%;
width:30px;
z-index:10001;
float:right;
background-color:#efefef;
background-image:url(‘close_small.png’);
background-position: 7px 5px;
background-repeat:no-repeat;
}

#hider:hover {
background-color:#fff;
cursor:pointer;
}
</style>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<script>
var autohide;
$(‘body’).prepend(‘<div id=”bn-bar”><b>DON\’T MISS OUT!</b> Send customized offer letters automatically by using our Google Sheets Add-On like hundreds of other businesses.<a href=”https://www.mangoblogger.com/onboarding-app/”>Try it for free today!</a><div id=”hider”> </div></div>’);
$(document).ready(function(){
$(“#hider”).click(function(){
$(“#bn-bar”).animate({
top: “-50”
}, “fast”,”linear”, function(){});
})
$(“#bn-bar”).mouseover(function(){clearTimeout(autohide);});
setTimeout(function(){$(“#bn-bar”).animate({top: “0”}, “slow”,”linear”, function(){});},2500);
autohide = setTimeout(function(){$(“#bn-bar”).animate({top: “-30”}, “fast”,”linear”, function(){});},10000);
})
</script>

The prepend() method inserts specified content at the beginning of the selected elements. So in our case the prepend method inserts the HTML content in the body element. This creates the view of our pop-up.

We can always add extra features like we did here on “mouseover”. What that does is, it clears the timeout whenever the mouse hovers over the pop-up for it to disappear from the screen and not stay, mouseover takes a function as an argument.

4.) Now we need to set Triggers under the Triggering so as to when our pop-up will fire and then save the tag.


Prasanna Kulkarni

Founder and CEO of MangoBlogger.com. 6 years of experience in digital marketing. Managed hundreds of dollars in paid search budget. Creator of tools used by businesses all around the world and instructor of the ultimate guide to digital marketing course.

Leave a Reply