ワークスペースへ

導入ガイド

AMP ページの広告

AMP ads (amp-ad, amp-auto-ads, amp-sticky-ad)

AdSense と Ad Manager で、amp-ad、自動広告、固定バナーを使って AMP ページに広告を表示する方法です。

  • AdSense
  • Ad Manager
  • モバイルとデスクトップ（AMP ページ）
フォーマットを学ぶ自分のサイトを確認する
デスクトップ
スマートフォン

1分でわかる

AMP ページの広告とは

AMP は、とても軽くて速いページを作るための方法で、オープン プロジェクトとして作られました。仕切りのあるお弁当箱を想像してください。それぞれに決まった場所があり、何でも放り込めるわけではありません。AMP ページも同じです。広告コードを好きなように貼ることはできません。その代わりに、コンポーネントという既製の部品を使います。ページを重くせずに、広告をリクエストして表示する方法をすでに知っている部品です。

主な部品は3つあります。amp-ad は、バナーのような通常の広告スペースです。ネットワークのタイプを指定します。AdSense なら adsense、Ad Manager なら doubleclick で、幅と高さも指定します。amp-auto-ads は自動モードです。ネットワークから設定を受け取り、最大数と広告間の最小距離を守りながら、広告を置く場所を自分で選びます。amp-sticky-ad は、アンカーのように画面の下部に固定される帯で、閉じるボタンがあります。

広告ネットワークのコードは、ページ上で直接は動きません。AMP が管理する iframe という別の枠の中で動きます。広告が届かない場合、AMP は空のスペースを隠そうとしますが、画面に見えているスペースは、ページがずれないように隠しません。また、AMP の広告は、位置が固定された枠の中には置けません。AMP 独自の固定広告と amp-lightbox は例外です。

Google の説明では、AMP はどんな端末でも速くて高性能なページを目指すオープンなプロジェクトです。AdSense では、広告ユニットを作って AMP コードを選ぶか、AMP 用の自動広告をオンにします。Ad Manager では、管理画面で直接 AMP タグを生成でき、Google は AMP 向けの HTML 広告を使うことを推奨しています。サイトにすでに AMP 版のページがあり、そこにも広告を表示したい場合に向いています。

手順

実装の方法

  1. head でコンポーネントを読み込むAMP ページの head に、amp-ad のスクリプトを入れます。自動広告または固定帯を使う場合は、amp-auto-ads と amp-sticky-ad のスクリプトも入れます。
  2. AdSense：AMP 広告ユニットを作成するAdSense で「広告」、「広告ユニットごと」、「ディスプレイ広告」の順にクリックします。名前を付け、「レスポンシブ」のままにして「保存してコードを取得」をクリックし、「AMP」をクリックします。スクリプトは head に、広告コードは body に入れます。
  3. AdSense：AMP 向け自動広告をオンにする「広告」で「AMP サイトをお持ちですか?」をクリックし、「AMP 用自動広告」をオンにして「AMP コードを取得」をクリックします。スクリプトは head に、コードは各ページの body の開始タグの直後に貼ります。そのあと「完了」と「適用」をクリックします。
  4. Ad Manager：AMP タグを生成する「在庫」、「広告ユニット」の順にクリックし、広告ユニットを開いて「タグ」タブに進みます。「AMP タグ」を選んで「続行」をクリックします。「AMP マーカー」にチェックを入れてプレースホルダとフォールバックを含め、広告ユニットのサイズを選びます。
  5. AMP ページと通常ページをつなぐ通常のページでは、amphtml のマークアップで AMP 版を指定します。AMP ページでは、canonical のマークアップで通常のページに戻します。
  6. 待って確認する広告が表示されるまでに数分、場合によっては最大1時間かかることがあります。

実装例

コードと画面での表示

コンポーネントのスクリプトは head に入れます。amp-auto-ads は body の開始タグの直後に、そのほかの広告は、表示したい場所の body に入れます。
<!-- No <head> da página AMP -->
<script async custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-auto-ads"
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-sticky-ad"
  src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

