Display dynamic popup using GTM

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

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

Create a variable:
To display the popup for every new browser session follow the below steps

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

Cookie type variable configuration

Create a Trigger

• Select the trigger and choose trigger type as Timer.
• The 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 the 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>