컴퓨터에서 파일을 바로 열기
IMA 가이드는 로컬이더라도 웹 서버로 페이지를 제공하라고 안내합니다. HTML 파일을 바로 열면 테스트가 실패할 수 있습니다.
1분 만에 이해하기
영화관에 가면 영화가 시작되기 전에 예고편과 광고가 나오죠? 프리롤 동영상이 바로 그것인데, 내 사이트에서 보여 주는 것입니다. 방문자가 동영상을 보려고 재생 버튼을 누르면 콘텐츠가 나오기 전에 같은 플레이어 안에서 광고가 재생됩니다. 플레이어는 재생, 일시중지, 볼륨 버튼이 있는 동영상 상자입니다. 광고가 끝나면 선택한 동영상이 시작됩니다.
이렇게 하려면 플레이어가 광고를 요청할 줄 알아야 합니다. Google은 플레이어와 함께 넣는 IMA SDK라는 코드 패키지를 제공합니다. IMA SDK는 광고 태그를 사용해 Ad Manager에 요청을 보냅니다. 광고 태그는 광고 단위와 플레이어 크기 같은 광고 공간 정보가 담긴 인터넷 주소입니다. 응답은 VAST라는 표준 형식으로 오는데, 어떤 동영상을 재생하고 조회수를 어떻게 셀지 알려 주는 레시피와 같습니다. 사이트에서 동영상 광고 규칙을 사용하면 응답이 VMAP으로 올 수도 있습니다. VMAP은 TV 편성표처럼 각 광고 시간이 언제 들어가는지 알려 줍니다.
Google은 동영상 자동 재생, 즉 오토플레이에 대해서도 중요한 점을 설명합니다. Chrome이나 Safari 같은 브라우저에는 각자의 규칙이 있어서, 소리를 끈 상태일 때만 동영상이 저절로 시작되는 경우가 많습니다. 브라우저가 허용하는지 간단히 물어볼 방법은 없고, 직접 재생해 보는 수밖에 없습니다. 그래서 IMA 가이드는 모바일에서 광고 컨테이너를 재생 버튼 탭 같은 사용자 동작으로 시작하라고 안내합니다. 또 플레이어가 자동으로 또는 소리 없이 시작할 경우에는 요청에 이를 알려서, 그런 방식으로 재생할 수 있는 광고만 오게 해야 합니다.
프리롤은 수업, 요리법, 동영상 뉴스처럼 동영상이 방문 이유일 때 적합합니다. Google 동영상 정책에서 이 슬롯은 인스트림이라고 하며, 사용자가 보기로 선택한 콘텐츠 안에 들어간다는 뜻입니다. 올바르게 선언해야 합니다. 항상 기억하세요. 사용자는 동영상을 보러 왔으므로 광고가 컨트롤을 방해하거나 콘텐츠를 멈추게 하면 안 됩니다.
단계별 설명
구현 예시
<!-- 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>Google의 안내
팁
주의
IMA 가이드는 로컬이더라도 웹 서버로 페이지를 제공하라고 안내합니다. HTML 파일을 바로 열면 테스트가 실패할 수 있습니다.
모바일에서는 재생 탭 같은 사용자 동작으로 광고 컨테이너를 시작해야 합니다. 그렇지 않으면 광고가 재생되지 않을 수 있습니다.
문제가 있는 VAST 응답은 오류를 일으킬 수 있습니다. Google 예시는 광고 관리자를 제거하고 동영상을 재생해서 방문자가 멈춘 화면에 갇히지 않게 합니다.
창 크기가 바뀌면 Google 예시는 동영상 크기로 AdsManager의 크기 조정을 호출합니다. 이렇게 하지 않으면 광고 크기가 잘못될 수 있습니다.
아니요. 플레이어는 IMA로 VAST 태그를 요청할 수 있습니다. Google에 따르면 광고 규칙 매개변수(ad_rule)는 광고를 게재하는 데 필수가 아니며, 동영상 광고 규칙을 쓸 때만 필요합니다.
VAST는 어떤 광고를 재생할지 알려 주는 응답입니다. VMAP은 광고 규칙과 함께 쓰는 응답으로, 광고 시간이 언제 들어갈지 알려 줍니다. 태그는 output 매개변수의 vast, vmap 같은 값으로 형식을 선택합니다.
브라우저가 허용하면 가능합니다. Chrome과 Safari는 특히 소리가 있는 자동 재생을 제한합니다. 플레이어는 직접 시험해 보고, 자동으로 또는 소리 없이 재생할 경우 요청에 알리며, 모바일에서는 사용자 동작으로 광고를 시작해야 합니다.
Google 가이드는 광고가 로드되지 않아도 동영상이 계속 재생되도록 요구합니다. 예시에서는 광고 관리자를 제거하고 동영상을 광고 없이 재생합니다.
자료실
이 페이지의 모든 내용은 Google 공식 문서를 따릅니다. 원문에서 바로 읽어 보세요.
감사는 사이트를 방문자처럼 읽고, 아무것도 클릭하지 않으며, 무엇을 고쳐야 하는지 알려 줍니다.