AMP

amp-ad

Description

광고를 표시하는 컨테이너입니다.

 

Required Scripts

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

광고를 표시하는 컨테이너입니다. amp-embedamp-ad 태그의 별칭이며 다양한 태그 이름으로 모든 기능이 파생됩니다. 의미상 더 정확한 경우 amp-embed를 사용하세요. AMP 문서는 HTTPS를 통해 게재되는 광고/삽입만 지원합니다.

amp-ad / amp-embed

amp-ad/amp-embed 사양은 시간이 지남에 따라 크게 개선될 가능성이 높습니다. 현재 접근 방식은 형식을 부트스트랩하여 광고를 게재할 수 있도록 설계되었습니다.

설명 광고를 표시하는 컨테이너입니다. amp-embedamp-ad 태그의 별칭이며 다양한 태그 이름으로 모든 기능이 파생됩니다. 의미상 더 정확한 경우 amp-embed를 사용하세요. AMP 문서는 HTTPS를 통해 게재되는 광고/삽입만 지원합니다.
필수 스크립트 <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"><
참고: amp-ad는 이 스크립트가 없어도 작동할 수 있지만 향후 호환성을 위해 사용하는 것이 좋습니다.
지원되는 레이아웃 fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
AMP By Example의 amp-ad 예를 참조하세요.

동작

광고는 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>
이 코드 조각을 Playground에서 열기

속성

type(필수) 광고 네트워크의 식별자를 지정합니다. type 속성은 광고 태그에 사용할 템플릿을 선택합니다.
src(선택사항) 이 속성을 사용해 지정된 광고 네트워크의 스크립트 태그를 로드합니다. 이 속성은 페이지에 정확히 1개의 스크립트 태그를 삽입해야 하는 광고 네트워크에 사용할 수 있습니다. src 값에는 지정된 광고 네트워크에서 허용되는 접두사가 있어야 하며 값은 https 프로토콜을 사용해야 합니다.
data-foo-bar 대부분의 광고 네트워크에는 HTML data- 속성을 사용해 네트워크에 전달될 수 있는 추가 구성이 필요합니다. 매개변수 이름의 표준 데이터 속성 대시는 카멜식 대소문자로 변환됩니다. 예를 들어 'data-foo-bar'는 구성을 위해 'fooBar'로 광고에 전송됩니다. 사용할 수 있는 속성은 광고 네트워크 문서를 참조하세요.
data-vars-foo-bar data-vars-로 시작하는 속성은 amp-analytics vars 전용입니다.
json(선택사항) 이 속성을 사용해 구성을 임의의 복잡한 JSON 개체로 광고에 전달합니다. 개체는 이름이 변경되지 않고 그대로 광고에 전달됩니다.
data-consent-notification-id(선택사항) 제공되는 경우 쿠키와 마찬가지로 사용자의 '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-adplaceholder 속성으로 하위 요소를 지원합니다. 광고 네트워크에서 지원하는 경우 게재할 수 있는 광고가 없으면 이 요소가 표시됩니다. 자리표시자 및 대체 동작에서 자세히 알아보세요.

<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 규칙을 참조하세요.

지원되는 광고 네트워크

지원되는 삽입 유형

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

Stack Overflow로 이동
버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub로 이동하기