AMPドキュメント

広告のAMP専用タグ

広告をカスタマイズして表示

説明

広告をカスタマイズして表示

使い方

<amp-ad-custom 属性>
</amp-ad-custom>

必要なスクリプト

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

属性

属性名 説明
width 横幅
height 高さ
src URLやパス
layout レイアウト
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

基本的な使い方

<amp-ad-custom
  width=300
  height=250
  src="/adzerk/1">
</amp-ad-custom>

レイアウト

<amp-ad-custom
  width=auto
  height=250
  layout="fixed-height"
  src="/adzerk/1">
</amp-ad-custom>

広告内の他の要素に終了を指定

説明

広告内の他の要素に終了を指定

使い方

<amp-ad-exit id="アクション名">
  <script type="application/json">
    {
      フィルターの設定
    }
  </amp-ad-exit>
</amp-ad-exit>

必要なスクリプト

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

フィルター

フィルター名 説明
clickLocation 縁からの最小距離
clickDelay クリックに応答する前に待機する時間
inactiveElement 終了が発生しない

clickLocationのフィルター

フィルター名 説明
top 上端からの距離(px)
right 右端からの距離(px)
bottom 下端からの距離(px)
left 左端からの距離(px)
relativeTo 境界に使用する要素

clickDelayのフィルター

フィルター名 説明
delay ビューポートに入ってからクリックを拒否するまでの時間
startTimingEvent 遅延開始間隔として使用するイベントの名前

inactiveElementのフィルター

フィルター名 説明
selector CSSセレクター

アクション

アクション名 説明
target ターゲット
[a-zA-Z0-9-]+ URLパラメータをこの名前と値に置き換えて、最終URLと追跡URL

レイアウト

レイアウト名 説明
container 子要素に応じて自動的にサイズ調整
nodisplay 要素が非表示

基本的な使い方

<amp-ad-exit id="exit-api">
  <script type="application/json">
    {
      "targets": {
        "landingPage": {
          "finalUrl": "https://example.com/artisan-baking/?from=_clickArea",
          "vars": {
            "_clickArea": {
              "defaultValue": "headline"
            }
          }
        },
        "flour": {
          "finalUrl": "https://adclickserver.example.com/click?id=af319adec901&x=CLICK_X&y=CLICK_Y&adurl=https://example.com/artisan-baking/flour",
          "filters": ["3sClick", "borderProtection"],
          "behaviors": {
            "clickTarget": "_top"
          }
        },
        "bannetons": {
          "finalUrl": "https://example.com/artisan-baking/bannetons",
          "trackingUrls": [
            "https://adclickserver.example.com/click?id=af319adec901&x=CLICK_X&y=CLICK_Y",
            "https://tracker.adnetwork.example.com/?url=example.com"
          ],
          "filters": ["3sClick", "borderProtection"]
        }
      },
      "filters": {
        "3sClick": {
          "type": "clickDelay",
          "delay": 3000
        },
        "borderProtection": {
          "type": "clickLocation",
          "top": 10,
          "right": 10,
          "bottom": 10,
          "left": 10
        }
      }
    }
  </script>
</amp-ad-exit>
<h1 on="tap:exit-api.exit(target='landingPage')">Artisan Baking Supplies</h1>
<div id="product0" on="tap:exit-api.exit(target='flour')">
  <p>Rye flour</p>
  <amp-img src="..." width="..." height="..."></amp-img>
</div>
<div id="product1" on="tap:exit-api.exit(target='bannetons')">
  <p>Bannetons</p>
  <amp-img src="..." width="..." height="..."></amp-img>
</div>
<div id="footer" on="tap:exit-api.exit(target='landingPage', _clickArea='footer')">
  example.com/artisan-baking
</div>

フィルタ

