アドセンスをAMPページでも表示する方法

通常のアドセンス広告ユニットをAMPページで表示させる方法、その変更点について解説していきます。

対象となる広告ユニット

アドセンスページで新しい広告ユニットを作成する際、いくつかの種類がありますが、２０１９年２月現在、AMP対応可能なのは『テキスト広告とディスプレイ広告』の『レスポンシブ』、自動広告のみです。

リンクユニット、関連コンテンツ、インフィード広告、記事内広告でもAMP化できるものがありますが、非公式です。正常に動作しない可能性があります。

コードの比較

まずは、通常のアドセンスコードと、AMP対応のアドセンスコードの比較をしてみましょう。解説は後で行います。

以下のコードは通常のアドセンスコードで、html内のbody要素内の好きな位置に以下のようなものを貼り付けると広告が表示されますよね。

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
<head>
    
</head>
<body>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5230023778615771"
        data-ad-slot="6921615937"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</body>
</html>

上とは違い、以下のコードはAMP対応させたアドセンスコードです。head要素内に１行追加され、body要素内にあるコードも少し変化していますね。

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html ⚡>
<head>
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
</head>
<body>
    <amp-ad width="100vw" height=320
        type="adsense"
        data-ad-client="ca-pub-5230023778615771"
        data-ad-slot="6921615937"
        data-auto-format="rspv"
        data-full-width>
        <div overflow></div>
    </amp-ad>
</body>
</html>

解説

では、AMPページでアドセンスを表示するために必要な変更点について解説していきます。

JavaScriptの読み込み

head要素の中に以下の１行が必要です。これがないと amp-adタグの処理が出来ません。

HTML

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

AMPアドセンスコード形式

広告ユニットをAMP化する場合、以下のコードの『data-ad-client』と『data-ad-slot』の番号以外は基本的に以下のような形式にする必要があります。

height属性は必須ですし、data-auto-format属性の値は『rspv』にして下さい。

HTML

1
2
3
4
5
6
7
8
<amp-ad width="100vw" height=320
    type="adsense"
    data-ad-client="ca-pub-5230023778615771"
    data-ad-slot="6921615937"
    data-auto-format="rspv"
    data-full-width>
    <div overflow></div>
</amp-ad>

クライアント番号とスロット番号

通常のアドセンスコードの『data-ad-client』と『data-ad-slot』の値をアドセンスコードにコピーする必要があります。

以下のサンプルは当ブログでの例ですので、それぞれの値は各広告ユニットのものを使用して下さい。

HTML

1
2
data-ad-client="ca-pub-5230023778615771"
data-ad-slot="6921615937"