Install & Enable AMP Auto Ads by AdSense Labs in Worpdress - How To

Ryan

7 years ago

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

<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>

...

<head>

<script async

custom-element="amp-auto-ads"

src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">

</script>

...

Immediately after the <BODY> element

</head>

<body>
    <amp-auto-ads type="adsense" 
        data-ad-client="ca-pub-123456789123456">
    </amp-auto-ads>

...

</body>

</head>

<body>

<amp-auto-ads type="adsense"

data-ad-client="ca-pub-123456789123456">

</amp-auto-ads>

...

</body>

This is quite different from our standard AdSense code snippets, expecially if we're used to manage our banners using some WordPress plugins such as the exceptional Ad Inserter. Unfortunately, most of these plugins won't help us because they are not meant to place something inside the <HEAD> or, even worse, immediately after the opening <BODY> tag... Not to mention the fact that these scripts needs to be excluded from any non-AMP page.

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:

[...]

<?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 } ?>

[...]

[...]

<?php if (function_exists('is_amp_endpoint') && is_amp_endpoint()) { ?>

src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>

<?php } ?>

</head>

<?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!

Print Friendly & PDF Download