<amp-ad-exit id="exit-api">
<script type="application/json">
  {
    "targets": {
      "ad": {
      "finalUrl": "...",
      "filters": ["2second", "huge-border"]
      }
    },
    "filters": {
      "2second": {
        "type": "clickDelay",
        "delay": 2000
      },
      "small-border": {
        "type": "clickLocation",
        "top": 5,
        "right": 5,
        "bottom": 5,
        "left": 5
      },
      "huge-border": {
        "type": "clickLocation",
        "top": 100,
        "right": 100,
        "bottom": 100,
        "left": 100
      },
      "border-with-relative-to-element": {
        "type": "clickLocation",
        "top": 10,
        "right": 10,
        "bottom": 10,
        "left": 10,
        "relativeTo": "#headline"
      }
    }
  }
</script>
</amp-ad-exit>

広告を表示

説明

広告を表示
amp-embedの別名

使い方

<amp-ad 属性>
</amp-ad>

必要なスクリプト

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

属性

属性名 説明
type(必須) 広告の種類
src 広告のスクリプトタグ
data-* 広告ごとの詳細設定
json JSON 形式のオプションが必要な場合
data-consent-notification-id 通知関連
data-loading-strategy 別の要素の広告に対して読み込みを開始するよう指示
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

広告の種類

  • 1wo
  • 24smi
  • a8
  • a9
  • accesstrade
  • adagio
  • adblade
  • adbutler
  • adform
  • adfox
  • adgeneration
  • adglare
  • adhese
  • adincube
  • adition
  • adman
  • admanmedia
  • admixer
  • adocean
  • adop
  • adpicker
  • adplugg
  • adpon
  • adreactor
  • adsensor
  • adservsolutions
  • adsloom
  • adsnative
  • adspeed
  • adspirit
  • adstir
  • adstyle
  • adtech
  • adthrive
  • adunity
  • aduptech
  • adventive
  • adverline
  • adverticum
  • advertserve
  • adyoulike
  • affiliateb
  • aja
  • amoad
  • aniview
  • appnexus
  • appvador
  • atomx
  • baidu
  • beaverads
  • bidtellect
  • blade
  • brainy
  • bringhub
  • broadstreetads
  • byplay
  • caajainfeed
  • capirs
  • caprofitx
  • cedato
  • colombia
  • conative
  • connatix
  • contentad
  • criteo
  • dable
  • dianomi
  • directadvert
  • distroscale
  • dotandads
  • dynad
  • eadv
  • eas
  • empower
  • engageya
  • epeex
  • eplanning
  • ezoic
  • f1e
  • f1h
  • felmat
  • flite
  • fluct
  • forkmedia
  • freewheel
  • fusion
  • genieessp
  • giraff
  • gmossp
  • gumgum
  • holder
  • ibillboard
  • idealmedia
  • imedia
  • imobile
  • imonomy
  • improvedigital
  • industrybrains
  • inmobi
  • innity
  • insticator
  • invibes
  • ix
  • jubna
  • kargo
  • kiosked
  • kixer
  • kuadio
  • lentainform
  • ligatus
  • lockerdome
  • logly
  • loka
  • mads
  • mantis
  • medianet
  • mediavine
  • medyanet
  • meg
  • mgid
  • microad
  • miximedia
  • mixpo
  • monetizer101
  • mox
  • mytarget
  • mywidget
  • nativeroll
  • nativery
  • nativo
  • navegg
  • nend
  • netletix
  • noddus
  • nokta
  • nws
  • onead
  • onnetwork
  • openadstream
  • openx
  • opinary
  • outbrain
  • pixels
  • plista
  • polymorphicads
  • popin
  • postquare
  • pressboard
  • promoteiq
  • pubexchange
  • pubguru
  • pubmatic
  • pubmine
  • puffnetwork
  • pulsepoint
  • purch
  • quoraad
  • rbinfox
  • readmo
  • realclick
  • recomad
  • relap
  • revcontent
  • revjet
  • rfp
  • rnetplus
  • rubicon
  • runative
  • sas
  • seedingalliance
  • sekindo
  • sharethrough
  • shemedia
  • sklik
  • slimcutmedia
  • smartadserver
  • smartclip
  • smi2
  • smilewanted
  • sogouad
  • sortable
  • sovrn
  • speakol
  • spotx
  • springAds
  • ssp
  • strossle
  • sulvo
  • sunmedia
  • svknative
  • swoop
  • taboola
  • tcsemotion
  • teads
  • temedya
  • torimochi
  • tracdelight
  • triplelift
  • trugaze
  • uas
  • ucfunnel
  • unruly
  • uzou
  • valuecommerce
  • vdoai
  • videointelligence
  • videonow
  • viralize
  • vmfive
  • webediads
  • weborama
  • whopainfeed
  • widespace
  • wisteria
  • wpmedia
  • xlift
  • yahoo
  • yahoojp
  • yahoonativeads
  • yandex
  • yengo
  • yieldbot
  • yieldmo
  • yieldone
  • yieldpro
  • zedo
  • zen
  • zergnet
  • zucks

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

