워크스페이스 열기

구현 가이드

프리롤 동영상

Pre-roll video ads

사용자가 보기로 선택한 동영상 앞에 플레이어 안에서 재생되는 동영상 광고입니다.

  • Ad Manager
  • Ad Exchange
  • AdSense(Ad Manager 경유)
  • 비디오 플레이어 안(모바일 및 데스크톱)
데스크톱
휴대폰

1분 만에 이해하기

프리롤 동영상이란?

영화관에 가면 영화가 시작되기 전에 예고편과 광고가 나오죠? 프리롤 동영상이 바로 그것인데, 내 사이트에서 보여 주는 것입니다. 방문자가 동영상을 보려고 재생 버튼을 누르면 콘텐츠가 나오기 전에 같은 플레이어 안에서 광고가 재생됩니다. 플레이어는 재생, 일시중지, 볼륨 버튼이 있는 동영상 상자입니다. 광고가 끝나면 선택한 동영상이 시작됩니다.

이렇게 하려면 플레이어가 광고를 요청할 줄 알아야 합니다. Google은 플레이어와 함께 넣는 IMA SDK라는 코드 패키지를 제공합니다. IMA SDK는 광고 태그를 사용해 Ad Manager에 요청을 보냅니다. 광고 태그는 광고 단위와 플레이어 크기 같은 광고 공간 정보가 담긴 인터넷 주소입니다. 응답은 VAST라는 표준 형식으로 오는데, 어떤 동영상을 재생하고 조회수를 어떻게 셀지 알려 주는 레시피와 같습니다. 사이트에서 동영상 광고 규칙을 사용하면 응답이 VMAP으로 올 수도 있습니다. VMAP은 TV 편성표처럼 각 광고 시간이 언제 들어가는지 알려 줍니다.

Google은 동영상 자동 재생, 즉 오토플레이에 대해서도 중요한 점을 설명합니다. Chrome이나 Safari 같은 브라우저에는 각자의 규칙이 있어서, 소리를 끈 상태일 때만 동영상이 저절로 시작되는 경우가 많습니다. 브라우저가 허용하는지 간단히 물어볼 방법은 없고, 직접 재생해 보는 수밖에 없습니다. 그래서 IMA 가이드는 모바일에서 광고 컨테이너를 재생 버튼 탭 같은 사용자 동작으로 시작하라고 안내합니다. 또 플레이어가 자동으로 또는 소리 없이 시작할 경우에는 요청에 이를 알려서, 그런 방식으로 재생할 수 있는 광고만 오게 해야 합니다.

프리롤은 수업, 요리법, 동영상 뉴스처럼 동영상이 방문 이유일 때 적합합니다. Google 동영상 정책에서 이 슬롯은 인스트림이라고 하며, 사용자가 보기로 선택한 콘텐츠 안에 들어간다는 뜻입니다. 올바르게 선언해야 합니다. 항상 기억하세요. 사용자는 동영상을 보러 왔으므로 광고가 컨트롤을 방해하거나 콘텐츠를 멈추게 하면 안 됩니다.

단계별 설명

