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

広告コードの導入

AMP 広告ユニットを作成する

AdSense 向け AMP 対応広告コード作成ガイド

Accelerated Mobile Pages(AMP)は、高速表示されるコンテンツ ページを作成することでユーザーのモバイルウェブ体験の向上を目指すオープンソース プロジェクトです。AMP ページに AdSense 広告を掲載するお客様は、このガイドで AMP 対応の広告ユニットの作成方法をご確認ください。

AMP ページは AMP HTML で作成します。AMP HTML は標準の HTML に似ていますが、パフォーマンスの信頼性に一定の制約があり、リッチ コンテンツを作成できる、簡易 HTML 以上の拡張機能を備えています。そのため、AMP 広告ユニットには通常の AdSense タグとは異なる独自のタグが必要になります。

AMP 広告ユニットを作成する方法は次のとおりです。

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

    AdSense アカウントでレスポンシブ広告ユニットを作成して、レスポンシブ広告コードから次の情報をメモします。

    • サイト運営者 ID(data-ad-client)(例: ca-pub-1234567891234567)
    • 広告ユニット ID(data-ad-slot)(例: 1234567890)

    AMP 対応の広告コードを作成するには、これらの 2 つの値が必要になります。

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-1234567891234567"
         data-ad-slot="1234567890"
         data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

  2. AMP 広告コードを作成する

    AMP 広告コードは、AMP 広告ユニットの配置先をスクロールせずに見える範囲にするか、スクロールしなければ見えない位置にするかによって 2 種類から選択できます。

    スクロールせずに見える範囲

    スクロールせずに見える範囲に配置する場合は、高さを固定した AMP 広告ユニットを使用することをおすすめします。最適な結果を得るには、広告ユニットの高さを 100 ピクセルに固定し、幅はページ レイアウトに合わせて自動調整されるようにレスポンシブのままにします。

    高さを 100 ピクセルに固定した AMP 広告ユニットを作成するには、次のコード内の data-ad-clientdata-ad-slot の値をお客様のサイト運営者 ID と広告ユニット ID に置き換えます(手順 1 をご覧ください)。

    <amp-ad
    layout="fixed-height"
    height=100
    type="adsense"
    data-ad-client="ca-pub-1234567891234567"
    data-ad-slot="1234567890">
    </amp-ad>

    スクロールしなければ見えない位置

    スクロールしなければ見えない位置に配置する場合は、300×250 のレスポンシブ AMP 広告ユニットを使用することをおすすめします。AMP のレスポンシブ レイアウトを使用すると、表示される広告ユニットのサイズが端末のサイズに合わせて自動的に変更されます。

    300×250 のレスポンシブ AMP 広告ユニットを作成するには、次のコード内の data-ad-clientdata-ad-slot の値をお客様のサイト運営者 ID と広告ユニット ID に置き換えます(手順 1 をご覧ください)。

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

    高度な機能を使う場合は、他の AMP 要素と同様に AMP 広告要素のスタイルを設定できます。各種レイアウトについては、次のページを参照してください(https://www.ampproject.org/docs/guides/responsive/control_layout)。
  3. モバイルページに AMP 広告コードを配置する

    AMP 広告コードをコピーして、広告が表示されるモバイルページの HTML ソースコードに貼り付けます。AMP 広告ユニットが含まれるページにも AdSense プログラム ポリシーが適用されることを忘れないようにしてください。

    AMP 広告コードを配置し終えたら、さまざまなモバイル端末を使ってレスポンシブ機能の動作を確認することをおすすめします。
  4. 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-ad コンポーネントについて詳しくは、次のページを参照してください(https://www.ampproject.org/docs/reference/components/amp-ad)。

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