AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

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

amp-auto-ads

Description

リモートで提供される設定ファイルを使用して、AMP ページに広告を動的に挿入します。

 

Required Scripts

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

リモートで提供される設定ファイルを使用して、AMP ページに広告を動的に挿入します。

提供状況 試験運用版
必要なスクリプト <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
サポートされるレイアウト なし

動作

amp-auto-ads は、十分な数の有効なプレースメントが設定で指定されている場合、広告ネットワークで指定された一連の制約を遵守しながら、追加の広告を挿入しようとします。こうした制約により、以下が制限されます。

  • 挿入可能な広告の総数
  • 隣接する広告間の最小距離

また、広告が挿入される場所は、attemptChangeSize で定められているとおり、許容できないリフローを生じさせないページだけです。

<amp-auto-ads> タグは <body> の最初の子要素として配置する必要があります。

広告ネットワークのタイプと（広告ネットワークで必要な）その他の情報は、タグで指定する必要があります。

<amp-auto-ads
    type="adsense"
    data-ad-client="ca-pub-5439573510495356">
  </amp-auto-ads>

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

属性

type（必須） 広告ネットワークの識別子。
data-foo-bar ほとんどの広告ネットワークには詳細な設定が必要です。この設定は、HTML の data- 属性を使用してネットワークに渡すことができます。パラメータ名は標準的なデータ属性に従い、キャメルケース変換されます。たとえば「data-foo-bar」は、広告に送信されると「fooBar」として設定されます。属性を使用できる広告ネットワークに関するドキュメントをご覧ください。
共通の属性 この要素には、AMP コンポーネントに拡張された共通の属性が含まれます。

設定の仕様

設定では、<amp-auto-ads> によって広告を配置できるページ上の場所を定義します。設定は、ad-network-config.js で定義されている URL の第三者広告ネットワークから取得されます。また、下記の ConfigObj の定義と一致する、シリアル化された JSON オブジェクトである必要があります。

設定の例

以下の例では、ページの 3 番目の <DIV id='domId'> 内にあるすべての <P class='paragraph'> 要素の直後に広告を配置する必要があることが示されています。これらの位置のいずれかに配置された広告には、タイプ: BANNER、上の余白: 4 ピクセル、下の余白: 10 ピクセルを指定します。

{
  "placements": [
    {
      "anchor": {
        "selector": "DIV#domId",
        "index": 2,
        "sub": {
          "selector": "P.paragraph",
          "all": true,
        },
      },
      "pos": 4,
      "type": 1,
      "style": {
        "top_m": 5,
        "bot_m": 10,
      },
    },
  ]
}

オブジェクトの定義

ConfigObj

設定オブジェクトで指定するフィールドは次のとおりです。

フィールド名 型 説明
placements 配列<!PlacementObj> 広告を挿入できるページ上の場所を示す必須フィールド。
attributes オブジェクト<文字列, 文字列> 属性名から、この設定を使用して挿入されたすべての <amp-ad> 要素に適用する属性値へのマッピングを指定するオプション フィールド。以下の属性名のみを指定できます。
  • type
  • layout
  • data-*（任意のデータ属性）
adConstraints AdConstraintsObj ページ上に広告を掲載する場合に使用する必要がある制約を指定するオプション フィールド。このフィールドを指定しないと、amp-auto-ads は、[ad-network-config.js]（0.1/ad-network-config.js）で指定されているデフォルトの制約を使用しようとします。

PlacementObj

placements 設定オブジェクトで指定するフィールドは次のとおりです。

フィールド名 型 説明
anchor AnchorObj プレースメントの位置が固定されているページでの要素の検索に使用する情報を提供する必須フィールド。
pos RelativePositionEnum アンカー要素に対するプレースメントの相対的な位置を示す必須フィールド。
type PlacementTypeEnum プレースメントのタイプを示す必須フィールド。
style PlacementStyleObj このプレースメントの位置に挿入された広告に適用する必要があるスタイル設定を示すオプション フィールド。
attributes オブジェクト<文字列, 文字列> 属性名から、このプレースメントを使用して挿入されたすべての <amp-ad> 要素に適用する属性の値へのマッピングを指定するオプション フィールド。ここで指定した属性により、親の ConfigObj でも指定されている同じ名前の属性がすべてオーバーライドされます。以下の属性名のみを指定できます。
  • type
  • layout
  • data-*（任意のデータ属性）

AnchorObj

anchor 設定オブジェクトで指定するフィールドは次のとおりです。

フィールド名 型 説明
selector 文字列 このレベルのアンカー定義で要素を選択するように CSS セレクタを定義する必須フィールド。
index 数値 セレクタで選択された要素のインデックスを指定するオプション フィールド。このレベルのアンカー定義はこのインデックスに制限されます。デフォルトでは、値は 0 に設定されます（all フィールドが false の場合）。
all ブール値 index フィールドが指定されている場合は無視されます。true は、セレクタで選択されたすべての要素を含める必要があることを示します。そうでない場合は false に設定します。
min_c 数値 要素に追加する textContent プロパティの最小長を指定するオプション フィールド。デフォルト値は 0 です。
sub AnchorObj このレベルのアンカー定義で選択した任意の要素内で要素を選択する再帰 AnchorObj を指定するオプション フィールド。

