How to implement Custom Ads on Page Builder

Written By Rachana TR (Administrator)

Updated at April 9th, 2024

 

If you want to insert custom ads on your website using a single request, this can be achieved by creating custom code in a specific format and adding it using a widget in the page builder.
 

To implement this, you need to add the custom scripts in the Head and Body sections of the webpages via the Page Builder, following these steps:

 

  1. Log in to the Page Builder.
  2. Go to Settings > Manage> Insert Custom Code, and add the code in header of all pages, as mentioned below.
  3. Or insert the custom code or modified code in the required placement using the widget option.

Ad Dimensions: 
 

Once the header and body scripts have been added, we need to modify the code that needs to be inserted and place it in the respective widget slots. Typically, we use the following ad sizes, but these may change based on your requirements:

 

  • 728x90, 970x90, 320x50, 300x250
  • 728x90, 970x90, 320x50, 300x250, 970x250
  • 300x250, 300x600
  • Right Side Rail Ad
  • Left Side Rail Ad
  • Road Blocker Ads
     

Ad Code Placement:
 

  1. The right side rail ad, left side rail ad, and road blocker ads should be added to the top slot in the widget of the landing pages.
  2. The ad code with the sizes 728x90, 970x90, 320x50, 300x250 needs to be added just below the top slot in the landing page. This will be the top ad.
  3. The ad code with the sizes 728x90, 970x90, 320x50, 300x250, 970x250 should be added at the bottom of the page or the desired placement.
  4. The 300x250 ad size should be inserted as per the required placement.
     

Modifying the GPT tags
 

  1. Create ad units as per the dimensions mentioned above.
  2. In the sample code, we need to replace the div ID "div-gpt-ad-1705653003339-0" and the "Ad unit ID" with the appropriate values for the specific ad unit. These will be different for each ad unit.
  3. If the same ads need to be rendered in multiple slots, instead of using the div ID "div-gpt-ad-1705653003339", you can replace it with a "unique-id".

Example: Replace "div-gpt-ad-1705653003339-0" with "unique-id".
 

A screenshot of a computer

Description automatically generated


Note: Below codes are just for example, this can be modified as per your requirement.
 

Example: Head code
 

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

 

<script>var desktopAd=window.innerWidth>600;

var desktopAdBig=window.innerWidth>1550;

var mobileAd=window.innerWidth < 600;

 

window.googletag=window.googletag || {cmd: []};

 

</script>

 

<style>

 

.header-six-m__navbar-mobile__lQHAq .logo-wrapper img {

 min-height100% !important;

}

.sticky-ad {

 positionfixed;

 top60%;

 transformtranslateY(-50%);

 width150px;

 height600px;

 max-width80%;

}

 

.enplLeaderboard {

 

 min-height90px;

 min-width728px;

 

}

 

.sticky-ad iframe {

 width160px;

 height600px;

}

 

.sticky-ad.left {

 left10px;

}

 

.sticky-ad.right {

 right10px;

}

 

.sticky-ad.right iframe {

 positionrelative;

 right10px;

}

 

@media only screen and (max-width1550px) {

 .sticky-ad {

   displaynone;

 }

}

 

/* Ads style box */

.advert-box {

 text-alignright;

 font-sizexx-small;

 padding1px;

 border-top1px solid #ddd;

 border-bottom1px solid #ddd;

}

 

.par {

 font-sizex-small !important;

}

 

@media only screen and (max-width600px) {

 

 .enplLeaderboard {

 

   min-height50px;

   min-width320px;

 

 }

}

</style>

 

Example: Sample code to close the road blocker ads

 

<!-- Iframe removal -->

<script type='text/javascript'>

       const eventMethod = window.addEventListener

         ? 'addEventListener'

         : 'attachEvent';

       const eventer = window[eventMethod];

       const messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';

       const resizeIframe = data => {

         const iframesList = document.querySelectorAll(`[id*="${data.iframe}"]`);

         const iframeContainer = iframesList[iframesList.length - 1];

         const iframeParent = iframeContainer.parentNode;

         iframeParent.style.widthdata.dimensions[0];

         iframeParent.style.heightdata.dimensions[1];

         iframeContainer.setAttribute('width', data.dimensions[0]);

         iframeContainer.setAttribute('height', data.dimensions[1]);

       };

       const replaceAdContent = data => {

         const adUnitsList = document.querySelectorAll(`div[id*="${data.adUnit}"]`);

         const adUnitContainer = adUnitsList[adUnitsList.length - 1];

         adUnitContainer.innerHTMLdata.content;

         const scriptTag = document.createElement('script');

         scriptTag.innerHTMLdata.script;

         adUnitContainer.appendChild(scriptTag);

       };

       // Listen to message from child window

       eventer(

         messageEvent,

         e => {

           const { data } = e;

           const eventName = data.message;

           if (eventName === 'adContentAvailable') {

             replaceAdContent(data);

           } else if (eventName === 'resizeIframe') {

             resizeIframe(data);

           }

         },

         false

       );

     </script>