Learning AMP: AMP-Ad Unit Setup on Wordpress — AMPire.city

Image for post
Image for post
Originally published at https://ampire.city

What Will I Learn?

Requirements:

AMP-AD AdSense Code Example

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

Getting Google AdSense Ad Unit Code

1. Creating AMP Ad Unit

Image for post
Image for post
To get AMP-AD Unit code you must select by ad unit tab at the top.

2. Getting AMP Ad Unit Code

Image for post
Image for post
You can either pick data-ad-client and data-ad-slot code from here, or just copy the full code snippet.

Placing AMP-AD Script between Head Tags

Placing AMP-AD Units to WordPress Pages

Image for post
Image for post
Classic editor (left) and gutenberg editor (right) examples

Using Shortcode to Add AMP-AD Unit Code

Image for post
Image for post
Widget Shortcode plugin makes adding the same content over and over again easy.
Image for post
Image for post
From now on, AMP-ADs could be added anywhere with just two clicks.

Useful links

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store