SOTA-JP.COM

書評、WordPress、アフィリエイト、米国株投資

AMPページにAdsenseを貼る方法。PC表示にも対応。

投稿日:2018年7月15日 更新日:

AMP-AD

当サイトは、PCページもAMP HTMLで表示しています。

プラグインに頼らず、自力で対応させました。

この記事では、その作業の中で学んだ、グーグル・アドセンスをAMP対応させる方法を紹介します。

スマホでの表示はもちろん、PCでの表示にも対応しています。

アドセンス用のJSライブラリを読み込む

まずは、グーグル・アドセンス用のJSライブラリを読み込みます。

AMP HTMLの<head> 〜 </head>の間に次のコードを貼り付けます。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

広告コードを取得する

広告を作成するときは、広告サイズは固定サイズではなく「レスポンシブ」を選択します。

リンクユニットもおんなじです。

フルワイドのアドセンス(AMP版)

<amp-ad
    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版)

こちらのアドセンスは、無理やり横幅を最大限に広げたりはしません。

おとなしく記事の枠内に収まります。

また、縦横比も維持されます。

記事本文
アドセンス
記事本文

コードはこちらです。

<amp-ad
    layout="responsive"
    width=300
    height=250
    type="adsense"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="xxxxxxxxxx">
</amp-ad>
 

リンクユニット(AMP版)

リンクユニットの場合は、ただのレスポンシブではなく、高さを固定にするとデザインが安定します。

高さを固定で横幅は自動にする場合は、layout属性にfixed-heightを指定します。

<amp-ad
    layout="fixed-height"
    height=200
    type="adsense"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="xxxxxxxxxx">
</amp-ad>
 

関連コンテンツ(AMP版)

関連コンテンツも高さを固定すると見栄えが良くなります。

高さの数値はお好みで。

<amp-ad
    layout="fixed-height"
    height=1100
    type="adsense"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="xxxxxxxxxx">
</amp-ad>
 

固定サイズのアドセンス(AMP版)

固定サイズの場合は、layout属性にfixedを指定します。

例えば、320×100のラージモバイルバナーの場合はこうなります。

<amp-ad
    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を区切りにスマホ表示を切り替えていますが、テーマによってこの数値は異なります。
自分が使っているテーマにあわせて数値は書き換えてください。

それでは実例を。
例えば、フルワイドのアドセンスをスマホの時だけ表示するには、こうします。

<amp-ad
    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)"を加えただけです。

それだけなんですが、これにより、スマホ以外の時はこのアドセンスが表示されなくなります。

知っておくと便利ですよ。