Sharing is caring

WordPress + AMP: How to insert Adsense Ad in the middle of post content without plugin

 How to Add ads in WordPress Accelerated Mobile Pages content

When it comes to blogging, ads are the major way majority of bloggers use to monetize their sites and Adense is one of the major ad network most of the bloggers use. However, there are many factors when it comes to revenue you get from these ad networks. Sometimes bloggers with relatively low numbers in traffic could be making more than a blog with pretty impressive traffic. That has a lot to do with where you place your ad slot.

And recently Google introduced AMP page aka Accelerated Mobile Pages and lots of bloggers have already adapted the new way of accessing pages from mobile devices. And I have already written extensively about how to customize AMP pages as well as adding related content to AMP pages. And some bloggers want to know how to put an ad slot in the middle of AMP content, that can actually improve the performance of ads thus to increase the revenue because ads in the middle of the content gets more attention than any other ad slot on your blog hence the chances of getting more clicks which will eventually help improve CTR and CPC.

If you haven’t customized your amp theme yet, make sure you read the articles about customizing AMP page Before you proceed with this tutorial.

So to add an ad slot between your WordPress AMP post you gotta edit your  single.php (my-single.php if you have customized as in the other article) file of your AMP theme and use a filter to get the total number of paragraphs in the content. Then the code will insert the ad into WordPress post depending on the number of the paragraphs.

WordPress + AMP: Add Social Sharing Buttons to Accelerated Mobile Pages without plugin

WordPress AMP: Direct the links on Accelerated Mobile Pages to its AMP version

Here is the video that shows you how to do this in your WordPress backend. Watch the video and place the code below in your AMP single.php file.

<?php
$show_after_p = 0;
$tp_content =  $this->get( 'post_amp_content' );
if(substr_count($tp_content, '<p>') > $show_after_p){
$tp_contents = explode("</p>", $tp_content);
           If( substr_count($tp_content, '<p>') >=  2 && substr_count($tp_content, '<p>') <= 5 )
              {
                $show_after_p =  1 ;} //Ad goes soon after 1st Paragraph
           elseIf(substr_count($tp_content, '<p>') >= 6 && substr_count($tp_content, '<p>') <= 7 )
              {
                $show_after_p = 2 ;   }
           elseIf(substr_count($tp_content, '<p>') >= 8  && substr_count($tp_content, '<p>') <= 11 )
              {
                $show_after_p = 3 ;   }
           elseIf(substr_count($tp_content, '<p>') >= 12 )
              {
                $show_after_p = 5 ; }
            $p_count = 0;
           foreach($tp_contents as $tp_content){
               echo $tp_content;
           if($p_count == $show_after_p && $show_after_p == 1){ ?>
                   <div id="Advert">
                      <!--ADSENSE AD SLOT-->
                      <div id="ad">
                      <amp-ad  width=336 height=280
                      type="adsense"
                      data-ad-client="ca-pub-XXXXXXXXXXXXXXXXXXX"
                      data-ad-slot="XXXXXXXXXXXXXXXXXXX">
                      </amp-ad>
                      </div>
                      <!--ADSENSE AD SLOT-->
                  </div>
           <?} elseif($p_count == $show_after_p && $show_after_p == 2 ) {?>
                   <div id="Advert">
                      <!--ADSENSE AD SLOT-->
                      <div id="ad">
                      <amp-ad  width=336 height=280
                      type="adsense"
                      data-ad-client="ca-pub-XXXXXXXXXXXXXXXXXXX"
                      data-ad-slot="XXXXXXXXXXXXXXXXXXX">
                      </amp-ad>
                      </div>
                      <!--ADSENSE AD SLOT-->
                   </div>
           <?} elseif($p_count == $show_after_p && $show_after_p == 3 ) {?>
                   <div id="Advert">
                      <!--ADSENSE AD SLOT-->
                      <div id="ad">
                      <amp-ad  width=336 height=280
                      type="adsense"
                      data-ad-client="ca-pub-XXXXXXXXXXXXXXXXXXX"
                      data-ad-slot="XXXXXXXXXXXXXXXXXXX">
                      </amp-ad>
                      </div>
                     <!--ADSENSE AD SLOT-->
                  </div>
           <?} elseif($p_count == $show_after_p && $show_after_p == 5 ) {?>
                   <div id="Advert">
                      <!--ADSENSE AD SLOT-->
                      <div id="ad">
                      <amp-ad  width=336 height=280
                      type="adsense"
                      data-ad-client="ca-pub-XXXXXXXXXXXXXXXXXXX"
                      data-ad-slot="XXXXXXXXXXXXXXXXXXX">
                      </amp-ad>
                      </div>
                      <!--ADSENSE AD SLOT-->
                   </div>
           <?} elseif($p_count == $show_after_p) {?>

                   <div id="Advert">
                      <!--ADSENSE AD SLOT-->
                      <div id="ad">
                      <amp-ad  width=336 height=280
                      type="adsense"
                      data-ad-client="ca-pub-XXXXXXXXXXXXXXXXXXX"
                      data-ad-slot="XXXXXXXXXXXXXXXXXXX">
                      </amp-ad>
                      </div>
                      <!--ADSENSE AD SLOT-->
                   </div>


<?php }
                 echo "</p>";
              $p_count++;
    }
}  ?>
 

