Hello @mfonabel
Thank you for contacting us, We will recommend using amp-auto-ads component it will place ads automatically in available spaces.
You can also use Site kit by Google plugin which will add auto ads on AMP as well as non-AMP pages.
If you wanted to insert a custom ad unit in the header we will recommend using the amp-ad component.
In order to modify the header create a new template override in your theme by copying from wp-content/plugins/amp/template/header-bar.php
file to
/wp-content/themes/current-active-child-theme/amp/header-bar.php
in the theme version of the template file, you can add your modifications such as inserting ads.
We hope this helps!
Tried this filter but didn’t work. What can I do?
add_filter( 'amp_post_template_data', function( $data ) {
if ( empty( $data ) || empty( $data['post_id'] ) ) {
return $data;
}
// Get the ad code from your AdSense account
$ad_code = '<!-- your AdSense ad code here -->';
// Add the ad code after the <article> tag
$data['amp_component_scripts']['amp-ad'] = true;
$data['amp_component_scripts']['amp-ad-custom'] = true;
$data['amp_component_scripts']['amp-sticky-ad'] = true;
$data['post_amp_content'] = '<article class="amp-wp-article">' . $data['post_amp_content'] . $ad_code . '</article>';
return $data;
} );
Hello @mfonabel
You don’t need to force the scripts to be loaded manually, AMP plugin will detect the usage of AMP component and will include the component scripts for the same.
Where you mentioned <!-- your AdSense ad code here --> use actual AMP ad component
add_filter(
'amp_post_template_data',
function ( $data ) {
if ( empty( $data ) || empty( $data['post_amp_content'] ) ) {
return $data;
}
// Get the ad code from your AdSense account.
$ad_code = '<amp-ad width="100vw" height="320" type="adsense" data-ad-client="ca-pub-use-youride here" data-ad-slot="your-data-slot" data-auto-format="rspv" data-full-width><div overflow></div></amp-ad>';
$data['post_amp_content'] = '<article class="amp-wp-article">' . $data['post_amp_content'] . $ad_code . '</article>';
return $data;
}
);
We hope this helps!
Hello,
I had tried this it is not displaying on frontend. Nothing happens. Both ways, it does not display.
Thank you
@mfonabel
Can you please share your AMP page URL, where you are applying these changes so we can better assist you.
@mfonabel As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.
