Display dynamic popup using GTM

There are different ways to display a dynamic modal popup, one of the best way is displaying the modal popup using google tag manager, as there will not be any code required. All changes to be done in GTM console. 

Dynamic modal using GTM

To display a dynamic modal popup using Google Tag Manager follow below steps:

Create a variable: 

To display the popup for every new browser session follow the below steps

• 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 displayPopup and check url decode cookie option.
• Save the changes and give the name as displayPopup.

Cookie type variable configuration

Create a Trigger

• Select trigger and choose trigger type as Timer.
• Below trigger will be called after 5 seconds of page load. This trigger will be called only once.
• Select the appropriate page url.

Create a trigger

Create a Tag:

• Select tag type as Custom HTML.
• Add the modal html code in the text area.
• Select the trigger which was created above.
• Make sure you add some cookie concept to load the modal only once per session. 

Create a tag

HTML Code

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span id="modal-close" class="close">&times;</span>
    <a href="https://aemquickstart.blogspot.in/p/adobe-aem-6-developer-certification.html">Check the guide to pass AEM 6 Developer Certification (9A0-384)
        </a>
  </div>

</div>
<script>
  $('#myModal').show();
  $('#myModal').parent().css('display','block');
  $('#myModal').parent().css('visibility','visible');
  $('#modal-close').click(function(){
    $('#myModal').hide();
  });
</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 */
}

/* 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>

Result