<body>
  <!-- AdSense: anúncios automáticos, logo depois de abrir o body -->
  <amp-auto-ads type="adsense"
    data-ad-client="ca-pub-0000000000000000">
  </amp-auto-ads>

  <!-- AdSense: bloco responsivo, onde o anúncio deve aparecer -->
  <amp-ad width="100vw" height="320"
    type="adsense"
    data-ad-client="ca-pub-0000000000000000"
    data-ad-slot="1234567890"
    data-auto-format="rspv"
    data-full-width>
    <div overflow></div>
  </amp-ad>

  <!-- Ad Manager: faixa fixa embaixo (só uma por página) -->
  <amp-sticky-ad layout="nodisplay">
    <amp-ad width="320" height="50"
      type="doubleclick"
      data-slot="/1234567/exemplo">
    </amp-ad>
  </amp-sticky-ad>
</body>
デスクトップamp-ad は、指定した幅と高さで、通常のバナーのようにスペースを占めます。amp-sticky-ad の固定帯は下に固定され、幅は全幅、高さは最大100ピクセルです。
モバイルAdSense のレスポンシブ ユニットは、画面の幅いっぱいに表示されます。固定帯は下に表示され、閉じることができます。ページの最後まで来ると、AMP が余白を追加し、固定帯がコンテンツを覆わないようにします。

Googleのガイダンス

できることとできないこと

してよいこと

  • amp-ad を、タイプ adsense または doubleclick で使い、幅と高さを指定する。
  • AdSense のレスポンシブ ユニットを使う。選択したままにしておくことを Google は推奨しています。
  • AdSense で amp-auto-ads を使い、AMP ページで使いたくない形式は管理画面でオフにする。
  • 1ページに amp-sticky-ad の固定帯を1つだけ置き、その中に amp-ad を1つだけ入れる。
  • 広告の読み込み中はプレースホルダを、広告が届かないときはフォールバックを表示する。
  • Ad Manager で、Fast Fetch を使う AMP 広告を、最小間隔30秒で更新する。

してはいけないこと

  • 位置が固定された枠の中に amp-ad を置く。固定広告と amp-lightbox は例外です。
  • 同じページに amp-sticky-ad を複数置く。
  • 固定帯に透明または半透明の背景を使う。AMP が単色に置き換えます。
  • HTTPS なしで広告や埋め込みを配信する。
  • Ad Manager で、更新をシングル リクエスト（SRA）と一緒にオンにする。更新はオフになり、エラーが表示されます。
  • amp-ad をウェブ ストーリーで直接使う。ウェブ ストーリーでは amp-story-auto-ads を使います。

ヒント

正しく行うために

注意

よくあるエラー

head の外にスクリプトがある

各コンポーネントのスクリプトは head に、広告は body に入れます。正しいスクリプトがないと、コンポーネントは動作しません。

サンプル コードをコピーする

AMP オプションを選ぶと、AdSense が AMP 用のコードをそのまま出力します。パブリッシャー ID が入った、自分のアカウントのコードをコピーしてください。

固定帯の作り方が違う

amp-sticky-ad には、nodisplay のレイアウトと、その中に1つだけの amp-ad が必要です。

つながっていない AMP ページ

AdSense では、通常のページと AMP ページが、amphtml と canonical のマークアップで互いを指すようにすることが求められます。

よくある質問

AMP ページで通常の AdSense コードを使えますか？

AMP 用のコードを使ってください。AMP ページでは、広告ネットワークの JavaScript はページ上で直接は動かず、AMP が管理する iframe の中で動きます。

広告が届かないとどうなりますか？

AMP はスペースを隠そうとします。隠せない場合は、フォールバックを表示します。広告のない固定帯は表示されません。

Ad Manager は AMP の広告を更新できますか？

はい。Fast Fetch の広告で可能です。head に、ページごとまたはスロットごとの間隔を指定するマークアップを入れます。間隔は最低30秒です。SRA とは併用できません。

広告が表示されるまでどれくらいかかりますか？

通常は数分、場合によっては最大1時間です。

ライブラリ

Google の公式情報

このページの内容はすべて Google の公式ドキュメントに基づいています。原文で直接確認できます。

あなたのサイトは、このフォーマットを正しく使っていますか?

監査は、何もクリックせずに訪問者としてサイトを読み取り、修正すべき点を表示します。

監査を実行する