AMP

amp-ad / amp-embed

広告を表示するコンテナです。amp-embedamp-ad タグの別名です。タグ名は異なりますが、そのすべての機能を受け継いでいます。より正確な意味では、amp-embed を使用します。AMP ドキュメントでは、HTTPS 経由で配信される広告と埋め込みのみを表示できます。

amp-ad / amp-embed

amp-ad / amp-embed の仕様は今後、大幅に変更される可能性があります。現在は、広告を自動表示できる形式に設計されています。

説明広告を表示するコンテナ。amp-embedamp-ad タグの別名です。タグ名は異なりますが、そのすべての機能を受け継いでいます。より正確な意味では、amp-embed を使用します。AMP ドキュメントでは、HTTPS 経由で配信される広告と埋め込みのみを表示できます。
必要なスクリプト<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
注: amp-ad はこのスクリプトがなくても機能しますが、将来にわたって互換性を維持するためにこのスクリプトを使用することを強くおすすめします。
サポートされるレイアウトfill、fixed、fixed-height、flex-item、intrinsic、nodisplay、responsive
AMP By Example の amp-ad の例をご覧ください。

動作

広告は、AMP ドキュメントの他のすべてのリソースと同じように、<amp-ad> と呼ばれる特別なカスタム要素とともに読み込まれます。広告ネットワークから提供される JavaScript を AMP ドキュメント内で実行することはできません。代わりに、AMP ランタイムは(iframe サンドボックス経由で)別のオリジンから iframe を AMP ドキュメントとして読み込み、広告ネットワークの JavaScript をその iframe サンドボックス内で実行します。

<amp-ad> では、そのレイアウト タイプのルールに沿って、幅と高さの値を指定する必要があります。また、表示する広告ネットワークを指定する type 引数が必要です。タグのすべての data-* 属性は、最終的に広告をレンダリングするコードに引数として自動的に渡されます。特定のタイプのネットワークで必要な data- 属性は広告ネットワークによって異なるため、広告ネットワークとともに記述する必要があります。

例: 複数の広告の表示

コード全体を表示

属性

type(必須)広告ネットワークの識別子を指定します。type 属性では、広告タグに使用するテンプレートを選択します。
src(オプション)この属性を使用して、指定した広告ネットワーク用のスクリプトタグを読み込みます。この属性は、ページに挿入するスクリプトタグを 1 つだけ必要とする広告ネットワークで使用できます。src の値には、指定した広告ネットワークのホワイトリストに登録されているプレフィックスを指定する必要があります。また、値には https プロトコルを使用する必要があります。
data-foo-barほとんどの広告ネットワークには詳細な設定が必要です。この設定は、HTML の data- 属性を使用してネットワークに渡すことができます。パラメータ名は標準的なデータ属性に従い、キャメルケース変換されます。たとえば「data-foo-bar」は、広告に送信されると「fooBar」として設定されます。属性を使用できる広告ネットワークに関するドキュメントをご覧ください。
data-vars-foo-bardata-vars- で始まる属性は、amp-analytics の変数用に予約されています。
json(オプション)恣意的に複雑化された JSON オブジェクトとして設定を広告に渡すには、この属性を使用します。オブジェクトは広告にそのまま渡されます。名前の分割は行われません。
data-consent-notification-id(オプション)この属性を指定する場合、(Cookie に似た)ユーザーの「AMP クライアント ID」が広告に渡されるまで、指定された HTML ID による amp-user-notification の確認が必要になります。つまり、ユーザーが通知を確認するまで広告レンダリングが遅延します。
data-loading-strategy(オプション)現在のビューポートから離れた場所にある一定数のビューポート内に広告を表示する場合、広告に対して読み込みを開始するよう指示します。data-loading-strategy 属性が指定されていない場合、デフォルト値は 3 になります。フロートの値は [0, 3] の範囲で指定できます(値が指定されていない場合は 1.25 に設定されます)。値を小さくすると視認性が高まりますが(つまり、広告がいったん読み込まれると、表示される可能性が高くなる)、広告の表示回数が少なくなる(広告の読み込み回数が少なくなる)リスクがあります。属性が指定されているが、値が空のままの場合は、システムによってフロートの値が割り当てられ、表示回数に大きな影響を与えることなく視認性を高めるように最適化されます。prefer-viewability-over-views を値として指定すると、視認性も自動的に最適化されます。
data-ad-container-id(オプション)折りたたもうとした場合に、コンテナ コンポーネント ID を広告に通知します。コンテナ コンポーネントは、広告の親の <amp-layout> コンポーネントである必要があります。data-ad-container-id が指定されている場合にこのような <amp-layout> コンテナ コンポーネントが検出されると、AMP ランタイムは広告が表示されていない間、広告コンポーネントではなくコンテナ コンポーネントを折りたたもうとします。この機能は、広告インジケーターが表示されている場合に便利です。
共通の属性この要素には、AMP コンポーネントに拡張された共通の属性が含まれます。

プレースホルダ

amp-ad は必要に応じて、placeholder 属性が設定された子要素をサポートします。広告ネットワークでこの子要素がサポートされている場合、広告を表示できるようになるまでこの子要素が表示されます。詳しくは、プレースホルダとフォールバックをご覧ください。

