Pragmatic Web Media

How to dynamically insert ad slot after nth paragraph?

This is the step by step tutorial for adding ad slot dynamically after nth paragraph. The term “nth”describe any number which you want to insert the ad slot. Example you can insert ad after 2nd paragraph.

Steps to Follow

How General GPT tag structure Looks like?

Sample GPT Code – Reference

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      window.googletag = window.googletag || {cmd: []};
     googletag.cmd.push(function() {

    googletag.defineSlot('/200894144/Responsive', [[300,250]], 'slot-1')
             .addService(googletag.pubads());
    googletag.defineSlot('/200894144/Responsive', [[728,90]], 'slot-2')
             .addService(googletag.pubads());
    googletag.defineSlot('/200894144/Responsive', [[970,250]], 'slot-3')
             .addService(googletag.pubads());

    googletag.pubads().setTargeting('Test_mode', ['ON']);
    googletag.enableServices();
  });
<script>

Call display ad slot on the header

Display ad slot is nothing but body code for the defined ad slot. As mentioned earlier, just add the display function to the header without DIV id.

Example code

 googletag.cmd.push(function() {
          googletag.display('slot-1');
        });
        

Header Tag with Display code

<script>
      window.googletag = window.googletag || {cmd: []};
     googletag.cmd.push(function() {

    googletag.defineSlot('/200894144/Responsive', [[300,250]], 'slot-1')
             .addService(googletag.pubads());
    googletag.defineSlot('/200894144/Responsive', [[728,90]], 'slot-2')
             .addService(googletag.pubads());
    googletag.defineSlot('/200894144/Responsive', [[970,250]], 'slot-3')
             .addService(googletag.pubads());

    googletag.pubads().setTargeting('Test_mode', ['ON']);
    googletag.enableServices();
  });

      
//Display code
        googletag.cmd.push(function() {
          googletag.display('slot-1');
        });
  
      
    </script>

Next step is the final to insert the DIV dynamically on the page.

Custom Code for adding DIV dynamically

Before appending the ad DIV to the paragraph, need to find the JS path for the respective article page. So that ad DIV can be inserted without any issue. This does not require any coding skills but just have to understand the basics.

How to find the JS path?

It is simple to find the JS path for the any DIV or paragraph on the website using browser inspect element. See the below steps,

Custom Code – Sample

Replace the copied JS path on the below custom code variable “Adcontainer”

var adcontainer1 = document.querySelector(“body > p:nth-child(2)”);

Bold code is the Copied JS path as per my sample page. See the complete code below,

var adcontainer1 = document.querySelector("body > p:nth-child(2)");
      var inner = document.createElement("div");
          inner.setAttribute("id","slot-1");
          inner.setAttribute("style","width: 300px; height:250px");
           adcontainer1.appendChild(inner);

Make sure to add the DIV id to match the header, Display slot. In our example, “slot-1”. Also, update the ad size as per the requirement.

All those code to be added on the page accordingly.

Code Sample For Reference

Copy or download this code on the below link.

Thanks for reading this article. Feel free to reach out in case of any queries and please do support us!!!!. Thanks Again.

PWM

*The information contained in this post is for general information purposes only. The information is provided by How to dynamically insert ad slot after nth paragraph? and while we endeavor to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the post for any purpose.

Exit mobile version