If you're a Google AdSense user you will probably know about AdSense Lab, the incubator hosting those brand-new Ad-based features that aren't yet ready to be rolled out to all AdSense publishers. The new deal these weeks is called AMP Auto Ads, a new family of advertising units that will be placed automatically within the AMP pages of our website/blog.
In the unlikely event you dont' know what an AMP page is or if you never heard about the AMP Project, we strongly suggest to fill this huge SEO & accessibility gap by taking a look at the AMP Project's official page.
The AMP Auto Ads feature is currently in beta and thus accessible only for those who are explicitly invited via e-mail from AdSense Lab. For additional info, read this official guide from Google AdSense. However, since you are here, there's an high chance you already know everything about AMP Auto Ads and you're looking for further info about how to properly implement them on your WordPress website or blog.
How to implement AMP Auto Ads
Let's start with taking a look at the two AMP Auto Ads client-side scripts that needs to be inserted into any AMP page:
Within the <HEAD> element
|
1 2 3 4 5 6 7 8 9 |
<head> <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"> </script> <title>My AMP Page</title> ... |
Immediately after the <BODY> element
|
1 2 3 4 5 6 7 8 9 10 |
</head> <body> <amp-auto-ads type="adsense" data-ad-client="ca-pub-123456789123456"> </amp-auto-ads> ... </body> |
What can we do then?
How to Implement AMP Auto Ads in WordPress
Luckily enough, the AMP for WordPress plugin - which is almost mandatory if you want to enable AMP support on WordPress - includes, among its neat set of helper functions, the
is_amp_endpoint()
method, which can be used to determine if the current execution's context will serve an AMP page or not.
Thanks to this function, all we have to do is to edit our WordPress Theme's
header.php
file (using Appearance > Editor) and implement the two AdSense scripts in the following way:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[...] <?php if (function_exists('is_amp_endpoint') && is_amp_endpoint()) { ?> <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script> <?php } ?> </head> <body <?php body_class(); ?>> <?php if (function_exists('is_amp_endpoint') && is_amp_endpoint()) { ?> <amp-auto-ads type="adsense" data-ad-client="ca-pub-XXXXXXXXXXXX"></amp-auto-ads> <?php } ?> [...] |
It goes without saying that we need to replace the
ca-pub-XXXXXXXXXXXX
sample string with the actual AdSense ad-unit id code.
That's it for now... happy advertising!
Great post.
Could you please tell me how to add those two codes on a child theme?
Hello and thanks for asking: you need to copy the header.php file from the parent theme folder to the root child theme folder, so you can edit the “child copy” of that file just like the post says.
Thank you. How to copy header.php to my child theme? I am using generatepress child theme.
You can do it manually through an FTP client or remote desktop (if you have access to the web server). That’s how I always do that.
where to place main wp theme or amp theme?
Only amp sticky adsense ad working , not auto ads
I want to insert adsense in the middle of the article, how is the code?
Hello there,
I’m afraid it’s not possible with AMP Auto-Ads: the “auto” part actually means that the ad units will be placed automatically within the page (the AdSense algorithm will call the shots).