본문 바로가기
AMP JS

광고 애널리틱스-amp-ad / amp-embed

by 로마리우 2018. 9. 16.

기술광고를 표시하는 컨테이너입니다. 는 amp-embed받는 사람의 별칭입니다 amp-ad다른 태그 이름의 모든 기능을 유도, 태그입니다. amp-embed의미 상 더 정확할 때 사용하십시오 . AMP 문서는 HTTPS를 통해 게재되는 광고 / 포함을 지원합니다.
필수 스크립트<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
참고 :이 스크립트가 없으면 amp-ad는 계속 작동 할 수 있지만 향후 호환성을 위해 적극 권장합니다.
지원되는 레이아웃채우기, 고정, 고정 높이, 플렉스 아이템, 내장, 노드 표시, 반응 형
예제들AMP By Example의 amp-ad 예제를 참조하십시오 .

행동

광고는 AMP 문서의 다른 모든 리소스처럼로드되며 특수 맞춤 요소가 호출 <amp-ad>됩니다. 광고 네트워크 제공 JavaScript는 AMP 문서 내에서 실행할 수 없습니다. 대신 AMP 런타임은 AMP 문서로 iframe 샌드 박스를 통해 다른 원본에서 iframe을로드하고 해당 iframe 샌드 박스 내에서 광고 네트워크의 JS를 실행합니다.

가 <amp-ad>받는 따른 지정하는 너비와 높이 값을 요구 룰 레이아웃 유형. type표시 할 광고 네트워크를 선택 하는 인수가 필요합니다 . data-*태그의 모든 속성은 결국 광고를 렌더링하는 코드에 자동으로 인수로 전달됩니다. 어떤 data-속성 네트워크의 특정 유형에 따라 필요하며 광고 네트워크로 문서화되어야한다.

예 : 몇 개의 광고 표시

속성

유형 (필수)

광고 네트워크 의 식별자를 지정합니다 . type속성은 광고 태그에 사용하는 템플릿을 선택합니다.

src (선택 사항)

지정된 광고 네트워크에 스크립트 태그를로드하려면이 속성을 사용하십시오. 이 코드는 페이지에 정확히 하나의 스크립트 태그를 삽입해야하는 광고 네트워크에 사용할 수 있습니다. src값은 지정된 광고 네트워크에 흰색 나열된 접두사를해야하며, 값은 사용해야합니다 https프로토콜.

데이터 - 푸 - 바

대부분의 광고 네트워크는 HTML data-속성 을 사용하여 네트워크로 전달할 수있는 추가 구성이 필요 합니다. 매개 변수 이름은 표준 데이터 속성 대시에서 낙타로 변환됩니다. 예를 들어, "data-foo-bar"는 "fooBar"로 구성 설정을 위해 광고로 전송됩니다. 속성을 사용할 수있는 광고 네트워크 설명서를 참조하십시오 .

그 데이터 foo는 바

에서 시작하는 속성 data-vars-은 amp-analyticsvars를 위해 예약되어 있습니다.

json (선택 사항)

임의로 복잡한 JSON 객체로 광고에 구성을 전달하려면이 속성을 사용하십시오. 객체는 이름에 대해 수행 된 맹 글링없이 그대로 광고로 전달됩니다.

제공되는 경우 사용자 의 'AMP 클라이언트 ID'(쿠키와 유사)가 광고에 전달 될 때까지 지정된 HTML-ID로 amp-user-notification 을 확인해야합니다 . 즉, 사용자가 알림을 확인할 때까지 광고 렌더링이 지연됩니다.

데이터 로딩 전략 (선택 사항)

광고가 현재 뷰포트에서 지정된 개수의 뷰포트 내에있을 때 광고로드를 시작하도록 광고에 지시합니다. [0, 3] 범위의 부동 소수점 값을 지정해야합니다. 기본적으로 값은 3입니다. 낮은 값을 사용하면 조회 가능성이 높아 지지만 (예 :로드 된 광고가 표시 될 확률이 높아짐) 노출 수가 적을 위험이 있습니다 (즉, 광고로드가 적음). ). 속성을 지정했지만 값을 공백으로 남겨두면 시스템은 float 값을 할당합니다.이 값은 노출 수에 큰 영향을 미치지 않으면 서 조회 가능성을 위해 최적화됩니다. prefer-viewability-over-views값을 지정 하면 조회 가능성이 자동으로 최적화됩니다.

