Saturday, 4 March 2017

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


1 comment :

  1. I really appreciate the information shared above. It’s of great help. If someone wants to learn Online (Virtual) instructor lead live training in #VEEVA #CRM, kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor-led training on #VEEVA #CRM. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ pieces of training in India, USA, UK, Australia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain, and UAE etc.
    Avishek Priyadarshi
    MaxMunus
    E-mail: [email protected]
    Skype id: avishek_2.
    Ph:(0) 8553177744 / 080 - 41103383
    http://www.maxmunus.com/

    ReplyDelete