amp-ad

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

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

amp-ad / amp-embed

動作

広告は、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>

属性

プレースホルダ

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 のルールをご確認ください。

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

• A8
• A9
• AccessTrade
• Adblade
• AdButler
• Adform
• Adfox
• Ad Generation
• Adhese
• Adincube
• ADITION
• Adman
• AdmanMedia
• Admixer
• AdOcean
• AdPicker
• AdPlugg
• Adpon
• AdReactor
• AdSense
• AdSensor
• AdsNative
• AdSpeed
• AdSpirit
• AdStir
• AdTech
• AdThrive
• AdUnity
• Ad Up Technology
• Adventive
• Adverline
• Adverticum
• AdvertServe
• Adyoulike
• Affiliate-B
• AJA
• AMoAd
• AppNexus
• AppVador
• Atomx
• Baidu
• BeOpinion
• Bidtellect
• brainy
• Broadstreet Ads
• CA A.J.A. Infeed
• CA-ProFit-X
• Cedato
• Chargeads
• Colombia
• Connatix
• Content.ad
• Criteo
• CSA
• CxenseDisplay
• Dianomi
• Directadvert
• DistroScale
• Dot and Media
• DoubleClick
• eADV
• Epeex
• E-Planning
• Ezoic
• Felmat
• FlexOneELEPHANT
• FlexOneHARRIER
• Flite
• fluct
• FreeWheel
• Fusion
• GenieeSSP
• Giraff
• GMOSSP
• GumGum
• Holder
• I-Mobile
• Imonomy
• iBillboard
• Imedia
• Improve Digital
• Index Exchange
• Industrybrains
• InMobi
• Innity
• Kargo
• Kiosked
• Kixer
• Kuadio
• Ligatus
• LockerDome
• LOKA
• MADS
• MANTIS
• Media.net
• MediaImpact
• Mediavine
• Medyanet
• Meg
• MicroAd
• MixiMedia
• Mixpo
• Monetizer101
• mox
• myTarget
• myWidget
• Nativo
• Navegg
• Nend
• NETLETIX
• Noddus
• Nokta
• OneAD
• OnNetwork
• Open AdStream（OAS）
• OpenX
• Pixels
• plista
• polymorphicAds
• popin
• Pressboard
• PromoteIQ
• PubGuru
• PubMatic
• Pubmine
• PulsePoint
• Purch
• Rambler&Co
• RbInfoxSg
• Realclick
• recomAD
• Red for Publishers
• Relap
• Revcontent
• RevJet
• Rubicon Project
• RUNative
• SAS CI 360 Match
• Sekindo
• Sharethrough
• Sklik
• SlimCut Media
• Smart AdServer
• smartclip
• sogou Ad
• Sortable
• SOVRN
• Speakol
• SpotX
• SunMedia
• Swoop
• TcsEmotion
• Teads
• torimochi
• TripleLift
• Trugaze
• UZOU
• ValueCommerce
• video intelligence
• Videonow
• Viralize
• UAS
• ucfunnel
• Unruly
• VMFive
• Webediads
• Weborama
• Widespace
• Wisteria
• WPMedia
• Xlift
• Yahoo
• YahooJP
• Yandex
• Yengo
• Yieldbot
• Yieldmo
• Yieldone
• Yieldpro
• Zedo
• Zucks

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

• 24smi
• Bringhub
• Dable
• Engageya
• Epeex
• Insticator
• Jubna
• Outbrain
• Postquare
• PubExchange
• Smi2
• Taboola
• Zen
• ZergNet