amp-ad / amp-embed

Important: this documentation is not applicable to your currently selected format stories!

amp-ad

Description

広告を表示するコンテナです。

Required Scripts

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

Supported Layouts

fill fixed fixed-height flex-item fluid intrinsic nodisplay responsive

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

amp-ad / amp-embed

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

説明	広告を表示するコンテナ。`amp-embed` は `amp-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- 属性は広告ネットワークによって異なるため、広告ネットワークとともに記述する必要があります。

例: 複数の広告の表示

<amp-ad type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
    width="300"
    height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
  </amp-ad>
  <amp-ad width="300"
    height="250"
    type="industrybrains"
    data-width="300"
    data-height="250"
    data-cid="19626-3798936394">
  </amp-ad>
  <amp-embed type="taboola"
    width="400"
    height="300"
    layout="responsive"
    data-publisher="amp-demo"
    data-mode="thumbnails-a"
    data-placement="Ads Example"
    data-article="auto">
  </amp-embed>

このスニペットを Playground で開く

属性

type（必須）	広告ネットワークの識別子を指定します。`type` 属性では、広告タグに使用するテンプレートを選択します。
src（オプション）	この属性を使用して、指定した広告ネットワーク用のスクリプトタグを読み込みます。この属性は、ページに挿入するスクリプトタグを 1 つだけ必要とする広告ネットワークで使用できます。`src` の値には、指定した広告ネットワークのホワイトリストに登録されているプレフィックスを指定する必要があります。また、値には `https` プロトコルを使用する必要があります。
data-foo-bar	ほとんどの広告ネットワークには詳細な設定が必要です。この設定は、HTML の `data-` 属性を使用してネットワークに渡すことができます。パラメータ名は標準的なデータ属性に従い、キャメルケース変換されます。たとえば「data-foo-bar」は、広告に送信されると「fooBar」として設定されます。属性を使用できる広告ネットワークに関するドキュメントをご覧ください。
data-vars-foo-bar	`data-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 つがあります。

AMP は、広告を収益化できるさまざまな動画プレーヤー（BrightCove、DailyMotion など）を標準でサポートしています。完全なリストについては、メディアコンポーネントをご覧ください。
IMA SDK と HTML5 動画プレーヤーが組み込まれている amp-ima-video コンポーネントを使用します。
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 のルールをご確認ください。

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

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

さらに支援が必要ですか？

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか？他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする

バグや不足している機能がありますか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする