Tech Mastery: Deep Dives into AEM, Cloud Technologies, AI Innovations, and Advanced Marketing Strate

How to display the dynamic popup in a page through GTM?

This post will explain how to display the dynamic popup in a page through GTM.

The assumption is the required JQuery scripts are included as part of the page.

Define the cookie type variable:

This will help us to display the popup for every new browser session(this step is not required if the popup should displayed every time visiting the page)

• Click on Variable in left hand side menu.
• Go to user defined variables and select new.
• Select variable configuration as 1st party cookie 
• Give cookie name as popUpDisplayed and check url decode cookie option.
• Save the changes and give the name as popUpDisplayed.

Creation of Trigger/Timer:

• Click on trigger on left hand side menu and choose trigger type as Timer.
• In the Trigger configuration give the interval in milliseconds as required .(e.g:5000 millliseconds) - the delay to display the popup in the page
• Enter the Trigger conditions as below:

• Select this trigger fires on all timers.
• Click on save and give the name accordingly(e.g:popuptimer)

Creation of Tag:

Click on tag on left hand side menu and choose tag type as customHTML.

In the HTML text area give the below content:
<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span id="modal-close" class="close">&times;</span>
    test popup message
</div>
</div>
<script>
  $('#myModal').show();
  $('#myModal').parent().css('display','block');
  $('#myModal').parent().css('visibility','visible');
  $('#modal-close').click(function(){
  $('#myModal').hide();
  });
 document.cookie = "popUpDIsplayed=true";
</script>

<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    background-image: url("paper.gif");/*change the background image */
  }

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>

Expand the advanced settings and check Enable custom tag firing schedule flag.Give the start date, time, end date and time as required. - This will help us to display the popup during purticular time
Click on save and give the name accordingly (e.g:popUpHtml).