구현 방법

  1. 동영상 광고 단위 만들기Ad Manager에서 프리롤은 동영상 및 오디오 광고 단위를 사용합니다. 플레이어가 사용할 태그는 이 광고 단위에서 나옵니다.
  2. 광고 태그 생성인벤토리, 광고 단위로 이동해 광고 단위를 열고 태그를 클릭하세요. 동영상 및 오디오용 Google 게시자 태그를 선택하고 단계를 진행한 다음 태그를 복사합니다. 대괄호 안의 값은 요청 시점에 플레이어가 채워야 합니다.
  3. 페이지에 IMA SDK 넣기내 코드보다 먼저 IMA SDK 스크립트를 로드하세요. 광고를 위해 동영상 위에 컨테이너를 만들고, 광고를 표시하는 IMA 구성요소인 AdDisplayContainer로 이 컨테이너를 동영상에 연결하세요.
  4. 광고 요청태그로 AdsLoader와 AdsRequest를 만드세요. 선형 광고 슬롯의 너비와 높이를 알려 주세요. 광고가 여러 개 올 때 IMA가 알맞은 광고를 고르는 데 도움이 됩니다.
  5. 콘텐츠 일시중지 및 재개IMA가 일시중지를 요청하면(CONTENT_PAUSE_REQUESTED 이벤트) 동영상을 일시중지하세요. 재개를 요청하면(CONTENT_RESUME_REQUESTED) 다시 재생하세요. 오류가 나면 광고 관리자를 제거하고 광고 없이 동영상을 재생하세요.
  6. 사용자의 클릭에서 시작재생 버튼에서 광고 컨테이너를 초기화한 다음 AdsManager를 시작하세요. IMA 가이드에 따르면 모바일에서는 광고 컨테이너를 사용자 동작으로 시작해야 합니다.

구현 예시

코드와 화면에 보이는 모습

동영상 페이지에 넣습니다. 맨 위에 IMA 스크립트, 위에 광고 컨테이너가 있는 플레이어, 그리고 방문자가 보기를 클릭할 때 프리롤을 요청하는 코드가 필요합니다.
<!-- 1. Carrega o IMA SDK (antes do seu código) -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

<!-- 2. O vídeo e, por cima dele, a caixa do anúncio -->
<div style="position:relative;width:640px;height:360px">
  <video id="conteudo" width="640" height="360" playsinline controls>
    <source src="meu-video.mp4" type="video/mp4">
  </video>
  <div id="adContainer" style="position:absolute;top:0;left:0"></div>
</div>
<button id="playButton">Assistir</button>

<script>
  var video = document.getElementById('conteudo');
  var adDisplayContainer = new google.ima.AdDisplayContainer(
      document.getElementById('adContainer'), video);
  var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  var adsManager;

  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      function (e) {
        adsManager = e.getAdsManager(video);
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
            function () { video.pause(); });
        adsManager.addEventListener(
            google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
            function () { video.play(); });
        adsManager.addEventListener(
            google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
      });
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);

  function onAdError(e) {
    console.log(e.getError());
    if (adsManager) { adsManager.destroy(); }
    video.play(); // sem anúncio, o vídeo continua
  }

  // 3. Pedido do anúncio (IDs de exemplo)
  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
      'iu=/1234567/exemplo&sz=640x480&env=vp&gdfp_req=1&output=vast' +
      '&unviewed_position_start=1&vpa=click&vpmute=0&plcmt=1' +
      '&description_url=https%3A%2F%2Fwww.exemplo.com%2Fvideo&correlator=';
  adsRequest.linearAdSlotWidth = 640;
  adsRequest.linearAdSlotHeight = 400;
  adsLoader.requestAds(adsRequest);

  // 4. Só começa quando a pessoa clica em Assistir
  document.getElementById('playButton').addEventListener('click', function () {
    adDisplayContainer.initialize();
    try {
      adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
      adsManager.start();
    } catch (err) {
      video.play();
    }
  });
</script>
데스크톱광고는 콘텐츠가 시작되기 전에 동영상이 나올 바로 그 자리, 즉 플레이어 안에서 재생됩니다. 광고가 끝나면 선택한 동영상이 시작됩니다.
모바일이것도 플레이어 안에 표시되며, 보통 방문자가 재생을 탭한 뒤에 나타납니다. iPhone에서는 전체 화면 플레이어가 아니라 페이지 안에서 재생되도록 동영상에 playsinline 속성이 필요합니다.

Google의 안내

허용 및 금지 사항