AdSense

<amp-ad
  width="100vw"
  height="320"
  type="adsense"
  data-ad-client="ca-pub-2005682797531342"
  data-ad-slot="7046626912"
  data-auto-format="rspv"
  data-full-width>
  <div overflow></div>
</amp-ad>

Yahoo JP

<amp-ad
  width="320"
  height="50"
  type="yahoojp"
  data-yadsid="79712_113431">
</amp-ad>

カスタム

<amp-ad
  width=300
  height=250
  type="custom"
  data-url="https://foobar.com"
  template="template-1">
</amp-ad>

広告を動的に表示

説明

広告を動的に表示

使い方

<amp-auto-ads 属性>
</amp-auto-ads>

必要なスクリプト

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

属性

属性名 説明
type(必須) 広告名(adsenseとdoubleclickのみ)
data-* 広告の詳細設定
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

設定

{
  Configオブジェクト,
}

Config オブジェクトの属性

属性名 説明
placements(必須) 広告の設置場所
attributes amp-ad要素に適用する属性値へのマッピングを指定
adConstraints ページ上に広告を掲載する場合に使用する必要がある制約を指定

placements の属性

属性名 説明
anchor(必須) 要素の検索に使用する情報
pos(必須) 相対的な位置
type(必須) タイプ
style スタイル
attributes amp-ad要素に適用する属性値へのマッピングを指定

anchor の属性

属性名 説明
selector(必須) CSSセレクタ
index インデックス
all 選択されたすべての要素を含める必要があるか
min_c 最小の長さ
sub 任意の要素内で要素を選択

style の属性

属性名 説明
top_m 上余白(px)
bot_m 下余白(px)

pos の値

説明
1 直前
2 最初の子要素
3 最後の子要素
4 直後

tupe の値

説明
1 バナー広告の位置

adConstraints の属性

属性名 説明
initialMinSpacing(必須) 既存の広告との最短距離
subsequentMinSpacing 広告の間隔
maxAdCount 広告の最大数

subsequentMinSpacing の属性

属性名 説明
adCount(必須) 広告数
spacing(必須) 広告の最小間隔

タグ

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

設定

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

広告を表示

説明

広告を表示
amp-adの別名
amp-adを推奨

使い方

<amp-embed 属性>
</amp-embed>

必要なスクリプト

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

属性

属性名 説明
type(必須) 広告の種類
src 広告のスクリプトタグ
data-* 広告ごとの詳細設定
json JSON形式のオプションが必要な場合
data-consent-notification-id 通知関連
data-loading-strategy 別の要素の広告に対して読み込みを開始するよう指示
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

