検索
検索をクリア
検索終了
Google アプリ
メインメニュー

広告コードの導入

AMP 対応広告ユニットの作成方法

このガイドでは、AMP 対応広告ユニットを作成し、AMP ページに AdSense 広告を表示する方法を説明します。

AdSense AMP 広告ユニットはレスポンシブ サイズでも固定サイズでもかまいませんが、Google ではレスポンシブ AMP 広告ユニットのご利用をおすすめします。その理由は次のとおりです。

  • レスポンシブ AMP 広告ユニットは、ユーザーの端末に合わせて自動的にサイズが変わり、画面の全幅を使って表示されます。
  • お客様のページで成果が出るように、広告のサイズが最適化されます。
AMP 広告は、AdSense のすべての機能(例: 広告の許可とブロック、広告掲載率、パフォーマンス レポート)でサポートされています。

準備

AMP 広告を表示するページに、必要な AMP スクリプトを追加済みであることをご確認ください。

  • スクリプトを追加するには、次のコードをコピーして、AMP HTML の<head></head> タグの間に貼り付けます。

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

このスクリプトによって、必要な amp-ad ライブラリが読み込まれますが、これだけでは AMP ページに広告は表示されません。広告を表示するには、AMP 対応広告コードも挿入してください。amp-ad コンポーネントについて詳しくは、https://www.ampproject.org/docs/reference/components/amp-ad をご覧ください。

レスポンシブ AMP 広告ユニットを作成する

レスポンシブ AMP 広告ユニットは現在のところ手動で作成する必要があります。手順は次のとおりです。

  1. AdSense アカウントで新しいレスポンシブ広告ユニットを作成します。
  2. ステップ 1 で作成したレスポンシブ広告ユニットの広告コードの中から、次の情報を見つけてメモします。
    • サイト運営者 ID(data-ad-client)、例: ca-pub-1234567891234567
    • 広告ユニット ID(data-ad-slot)、例: 1234567890

    サンプルを表示

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:inline-block;width:120px;height:600px"
         data-ad-client="ca-pub-1234567891234567"
         data-ad-slot="1234567890"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  3. AMP 広告コードを作成します。
    次の広告コードをコピーして、ステップ 2 でメモしたご自身の情報で data-ad-clientdata-ad-slot の値を置き換えます。
    <amp-ad width="100vw" height=320
      type="adsense"
      data-ad-client="ca-pub-1234567891234567"
      data-ad-slot="1234567890"
      data-auto-format="rspv"
      data-full-width>
        <div overflow></div>
    </amp-ad>
    上記の広告コードは、指定された部分以外はなるべく変更しないようにしてください(広告コードが機能しなくなる恐れがあります)。
  4. 値を置き換えた AMP 広告コードを、広告を表示するモバイルページの HTML ソースコードに貼り付けます。AMP 広告ユニットは、スクロールせずに見える範囲スクロールしなければ見えない位置のどちらにも配置できます。なお、AMP 広告ユニットを含むページにも AdSense プログラム ポリシーが適用されますのでご留意ください。
    この広告コードは、高さが固定または制限されている親コンテナ(<div><iframe> など)の中には入れないでください。広告のサイズが変わってページのレイアウトが崩れる恐れがあります。
  5. (省略可)AMP 広告コードを配置したら、さまざまなモバイル端末で広告をテストして、レスポンシブ機能が適切に動作しているか確認することをおすすめします。
    ご自身の AMP ページで広告を表示すると、AMP がコンテンツを優先的に表示するため、広告が表示されるまでに時間がかかる場合があります。詳しくは、How AMP pages are cached(英語)(AMP ページのキャッシュの仕組み)をご覧ください。

高度な機能: 固定サイズの AMP 広告、AMP 広告のスタイル設定など

AMP 広告ユニットの幅や高さを固定するには、レスポンシブ AMP 広告コードの変更方法の手順に沿って作業してください。

さらに高度な機能では、他の AMP 要素と同じように、AMP 広告の要素のスタイルを設定できます。詳しくは、レイアウトを管理するさまざまな方法をご確認ください。

AMP 広告ユニットのパフォーマンスを確認する

AMP 広告ユニットのパフォーマンスを確認するには、コンテンツ プラットフォーム レポートをご覧ください。

この記事は役に立ちましたか?
改善できる点がありましたらお聞かせください。
false