AMP-AD AdSense Example & Easy Ad Unit Setup on WordPress

What Will I Learn?

This tutorial demonstrates a working example of AMP-AD code for Google AdSense and an easy way to setup it.

Requirements:

• Google AdSense Account;
• Basic CSS & HTML knowledge;
• AMP for WordPress (Optional)
• Widget Shortcut (Optional)

Working Example

Below:

AMP-AD AdSense Code Example

This tutorial is about implementing ad units to WordPress website, but if you want to learn more about advanced options of AMP-AD, or how to create responsive media query AMP-AD, or AMP auto ads – click on the respective article.

<amp-ad width="100vw" height="320"
     type="adsense"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxx"
     data-auto-format="rspv"
     data-full-width="">
  <div overflow=""></div>
</amp-ad>

This is the simplest code to implement AMP-AD unit, which is given by Google AdSense. Don’t forget to change data-ad-client and data-ad-slot with your personal AdSense information.

The default responsive ad code will implement ad unit with 100% width of parent element and 320px height. This works great on mobile devices but the loaded ad unit might appear smaller than the wrapper on desktop websites. See a working example of the default AMP-AD AdSense code below:

Getting Google AdSense Ad Unit Code

1. Creating AMP Ad Unit

First you need to login to your Google AdSense account. Then create a new ad unit by navigating Ads > Overview > By ad unit on the admin panel. Be sure to choose Display ads because it is the only format supporting AMP.

All you need to do is to pick a title and type for the ad unit. Title can be anything you want but unless you need a specific ad size unit, be sure to pick Responsive type for your new ad. After, just click create button and it will bring you to code generator.

2. Getting AMP Ad Unit Code

At the code generator you’ll notice two tabs: one is for HTML; and the other for AMP. Be sure to pick the latter.

Placing AMP-AD Script between Head Tags

As you can see, before you can add AMP-AD units, it is required to implement amp-ad-0.1.js on your website. If you are using the official AMP plugin, it will add the script automatically. In other case – you’ll have to insert it yourself. You can find a quick tutorial of inserting code between your head tags in this article.

Placing AMP-AD Units to WordPress Pages

Adding AMP-AD unit to your website is pretty straight forward. Just copy/paste the code wherever you want your display ad to appear. You can either add it directly to theme’s template files, or simply put it on your page content editor. Just be sure to copy/paste it to the source code on Classical editor or as HTML Block on Gutenberg editor.

Using Shortcode to Add AMP-AD Unit Code

It might be convenient to copy/paste the code provided by Google AdSense to either template files or pages via content editors, but it could be annoying to do it repeatedly on posts, or any other repeating content. Personally, to simplify the process, I use Widget Shortcode plugin to painlessly add AMP-AD unit code to my blog posts. Let me explain. Just as the plugin name suggests, it allows any content to be converted to a widget and then outputted with a shortcode.

After installing the plugin just go to Appearance > Widgets and add Custom HTML widget to Widget Shortcode. Then, just copy/paste AMP-AD unit code, created before and click save. After saving the widget a shortcode will appear. You can either copy/paste anywhere you want, but that alone wouldn’t be that much more convenient than just copy/pasting the AMP-AD unit code itself. Bear with me.

What does the magic trick is Widget Shortcode button on quick navigation of WordPress content editor. From there your widget with AMP-AD unit code will be accessible anywhere anytime. Just like this AMP-AD below was added by clicking my mouse button only twice.

Useful links

• Google AdSense
• AMP.dev

Originally posted on 8/25/2020
WordPress 5.5
AMP 1.5.5