<amp-ad width=300 height=250
    type="foo">
    <div placeholder>Loading ...</div>
</amp-ad>

表示可能な広告がない場合

スロットに表示できる広告がない場合、AMPは amp-ad 要素を折りたたもうとします(つまり、この要素を display: none に設定しようとします)。AMP は、ユーザーのスクロール位置に影響を及ぼさずにこの処理を実行できるかどうかを判断します。広告が現在のビューポート内に表示されている場合は、ユーザーのスクロール位置に影響が及ぶため、広告は折りたたまれませんが、広告が現在のビューポートの外部に表示されている場合は、広告が折りたたまれます。

折りたたむことができない場合のために、amp-ad コンポーネントは fallback 属性が設定された子要素をサポートしています。フォールバック要素が指定されている場合は、カスタマイズされたフォールバック要素が表示されます。指定されていない場合、AMP はデフォルトのフォールバックを適用します。

フォールバックが指定されている例:

<amp-ad width=300 height=250 type="foo">
  <div fallback>No ad for you</div>
</amp-ad>

動画広告の配信

動画広告で AMP の動画を収益化する方法には次の 3 つがあります。

  1. AMP は、広告を収益化できるさまざまな動画プレーヤー(BrightCove、DailyMotion など)を標準でサポートしています。完全なリストについては、メディア コンポーネントをご覧ください。

  2. IMA SDK と HTML5 動画プレーヤーが組み込まれている amp-ima-video コンポーネントを使用します。

  3. AMP でサポートされていない動画プレーヤーを使用する場合は、amp-iframe を使用してカスタム プレーヤーを提供できます。amp-iframe のアプローチを使用する場合は、次のようにします。

    • 最初のビューポートでプレーヤーを読み込む場合は、ポスターがあることを確認します。詳しくは、こちらをご覧ください。
    • 動画とポスターは HTTPS 経由で配信する必要があります。

カスタム ドメインからの広告の掲載

AMP は、独自のドメインなどのカスタム ドメインから広告を読み込むために使用するブートストラップ iframe の読み込みをサポートしています。

この機能を有効にするには、remote.html ファイルをウェブサーバーにコピーして、次のメタタグを AMP ファイルに追加します。

<meta name="amp-3p-iframe-src" content="https://assets.your-domain.com/path/to/remote.html">

メタタグの content 属性には、ウェブサーバーにコピーした remote.html ファイルの絶対 URL を指定します。この URL には「https」スキーマを使用する必要があります。このファイルを AMP ファイルと同じオリジンに格納することはできません。たとえば、AMP ファイルを www.example.com にホストする場合、この URL に www.example.com を指定することはできませんが、something-else.example.com は指定できます。iframe 用に使用できるオリジンについて詳しくは、iframe のオリジン ポリシーをご覧ください。

セキュリティ

受信データを draw3p 関数に渡す前に検証を行って、iframe が想定どおりの動作のみを行うことを確認します。これは、カスタムの JavaScript インジェクションが可能な広告ネットワークの場合は特に当てはまります。

また、iframe は、iframe を必要とするオリジンにのみ設定する必要があります。オリジンは次のいずれかになります。

  • 専用のオリジン
  • AMP キャッシュの https://cdn.ampproject.org

AMP キャッシュの場合は、「ソースオリジン」(cdn.ampproject.org から配信されるドキュメントのオリジン)が自分のオリジンのいずれかであることを確認する必要もあります。

オリジンの適用は、draw3p の 3 番目の引数で行うことができます。さらに、ブラウザが完全にサポートされている場合、allow-from ディレクティブを使用して行う必要もあります。

配信元の広告設定の拡張

この機能はあくまでも任意です。広告サーバーへの広告リクエストを作成する前に、広告リクエストを拡張したい場合があります。

広告ネットワークが高速フェッチをサポートしている場合は、リアルタイム設定(RTC)を使用してください(たとえば、DoubleClick と AdSense の統合により、高速フェッチと RTC がサポートされます)。

広告ネットワークで遅延フェッチを使用している場合は、remote.html ファイルで draw3p 関数の呼び出しにコールバックを渡すことができます。コールバックは 1 つ目の引数として配信元の設定を受け取り、2 つ目の引数として別のコールバックを受け取ります(以下の例では done が呼び出されています)。広告レンダリングを続行するには、設定を更新してこのコールバックを呼び出す必要があります。

例:

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  // Don't actually call setTimeout here. This should only serve as an
  // example that is OK to call the done callback asynchronously.
  setTimeout(function() {
    done(config);
  }, 100)
}, ['allowed-ad-type'], ['your-domain.com']);

スタイル設定

CSS の position: fixed が設定されているコンテナに <amp-ad> 要素自体を含めたり配置したりすることはできません(amp-lightbox を除く)。これは、ページ全体のオーバーレイ広告の UX に影響するためです。UX を一定に維持できるよう、AMP が管理するコンテナの内部で同様の広告フォーマットを使用できるようにすることが今後検討される可能性があります。

検証

AMP 検証ツールの仕様で amp-ad のルールをご確認ください。

サポートされている広告ネットワーク

サポートされている埋め込みタイプ

ご不明な点がある場合

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub