Automated Ads placement JS code

Automated Ads placement code is a javascript code that will automatically add advertisements in between paragraphs of your blog. In this post, I am sharing how to implement it on your website. This can be a great way to monetize your website without having to manually place ads yourself.

What is Automated Ads placement JS code?

Automated Ads placement code is a simple piece of JavaScript code that you can add to your website to automatically place ads between paragraphs of text. The code will add ad code after 5 paragraphs again and again. This can be a great way to monetize your website without having to manually place ads yourself.

Benefits of using Automated Ads placement code

It is easy to implement.
It is highly effective at monetizing your website.
It can improve the user experience by placing ads in a non-intrusive way.

How to implement it?

Step1: Find the HTML tags containing all the <P> tag

The first step is that you want to find the HTML tags (<article>, <div> etc...) containing all the <p> tags or your blog content.

After adding an ID named myArticle. It is important. The example is given below.

<!-- Sample article structure -->
  <article id="myArticle">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>v
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur molestiae impedit molestias architecto voluptatibus voluptate, ullam quam magnam iure velit sit. Itaque, error cumque sed quaerat non vel consequuntur nam?</p>
  </article>

Step 2: Add the AD code

Now you want to add the below HTML code including ad code at the end of the paragraph container.


<div class="ad-code">
    <div class="ad-code1">
      <center><a href="https://fluratech.com">Adverticement</a></center>
      <!-- PASTE Your ad code here -->
    </div>
  </div>

Step 3: Add the JS code

Now you want to add the JS code at the end of the body tag.


  <script>
    // Function to insert the ad code after every 10th paragraph
    function insertAdCode() {
      const article = document.getElementById('myArticle');
      const paragraphs = article.getElementsByTagName('p');
  
      // Check if there are at least 5 paragraphs
      if (paragraphs.length >= 5) {
        let i = 0;
        while (i < paragraphs.length) {
          // Calculate the index for inserting the ad code
          const adIndex = i + 5;
  
          // If the ad index is within the paragraph range, insert the ad code
          if (adIndex < paragraphs.length) {
            const adElement = document.createElement('div');
            adElement.innerHTML = document.querySelector('.ad-code').innerHTML;
            article.insertBefore(adElement, paragraphs[adIndex]);
          }
  
          // Move to the next set of 5 paragraphs
          i += 5;
        }
      }
    }
  
    // Call the insertAdCode function after the page loads
    window.onload = insertAdCode;
  </script>

You can change the default number of paragraphs by changing the number 5 To any number.

Step 4: Add the CSS code

Now paste the CSS code within the head tag.

<style>
    .ad-code1{
      font-size: 13PX !important;
      background-color: rgb(189, 189, 189);
      padding-top: 10px;
      margin: 10px 0 10px 0;
    }
    .ad-code1 a{  color: black; text-decoration: none;}
  </style&gt>

Now it is ready... Comment your doubts...

Yourhub