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>라는 특별한 맞춤 요소와 함께 로드됩니다. 광고 네트워크에서 제공하는 자바스크립트는 AMP 문서 내에서 실행할 수 없습니다. 대신 AMP 런타임에서는 AMP 문서로 iframe 샌드박스를 통해 다른 원본에서 iframe을 로드하고 그 iframe 샌드박스 내에서는 광고 네트워크의 JS를 실행합니다.

<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>로드 중 ...</div>
</amp-ad>

사용 가능한 광고 없음

슬롯에 사용할 수 있는 광고가 없으면 AMP에서 amp-ad 요소를 접으려고(즉, display: none으로 설정) 시도합니다. AMP에서는 사용자의 스크롤 위치에 영향을 주지 않고 이 작업을 실행할 수 있는지 확인합니다. 광고가 현재 표시 영역에 있으면 사용자의 스크롤 위치에 영향을 주기 때문에 광고가 접히지 않지만, 광고가 현재 표시 영역 외부에 있으면 접힙니다.

접지 못하는 경우 amp-ad 구성요소는 fallback 속성으로 하위 요소를 지원합니다. 대체 요소가 있는 경우 맞춤 대체 요소가 표시됩니다. 그렇지 않으면 AMP에서 기본 대체 동작을 적용합니다.

대체 동작의 예:

<amp-ad width=300 height=250 type="foo">
  <div fallback>광고 없음</div>
</amp-ad>

동영상 광고 게재

다음 3가지 방법으로 동영상 광고로 AMP에서 수익을 창출할 수 있습니다.

1. AMP에서는 기본적으로 BrightCove, DailyMotion 등 광고로 수익을 창출할 수 있는 여러 동영상 플레이어를 지원합니다. 전체 목록은 media 구성요소를 참조하세요.

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 파일과 동일한 원본에 있으면 안 됩니다. 예를 들어 www.example.com에 AMP 파일을 호스팅하는 경우 이 URL은 www.example.com에 있으면 안 되지만 something-else.example.com에 있는 것은 괜찮습니다. iframe에서 허용되는 원본에 대한 자세한 내용은 'Iframe 원본 정책'을 참조하세요.

보안

수신 데이터를 draw3p 함수에 전달하기 전에 수신 데이터의 유효성을 검사 하여 iframe에서 정상적인 작업만 실행하는지 확인합니다. 특히 맞춤 자바스크립트 삽입을 허용하는 광고 네트워크의 경우가 여기에 해당합니다.

또한 iframe은 iframe이 적용될 것으로 예상되는 원본에만 삽입되도록 시행해야 합니다. 원본은 다음과 같아야 합니다.

• 내 원본
• AMP 캐시의 https://cdn.ampproject.org

AMP 캐시의 경우 '소스 원본'(cdn.ampproject.org에서 제공한 문서의 원본)이 내 원본 중 하나인지도 확인해야 합니다.

원본 시행은 draw3p의 세 번째 인수와 함께 실행될 수 있으며 전체 브라우저 지원을 받으려면 allow-from 명령어를 사용해 추가로 실행되어야 합니다.

수신 광고 구성 향상

완전히 선택사항입니다. 광고 서버로 광고 요청을 하기 전에 광고 요청을 향상하는 것이 바람직한 경우가 있습니다.

광고 네트워크에서 빠른 가져오기를 지원하는 경우 RTC(Real Time Config)를 사용하세요. 예를 들어 DoubleClick과 애드센스 통합에서는 빠른 가져오기와 RTC를 모두 지원합니다.

광고 네트워크에서 지연된 가져오기를 사용하는 경우 remote.html 파일의 draw3p 함수 호출에 콜백을 전달할 수 있습니다. 콜백은 수신 구성을 첫 번째 인수로 받은 다음 다른 콜백을 두 번째 인수(아래 예에서 done이라고 불림)로 받습니다. 광고 렌더링을 진행하려면 업데이트된 구성으로 이 콜백을 호출해야 합니다.

예:

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  // 여기서 실제로 setTimeout을 설정하지는 마세요. 이는 예제로만 사용되어야 하지만
  // done 콜백을 비동기적으로 호출해도 괜찮습니다.
  setTimeout(function() {
    done(config);
  }, 100)
}, ['allowed-ad-type'], ['your-domain.com']);

스타일 지정

<amp-ad> 요소는 CSS position: fixed가 설정된 컨테이너(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
• 애드센스
• 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