허용

  • Google이 인스트림 슬롯에 요구하는 도구 중 하나인 IMA SDK를 사용해 플레이어 안에서 사용자가 선택한 동영상 앞에 광고를 재생하는 것.
  • 모바일에 대한 IMA 가이드의 권장대로, 방문자가 재생 버튼을 클릭할 때 광고를 시작하기.
  • 플레이어가 요청에서 자동 재생이며 음소거 여부를 알려 준다면 소리 없는 경우를 포함해 오토플레이 사용하기.
  • Google 예시처럼 광고에 오류가 나면 동영상을 정상적으로 재생하기.

허용 안 됨

  • 잘못된 슬롯을 선언하면 안 됩니다. 동영상이 있는 플레이어의 광고는 인스트림 또는 컴패니언 콘텐츠(메인 콘텐츠와 함께 나오는 동영상)로 선언해야 합니다.
  • 광고와 동영상의 컨트롤을 가리거나 숨기거나 작동하지 않게 하면 안 됩니다.
  • 소리가 나는 동영상이 동시에 둘 이상 자동 재생되면 안 되며, 화면에 보이는 플레이어가 둘 이상 자동 재생되어도 안 됩니다.
  • 광고 공간의 50% 이상이 보이기 전에는 광고가 자동으로 시작되면 안 됩니다.
  • IMA 제품을 YouTube 동영상으로 수익을 내는 데 사용하면 안 됩니다.

팁

올바르게 하는 방법

주의

흔한 오류

컴퓨터에서 파일을 바로 열기

IMA 가이드는 로컬이더라도 웹 서버로 페이지를 제공하라고 안내합니다. HTML 파일을 바로 열면 테스트가 실패할 수 있습니다.

모바일에서 사용자 동작 없이 시작하기

모바일에서는 재생 탭 같은 사용자 동작으로 광고 컨테이너를 시작해야 합니다. 그렇지 않으면 광고가 재생되지 않을 수 있습니다.

광고 오류를 처리하지 않기

문제가 있는 VAST 응답은 오류를 일으킬 수 있습니다. Google 예시는 광고 관리자를 제거하고 동영상을 재생해서 방문자가 멈춘 화면에 갇히지 않게 합니다.

크기 조정을 잊기

창 크기가 바뀌면 Google 예시는 동영상 크기로 AdsManager의 크기 조정을 호출합니다. 이렇게 하지 않으면 광고 크기가 잘못될 수 있습니다.

자주 묻는 질문

프리롤을 쓰려면 광고 규칙이 필요한가요?

아니요. 플레이어는 IMA로 VAST 태그를 요청할 수 있습니다. Google에 따르면 광고 규칙 매개변수(ad_rule)는 광고를 게재하는 데 필수가 아니며, 동영상 광고 규칙을 쓸 때만 필요합니다.

VAST와 VMAP은 무엇이 다른가요?

VAST는 어떤 광고를 재생할지 알려 주는 응답입니다. VMAP은 광고 규칙과 함께 쓰는 응답으로, 광고 시간이 언제 들어갈지 알려 줍니다. 태그는 output 매개변수의 vast, vmap 같은 값으로 형식을 선택합니다.

프리롤은 자동으로 재생될 수 있나요?

브라우저가 허용하면 가능합니다. Chrome과 Safari는 특히 소리가 있는 자동 재생을 제한합니다. 플레이어는 직접 시험해 보고, 자동으로 또는 소리 없이 재생할 경우 요청에 알리며, 모바일에서는 사용자 동작으로 광고를 시작해야 합니다.

광고가 로드되지 않으면 어떻게 되나요?

Google 가이드는 광고가 로드되지 않아도 동영상이 계속 재생되도록 요구합니다. 예시에서는 광고 관리자를 제거하고 동영상을 광고 없이 재생합니다.

자료실

Google 공식 출처

이 페이지의 모든 내용은 Google 공식 문서를 따릅니다. 원문에서 바로 읽어 보세요.

내 사이트가 이 형식을 올바르게 쓰고 있나요?

감사는 사이트를 방문자처럼 읽고, 아무것도 클릭하지 않으며, 무엇을 고쳐야 하는지 알려 줍니다.

감사 실행하기