data-ad-container-id (선택 사항)

접기를 시도한 경우 컨테이너 구성 요소 ID의 광고에 알립니다. 컨테이너 구성 요소는 <amp-layout>광고의 상위 요소 여야합니다 . 를 data-ad-container-id지정하고 해당 <amp-layout>컨테이너 구성 요소를 찾으면 AMP 런타임은 채우기가없는 동안 광고 구성 요소 대신 컨테이너 구성 요소를 축소하려고 시도합니다. 이 기능은 광고 표시기가있을 때 유용 할 수 있습니다.

공통 속성

이 요소에는 AMP 구성 요소로 확장 된 공통 속성 이 포함됩니다 .

자리 표시 자

선택적으로, 속성을 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">

contentmeta 태그 의 속성은 웹 서버의 remote.html 파일 사본에 대한 절대 URL입니다. 이 URL은 "https"스키마를 사용해야합니다. 그것은 당신의 AMP 파일과 같은 기원에 상주 할 수 없습니다. 당신이에 AMP 파일을 호스팅하는 경우 예를 들어 www.example.com, URL을에해서는 안 www.example.com하지만 something-else.example.comOK입니다. iframe의 허용 된 출처에 대한 자세한 내용 은 "Iframe 오리진 정책" 을 참조하십시오 .

보안

draw3p함수 에 전달하기 전에 들어오는 데이터의 유효성을 검사 하여 iframe이 예상 한 작업 만 수행하는지 확인하십시오. 맞춤 자바 스크립트 삽입을 허용하는 광고 네트워크의 경우 특히 그렇습니다.

Iframes는 또한 iframe으로 예상되는 기원으로 iframe을 적용해야한다고 강요해야합니다. 기원은 다음과 같습니다.

  • 너의 자신의 기원
  • https://cdn.ampproject.org AMP 캐시 용

AMP 캐시의 경우 "원본 출처"(cdn.ampproject.org에서 제공 한 문서 원본)가 원본 중 하나인지 확인해야합니다.

원천 집행은 3 번째 인자로 할 수 있으며 , 전체 브라우저 지원을 위해 allow-from 지시어를 draw3p사용하여 추가로 수행해야합니다 .

수신 광고 구성 향상

이것은 완전히 선택 사항입니다. 광고 요청을 광고 서버에 제출하기 전에 광고 요청을 강화하는 것이 때때로 필요합니다.

광고 네트워크가 빠른 가져 오기를 지원하는 경우 실시간 구성 (RTC)을 사용하십시오. (예 : DoubleClick 및 애드 센스 통합은 빠른 가져 오기와 RTC를 모두 지원함)

광고 네트워크에서 지연된 가져 오기를 사용하는 draw3p경우 remote.html 파일 의 함수 호출에 콜백을 전달할 수 있습니다 . 콜백은 들어오는 구성을 첫 번째 인수로받은 다음 두 번째 인수로 다른 콜백을 수신합니다 ( 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']);

스타일링

<amp-ad>요소는 CSS position: fixed세트 가있는 컨테이너에 포함되거나 배치되지 않을 수 있습니다 (예외는 제외 amp-lightbox). 이는 전체 페이지 오버레이 광고가 UX에 미치는 영향 때문입니다. 나중에 특정 UX 불변량을 유지하는 AMP 제어 컨테이너 내부에서 유사한 광고 형식을 허용하는 것으로 간주 될 수 있습니다.

확인

AMP 검사기 사양에서 amp-ad 규칙 을 참조하십시오 .

지원되는 광고 네트워크

지원되는 삽입 유형


저작자표시 (새창열림)

'AMP JS' 카테고리의 다른 글

광고 애널리틱스 - amp-experiment 실험  (0) 2018.09.16
광고 애널리틱스 - amp-call-tracking 암호 추적  (0) 2018.09.16
광고 애널리틱스 - amp-auto-ads 자동광고  (0) 2018.09.16
광고 애널리틱스-amp-analytics  (0) 2018.09.16
광고 애널리틱스-amp-ad-exit  (0) 2018.09.16

관련글

댓글

티스토리툴바