当サイトは、PCページもAMP HTMLで表示しています。
プラグインに頼らず、自力で対応させました。
この記事では、その作業の中で学んだ、グーグル・アドセンスをAMP対応させる方法を紹介します。
スマホでの表示はもちろん、PCでの表示にも対応しています。
アドセンス用のJSライブラリを読み込む
まずは、グーグル・アドセンス用のJSライブラリを読み込みます。
AMP HTMLの<head> 〜 </head>の間に次のコードを貼り付けます。
広告コードを取得する
広告を作成するときは、広告サイズは固定サイズではなく「レスポンシブ」を選択します。
リンクユニットもおんなじです。
フルワイドのアドセンス（AMP版）
width="100vw"
height=320
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-auto-format="rspv"
data-full-width>
<div overflow></div>
</amp-ad>
AMP版アドセンスの基本形です。
スマホで表示すると、画面の横一杯にアドセンスが表示されます。
イメージとしては、下の図のような感じです。
レスポンシブアドセンス（AMP版）
こちらのアドセンスは、無理やり横幅を最大限に広げたりはしません。
おとなしく記事の枠内に収まります。
また、縦横比も維持されます。
コードはこちらです。
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
</amp-ad>
リンクユニット（AMP版）
リンクユニットの場合は、ただのレスポンシブではなく、高さを固定にするとデザインが安定します。
高さを固定で横幅は自動にする場合は、layout属性にfixed-heightを指定します。
layout="fixed-height"
height=200
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
</amp-ad>
関連コンテンツ（AMP版）
関連コンテンツも高さを固定すると見栄えが良くなります。
高さの数値はお好みで。
layout="fixed-height"
height=1100
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
</amp-ad>
固定サイズのアドセンス（AMP版）
固定サイズの場合は、layout属性にfixedを指定します。
例えば、320×100のラージモバイルバナーの場合はこうなります。
layout="fixed"
width=320
height=100
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
</amp-ad>
PC用のAMPページにアドセンスを貼る
スマホ用のAMPページにアドセンスを貼るだけであれば、上で説明したことを把握しておけば十分です。
でも、PC用のAMPページにもアドセンスを貼るためには、メディアクエリを使う必要があります。
スマホの時だけ表示する場合は、media="(max-width: 599px)"
タブレットとPCの時だけ表示する場合は、media="(min-width: 600px)"
ちなみに、僕が使っているテーマでは600pxを区切りにスマホ表示を切り替えていますが、テーマによってこの数値は異なります。
自分が使っているテーマにあわせて数値は書き換えてください。
それでは実例を。
例えば、フルワイドのアドセンスをスマホの時だけ表示するには、こうします。
media="(max-width: 599px)"
width="100vw"
height=320
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-auto-format="rspv"
data-full-width>
<div overflow></div>
</amp-ad>
最初に紹介したコードに、media="(max-width: 599px)"を加えただけです。
それだけなんですが、これにより、スマホ以外の時はこのアドセンスが表示されなくなります。
知っておくと便利ですよ。