This will insert your Adsesns ad into your Accelerated Mobile Pages. You want to use another ad network? no problem, just replace the amp-ad code with your ad network ad code that is compatible with AMP. And don’t forget to replace ca-pub-XXXXXXXXXXXXXXXXXXX with your Adsense ID and this data-ad-slot=”XXXXXXXXXXXXXXXXXXX” with your ad slot id. It is also recommend to insert new amp-ad script into your page <head> tag. Even though the amp-ad tag still works without the script, Google says it will soon be an error.

To insert amp-ad script, just paste this code into your functions.php file

add_action( 'amp_post_template_head', 'insert_amp_ad_script' );
function insert_amp_ad_script( $amp_template ) { ?>

       <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

<?php }

If you want to align this ad right or left of your content so that the ad would not split the content into two, simply paste this CSS rule into your style.php file of your AMP theme

 
#Advert {
   float:right;
}

If you find this article really helpful, please share this article on your social sites, forum accounts or link back. Follow us on Facebook and Twitter.

You might also like this

Sharing is caring

You may also like...

  • Thanks for this guide sir but could you please post the code in a text file? The thing is when I copy directly from your web page and paste in wordpress, the entire code appears packed together and not arranged as posted here and gives me errors

  • Hi, How can put one adsense code, only under second paragraph of each amp post??

    Thanks for you great support.

    • use this code

      replace the first “If ” statement with this


      If( substr_count($tp_content, '') >= 3 )
      {

      $show_after_p = 2 ;
      }

      and remove all the “elseif” statements

      Then, after the “echo $tp_content; ” in the foreach loop in the code, replace the “If” statement with this

      if($p_count == $show_after_p && $show_after_p == 2){ ?>

      use rest of the code after and before the changes is as in the article.

      • Renê Fraga

        Hi @HolaDisqus:disqus, i tried this code, but it doesn’t showing ads.

        My code is correct? Thanks a lot!

        &#60?php
        $show_after_p = 0;
        $tp_content = $this->get( 'post_amp_content' );
        if(substr_count($tp_content, '') > $show_after_p){
        $tp_contents = explode("", $tp_content);
        If( substr_count($tp_content, '') >= 3 )
        {
        $show_after_p = 2 ;
        }
        $p_count = 0;
        foreach($tp_contents as $tp_content){
        echo $tp_content;
        if($p_count == $show_after_p && $show_after_p == 2){ ?>

        <?php }
        echo "";
        $p_count++;
        }
        } ?>

        • I hope you added the “data-ad-client” and “data-ad-slot” correctly and in your code I see “< ” remove that extra ‘<' mark and see if it works

  • Jamshi Jack

    Really useful article and thanks for your great work.