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

• Call display slot on the header without DIV ID
• Add custom code to append DIV after nth paragraph

How General GPT tag structure Looks like?

• Library file
• Global variable
• cmd function
• Ad slot declaration

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,

• Open the article or page on chrome which you need to insert the DIV dynamically after the nth paragraph
• Open “Inspect element” by right click the mouse or using short cuts like “Ctrl + Shift + I”
• Select a “Element tool” and choose the paragraph and copy the JS path as per the screenshot below

• Once you copy the JS path. Paste that on the Notepad for reference.
• Now, comes to the original custom code insert the DIV

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