In this tutorial, we will show you how to add Google AdSense in WordPress AMP Post Content in a site running with WordPress. May be you are using WordPress AMP plugin by Automattic or may be Accelerated Mobile Pages. I am using Accelerated Mobile Pages by Ahmed Kaludi, Mohammed Kaludi and integrated AdSense ad inside article.
Now lets see how we can add ad code in WordPress AMP Post Content. Well, good option is to create a small Ad Plugin. Or you can put the code inside the function.php page. But I recommend to create a very small WP Plugin.
You may use our WP Plugin also. Get the WordPress Plugin adSense amp post content
Create AdSense in WordPress AMP Post Content Plugin7
At the very first, crate a folder may be with mane adsense-apm-post-content and inside that, create a file named apm-content-ad.php
First we have give some details of that amp ad plugin as below code block.
<?php /** * @package adsense_apm_post_content * @version 1.0 */ /* Plugin Name: AdSense AMP Post Content Plugin URI: http://kivabe.com/ Description: This plugin is used to add AdSense ad inside AMP post content. Author: Shariar Version: 1.0 Author URI: http://kivabe.com/ */
Now time to create a function so that we can add ad code inside post content. See the below code, you just need to add this code block into that plugin. But make sure that you have changed the value of $publisher_id and $ad_slot variable. You need to add your own publisher ID and Ad Slot value.
add_action( 'pre_amp_render_post', 'is_amp_content_filter_' ); function is_amp_content_filter_() { add_filter( 'the_content', 'is_amp_adsense_in_content_' ); } function is_amp_adsense_in_content_( $content ) { //Replace with your own publisher id $publisher_id = 'ca-pub-2053844882585120'; //Create an add unit in your AdSense account and get the ad_slot and replace with the following $ad_slot = '7029836128'; // Ad code. This is responsive as per Google guidelines for AdSense for AMP. $ad_code = '<amp-ad width="100vw" height=320 type="adsense" data-ad-client="' . $publisher_id . '" data-ad-slot="' . $ad_slot . '" data-auto-format="rspv" data-full-width><div overflow></div></amp-ad>'; // Insert Adsense ad between the content, after paragraph 3 $new_content = ad_insert_after_paragraph_( $ad_code, 3, $content ); return $new_content; } function ad_insert_after_paragraph_( $insertion, $paragraph_id, $content ) { $closing_p = '</p>'; $counters = 0; $paragraphs = explode( $closing_p, $content ); foreach ($paragraphs as $index => $paragraph) { if ( trim( $paragraph ) ) { $paragraphs[$index] .= $closing_p; } if ( $paragraph_id === $index + 1 ) { $paragraphs[$index] .= $insertion; } } return implode( '', $paragraphs ); }
The above code block is used to show one ad block into the AMP post content. Now if you want to show more than one ad based on post content length. Like in my case, If the post contain more then 10 paragraph, I want to show another ad code inside article.
See the below code block, I have added to extra if condition with conditional test $index > 8 and $index > 13 so that I can check the number of paragraph. So, if the content have more then 8 paragraph, there will be another ad block inside the AMP content. If the total count of paragraph is more then 13, there will be total 3 ad block inside Post content.
/** * Add Google Adsense code in AMP Post Content */ add_action( 'pre_amp_render_post', 'is_amp_content_filter_' ); function is_amp_content_filter_() { add_filter( 'the_content', 'is_amp_adsense_in_content_' ); } function is_amp_adsense_in_content_( $content ) { //Replace with your own publisher id $publisher_id = 'ca-pub-2053844882585120'; //Create an add unit in your AdSense account and get the ad_slot and replace with the following $ad_slot = '7029836128'; // Ad code. This is responsive as per Google guidelines for AdSense for AMP. $ad_code = '<amp-ad width="100vw" height=320 type="adsense" data-ad-client="' . $publisher_id . '" data-ad-slot="' . $ad_slot . '" data-auto-format="rspv" data-full-width><div overflow></div></amp-ad>'; // Insert Adsense ad between the content, after paragraph 3 $new_content = ad_insert_after_paragraph_( $ad_code, 3, $content ); return $new_content; } function ad_insert_after_paragraph_( $insertion, $paragraph_id, $content ) { $closing_p = '</p>'; $counters = 0; $paragraphs = explode( $closing_p, $content ); foreach ($paragraphs as $index => $paragraph) { if ( trim( $paragraph ) ) { $paragraphs[$index] .= $closing_p; } if ( $paragraph_id === $index + 1 ) { $paragraphs[$index] .= $insertion; } // Uncomment following if you want to show another ad after 7th paragraph if($index > 8) { $counters +=1 ; if ($counters ==1) { $paragraphs[6] .= $insertion; } } // Uncomment following if you want to show another ad after 12th paragraph if($index > 13) { if ($counters ==7) { $paragraphs[11] .= $insertion; } } } return implode( '', $paragraphs ); }
Either you can create the plugin by yours or can upload the following one. We have created with settings option.