PlacementStyleObj

style 設定オブジェクトで指定するフィールドは次のとおりです。

フィールド名 型 説明
top_m 数値 この位置に挿入された広告に必要な上余白をピクセル数で指定するオプション フィールド。デフォルト値は 0 です。
bot_m 数値 この位置に挿入された広告に必要な下余白をピクセル数で指定するオプション フィールド。デフォルト値は 0 です。

RelativePositionEnum

placements 設定オブジェクトの pos フィールド用の ENUM 値は次のとおりです。

名前 値 説明
BEFORE 1 広告をアンカーの直前に兄弟として挿入する必要があります。
FIRST_CHILD 2 広告をアンカーの最初の子要素として挿入する必要があります。
LAST_CHILD 3 広告をアンカーの最後の子要素として挿入する必要があります。
AFTER 4 広告をアンカーの直後に兄弟として挿入する必要があります。

PlacementTypeEnum

placements 設定オブジェクトの type フィールド用の ENUM 値は次のとおりです。

名前 値 説明
BANNER 1 プレースメントによってバナー広告の位置を記述します。

AdConstraintsObj

adConstraints 設定オブジェクトで指定するフィールドは次のとおりです。

フィールド名 型 説明
initialMinSpacing 文字列 広告を挿入する際の、ページ上の既存の広告（手動で掲載した広告、または amp-auto-ads によって前に掲載された広告）との最小距離を示す必須フィールド。値は単位のプレフィックス付きの数値で表されます。たとえば、「10px」は 10 ピクセルを、「0.5vp」はビューポートの半分の高さを表します。負の値は無効です。サポートされている単位は次のとおりです。
  • px - ピクセル
  • vp - ビューポートの高さの倍数
この値は、ページ上の既存の広告数が subsequentMinSpacing フィールドで指定された adCount マッチャーより少ない場合にのみ適用されます。
subsequentMinSpacing 配列<!SubsequentMinSpacingObj> ページ上の既存の広告数に基づいて広告の挿入時に適用する必要がある広告の間隔を指定するオプション フィールド。
maxAdCount 数値 amp-auto-ads を使用した場合にページ上に表示できる広告の最大数を指定する必須フィールド。手動で掲載した広告と、amp-auto-ads によって掲載された広告の両方がカウントされます。たとえば、このフィールドが 5 に設定されていて、ページに手動で掲載した広告が 3 つある場合、amp-auto-ads によって 2 つの広告をさらに掲載できます。

SubsequentMinSpacingObj

subsequentMinSpacing 設定オブジェクトで指定するフィールド。subsequentMinSpacing のエントリを使用すると、追加の広告間に必要な間隔を、ページ上の既存の広告数に基づいて変更できます。例として、次のシナリオについて考えてみましょう。

  • ページ上に既存の広告が 2 つある
  • subsequentMinSpacing フィールドが次のように設定されている [ {adCount: 3, spacing: "500px"}, {adCount: 5, spacing: "1000px"}, ]

初めは、ページ上の既存の広告数が 2 つのため、合致するマッピングはありません。そのため、最小間隔がデフォルトで AdConstraints オブジェクトの initialMinSpacing に設定されます。 amp-auto-ads は、adContraints の制約を破らずに使用できるプレースメントを使い果たすまで、広告を再帰的に掲載しようとします。amp-auto-ads が 1 つ目の広告を掲載した後、ページ上の広告は 3 つになります。subsequentMinSpacing に広告数が 3 つ（またはそれ以上）の場合のマッピングが設定されているため、最小間隔が 500 ピクセルになります。ページ上の広告数が 5 つになるまではこのマッピングが適用されます（広告数が 5 つの場合のルールも設定されているため）。6 つ目以降の広告を挿入する場合、他の広告との間隔を 1000 ピクセル以上にする必要があります。

フィールド名 型 説明
adCount 数値 必須フィールドです。ルールの適用のきっかけとなるページ上の広告数（より適合するルールが他にないことが前提）。詳しくは、上記の説明をご覧ください。
spacing 文字列 このルールに合致する場合に adCount に基づいて適用される広告の最小間隔を指定する必須フィールド。値は単位のプレフィックス付きの数値で表されます。たとえば、「10px」は 10 ピクセルを、「0.5vp」はビューポートの半分の高さを表します。負の値は無効です。サポートされている単位は次のとおりです。
  • px - ピクセル
  • vp - ビューポートの高さの倍数

検証

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

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

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

Stack Overflow にアクセスする
バグや不足している機能がありますか？

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

GitHub にアクセスする