広告の種類

  • 1wo
  • 24smi
  • a8
  • a9
  • accesstrade
  • adagio
  • adblade
  • adbutler
  • adform
  • adfox
  • adgeneration
  • adglare
  • adhese
  • adincube
  • adition
  • adman
  • admanmedia
  • admixer
  • adocean
  • adop
  • adpicker
  • adplugg
  • adpon
  • adreactor
  • adsensor
  • adservsolutions
  • adsloom
  • adsnative
  • adspeed
  • adspirit
  • adstir
  • adstyle
  • adtech
  • adthrive
  • adunity
  • aduptech
  • adventive
  • adverline
  • adverticum
  • advertserve
  • adyoulike
  • affiliateb
  • aja
  • amoad
  • aniview
  • appnexus
  • appvador
  • atomx
  • baidu
  • beaverads
  • bidtellect
  • blade
  • brainy
  • bringhub
  • broadstreetads
  • byplay
  • caajainfeed
  • capirs
  • caprofitx
  • cedato
  • colombia
  • conative
  • connatix
  • contentad
  • criteo
  • dable
  • dianomi
  • directadvert
  • distroscale
  • dotandads
  • dynad
  • eadv
  • eas
  • empower
  • engageya
  • epeex
  • eplanning
  • ezoic
  • f1e
  • f1h
  • felmat
  • flite
  • fluct
  • forkmedia
  • freewheel
  • fusion
  • genieessp
  • giraff
  • gmossp
  • gumgum
  • holder
  • ibillboard
  • idealmedia
  • imedia
  • imobile
  • imonomy
  • improvedigital
  • industrybrains
  • inmobi
  • innity
  • insticator
  • invibes
  • ix
  • jubna
  • kargo
  • kiosked
  • kixer
  • kuadio
  • lentainform
  • ligatus
  • lockerdome
  • logly
  • loka
  • mads
  • mantis
  • medianet
  • mediavine
  • medyanet
  • meg
  • mgid
  • microad
  • miximedia
  • mixpo
  • monetizer101
  • mox
  • mytarget
  • mywidget
  • nativeroll
  • nativery
  • nativo
  • navegg
  • nend
  • netletix
  • noddus
  • nokta
  • nws
  • onead
  • onnetwork
  • openadstream
  • openx
  • opinary
  • outbrain
  • pixels
  • plista
  • polymorphicads
  • popin
  • postquare
  • pressboard
  • promoteiq
  • pubexchange
  • pubguru
  • pubmatic
  • pubmine
  • puffnetwork
  • pulsepoint
  • purch
  • quoraad
  • rbinfox
  • readmo
  • realclick
  • recomad
  • relap
  • revcontent
  • revjet
  • rfp
  • rnetplus
  • rubicon
  • runative
  • sas
  • seedingalliance
  • sekindo
  • sharethrough
  • shemedia
  • sklik
  • slimcutmedia
  • smartadserver
  • smartclip
  • smi2
  • smilewanted
  • sogouad
  • sortable
  • sovrn
  • speakol
  • spotx
  • springAds
  • ssp
  • strossle
  • sulvo
  • sunmedia
  • svknative
  • swoop
  • taboola
  • tcsemotion
  • teads
  • temedya
  • torimochi
  • tracdelight
  • triplelift
  • trugaze
  • uas
  • ucfunnel
  • unruly
  • uzou
  • valuecommerce
  • vdoai
  • videointelligence
  • videonow
  • viralize
  • vmfive
  • webediads
  • weborama
  • whopainfeed
  • widespace
  • wisteria
  • wpmedia
  • xlift
  • yahoo
  • yahoojp
  • yahoonativeads
  • yandex
  • yengo
  • yieldbot
  • yieldmo
  • yieldone
  • yieldpro
  • zedo
  • zen
  • zergnet
  • zucks

レイアウト

レイアウト名 説明
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

AdSense

<amp-embed
  width="100vw"
  height="320"
  type="adsense"
  data-ad-client="ca-pub-2005682797531342"
  data-ad-slot="7046626912"
  data-auto-format="rspv"
  data-full-width>
  <div overflow></div>
</amp-embed>

Yahoo JP

<amp-embed
  width="320"
  height="50"
  type="yahoojp"
  data-yadsid="79712_113431">
</amp-embed>

カスタム

<amp-embed
  width=300
  height=250
  type="custom"
  data-url="https://foobar.com"
  template="template-1">
</amp-embed>

画面下部に常時表示される広告を表示

説明

画面下部に常時表示される広告を表示

使い方

<amp-sticky-ad 属性>
</amp-sticky-ad>

必要なスクリプト

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

属性

属性名 説明
layout(必須) レイアウト
fallback フォールバック。対象の要素にブラウザが未対応や読み込みに失敗などをユーザに伝えるもの
heights メディア式に基づいた要素の縦サイズ
layout レイアウト
media メディア属性
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF
on イベントの実行用
placeholder 親要素のプレスホルダー(アニメーションや画像などで読み込まれる前に表示されるやつ)
sizes メディア式に基づいた要素の横サイズ
width 横幅
height 高さ

レイアウト

レイアウト名 説明
nodisplay 要素が非表示

ルール

  • amp-sticky-adは最大で1つ
  • amp-sticky-adは、直接の子要素に1つのamp-adが必須
  • 広告はページの下部に表示
  • 広告の高さは100px以下
  • amp-sticky-adの横幅は100%
  • amp-sticky-adの不透明度は1
  • amp-sticky-adの背景色は不透明
  • 広告はビューポート1つ分をスクロールした後に表示
  • 広告は一番下までスクロールしたら非表示
  • 横長モードの場合に広告は中央揃え
  • 広告がない場合は表示されない

基本的な使い方

<amp-sticky-ad layout=nodisplay>
  <amp-ad
    width=300
    height=250
    type="a9"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
  </amp-ad>
</amp-sticky-ad>

ストーリーに広告を動的に表示

説明

ストーリーに広告を動的に表示

使い方

<amp-story>
  <amp-story-auto-ads>
    <script type="application/json">
      {
        設定
      }
    </script>
  </amp-story-auto-ads>
</amp-story>

必要なスクリプト

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

トリガー

トリガー名 説明
story-ad-request 広告がリクエスト
story-ad-load 広告がロード
story-ad-insert 広告が挿入
story-ad-view 広告が表示
story-ad-click 広告のCTAボタンがクリッ
story-ad-exit ユーザーが広告を見ることをやめる
story-ad-discard 設定が無効なため、広告は破棄

変数

変数名 説明
adIndex トリガーを生成する広告のインデックス
adUniqueId ID
requestTime 広告がリクエストされたときのタイムスタンプ
loadTime 広告がINI_LOAD信号を発信するときのタイムスタンプ
insertTime 広告がストーリーに挿入されたときのタイムスタンプ
viewTime 広告ページがアクティブページになったときのタイムスタンプ
clickTime 広告がクリックされたときのタイムスタンプ
exitTime 広告ページがアクティブ・非アクティブから移動したときのタイムスタンプ
discardTime 不正なメタデータなどにより広告が破棄されたときのタイムスタンプ
position 親ストーリー内の位置
ctaType 挿入された広告のCTAタイプを指定

基本的な使い方

<amp-story-auto-ads>
  <script type="application/json">
    {
        "ad-attributes": {
          "type": "custom",
          "data-url": "./amp-story-auto-ads-payload.json"
        }
    }
  </script>
  <template type="amp-mustache" id="template-1">
    <amp-img class="fill-img" layout="fill" src=""></amp-img>
  </template>
</amp-story-auto-ads>

広告について

広告について

今までのWebページ(非AMPページ)では、JavaScriptのコードをページに追加して広告の表示をしていた。
AMPページではパフォーマンスとセキュリティ上の理由から専用のタグを使って広告を表示する。

簡単な手順

ここでは例として、a9ネットワークの広告を追加する時の手順

amp-adスクリプトを追加

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

amp-adタグを追加

<amp-ad type="a9">
</amp-ad>

サイズを追加

<amp-ad
  width="300"
  height="250"
  type="a9">
</amp-ad>

広告ごとに必要なパラメータを追加

<amp-ad
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302"
  type="a9"
  width="300"
  height="250">
</amp-ad>

プレースホルダを指定(省略可)

<amp-ad type="a9" width="300" height="250" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302">
  <amp-img
    placeholder
    src="placeholder-image.jpg">
  </amp-img>
</amp-ad>

フォールバックを指定(省略可)

<amp-ad type="a9" width="300" height="250" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302">
  <amp-img fallback src="fallback-image.jpg"></amp-img>
</amp-ad>