인페이지 HTML 광고 슬롯을 동영상 또는 오버레이 광고 슬롯과 연결할 수 있습니다. 연결된 광고 슬롯 간의 이러한 관계를 마스터-컴패니언 관계라고 합니다.
동영상 및 오버레이 마스터 광고를 요청하는 것 외에도 IMA SDK를 사용하여 컴패니언 HTML 광고를 표시할 수 있습니다. 이러한 광고는 HTML 환경 내에서 표시됩니다.
컴패니언 광고 사용
컴패니언 광고를 사용하려면 다음 단계를 따르세요.
1. 컴패니언 광고 예약
먼저 마스터 광고와 함께 표시할 컴패니언 광고를 예약해야 합니다. 컴패니언 광고는 Ad Manager에서 트래피킹할 수 있습니다. 마스터 광고당 최대 6개의 컴패니언 광고를 게재할 수 있습니다. 이 기법은 단일 구매자가 페이지의 모든 광고를 관리하는 경우 로드블로킹이라고도 합니다.
2. 컴패니언 광고 요청
기본적으로 컴패니언 광고는 각 광고 요청에 대해 사용하도록 설정됩니다.
3. 디스플레이 컴패니언 광고
컴패니언 광고를 렌더링하는 방법에는 두 가지가 있습니다.
- 자동으로 Google 게시자 태그 (GPT) 사용
GPT를 사용하여 컴패니언 광고를 구현하는 경우, HTML 페이지에 선언된 컴패니언 광고 슬롯이 있고 이러한 광고가 API에 등록되어 있으면 (즉, JavaScript와 HTML의 div ID가 일치해야 함) 광고가 자동으로 표시됩니다. GPT를 사용할 때의 이점은 다음과 같습니다.- 컴패니언 슬롯 인식
- VAST 응답에 포함된 컴패니언 광고가 HTML 페이지에 정의된 슬롯보다 적은 경우 게시자 네트워크의 컴패니언 백업 광고
- 동영상 광고가 없는 경우 컴패니언 자동 완성
- 클릭 재생 동영상 플레이어용으로 미리 로드된 컴패니언 광고 슬롯
HTMLResource및iFrameResource등 자동 컴패니언 렌더링
- Ad API를 사용하여 수동으로 만들기.
Google 게시자 태그와 함께 컴패니언 광고 사용
Google 게시자 태그 (GPT)는 사이트에서 HTML 컴패니언 광고 표시를 자동화합니다. 대부분의 게시자는 GPT를 사용하는 것이 좋습니다. GPT가 IFrame이 아닌 기본 웹페이지에서 로드되면 HTML5 SDK는 GPT 슬롯을 인식합니다. IMA SDK에서 GPT를 사용하는 방법에 대한 자세한 내용은 GPT 문서를 참고하세요.
iframe 내에서 HTML5 SDK를 호스팅하는 경우
다음 기준을 모두 충족하는 경우 GPT 컴패니언을 올바르게 표시하려면 추가 프록시 스크립트를 포함해야 합니다.
- IFrame에 HTML5 SDK를 로드합니다.
- 기본 웹페이지 (IFrame 외부)에서 GPT를 로드합니다.
이 시나리오에서 컴패니언을 표시하려면 SDK를 로드하기 전에 GPT 프록시 스크립트를 로드해야 합니다.
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
주의사항:
- SDK를 로드하는 IFrame 내에 로드된 GPT가 없어야 합니다.
- GPT는 다른 IFrame이 아닌 상단 페이지에 로드되어야 합니다.
- 프록시 스크립트는 GPT와 동일한 프레임 (즉, 기본 페이지)에 로드되어야 합니다.
HTML에 컴패니언 광고 슬롯 선언
이 섹션에서는 GPT를 사용하여 HTML에 컴패니언 광고를 선언하는 방법을 설명하고 다양한 시나리오에 대한 샘플 코드를 제공합니다. HTML5 SDK의 경우 HTML 페이지에 자바스크립트를 추가하고 컴패니언 광고 슬롯을 선언해야 합니다.
참고: 다음 각 예에서 googletag.defineSlot 메서드 호출 (사용 중인 실제 예시에 따라 <head> 또는 <body> 태그에 위치)에 유효한 network 및 unit-path를 제공해야 합니다.
예 1: 기본 광고 슬롯 구현
다음 샘플 코드는 HTML 페이지에 gpt.js 파일을 포함하고 광고 슬롯을 선언하는 방법을 보여줍니다. 선언된 광고 슬롯은 728x90픽셀입니다. GPT는 VAST 응답에서
이 크기와 일치하는 모든 컴패니언 광고로 슬롯을 채우려고 합니다. 광고 슬롯이 선언된 후에는 googletag.display() 함수가 페이지에서 호출될 때마다 광고 슬롯을 렌더링할 수 있습니다. 해당 슬롯이 컴패니언 슬롯이므로 광고가 즉시 게재되지는 않습니다. 대신 마스터 동영상 광고와 함께 표시됩니다.
다음은 구현의 예입니다.
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() { googletag.display('companionDiv'); });
</script>
</div>
<body>
</html>
사용해 보기
작동하는 구현을 위한 다음 코드펜을 확인할 수 있습니다.
예 2: 동적 광고 슬롯 구현
페이지 콘텐츠가 렌더링될 때까지 페이지에 있는 광고 슬롯 수를 모를 수도 있습니다. 다음 샘플 코드는 페이지가 렌더링되는 동안 광고 슬롯을 정의하는 방법을 보여줍니다. 이 예는 광고 슬롯이 실제로 표시되는 광고 슬롯을 등록한다는 점을 제외하면 예 1과 동일합니다.
참고: 동영상 플레이어가 광고를 표시하려고 하면 슬롯을 요청합니다. 플레이어가 광고를 표시하기 전에 슬롯이 정의되었는지 확인합니다.
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.display('companionDiv');
});
</script>
</div>
<body>
</html>
사용해 보기
작동하는 구현을 위한 다음 코드를 확인할 수 있습니다.
예 3: 미리 로드된 광고 슬롯
컴패니언 광고를 요청하기 전에 광고 슬롯에 무언가를 표시해야 하는 경우도 있습니다. 컴패니언 광고는 일반적으로 동영상 광고와 함께 요청됩니다. 이 요청은 페이지가 로드된 후에 발생할 수 있습니다. 예를 들어 컴패니언 광고는 사용자가 클릭 재생방식 동영상을 클릭한 후에만 로드될 수 있습니다. 이 경우 컴패니언 광고를 요청하기 전에 광고 슬롯을 채울 일반 광고를 요청할 수 있어야 합니다. 이 사용 사례를 지원하려면 컴패니언 슬롯에 표준 웹 광고를 표시하면 됩니다. 웹 광고가 컴패니언 슬롯에 타겟팅되도록 합니다. 표준 웹 광고 슬롯을 타겟팅하는 것과 동일한 방식으로 컴패니언 슬롯을 타겟팅할 수 있습니다.
참고: 다음 샘플 코드는 굵게 표시된 섹션을 제외하고 예 1에 제공된 코드와 정확히 동일합니다. 이 경우 동영상 광고 단위 대신 미리 로드된 광고의 광고 네트워크 및 단위 경로를 제공합니다.
다음은 설명된 구현의 예입니다.
<html>
<head>
...
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
...
</html>
사용해 보기
다음 코드 펜에서 작동하는 구현을 확인할 수 있습니다.
Ad API와 함께 컴패니언 광고 사용
이 섹션에서는 Ad API를 사용하여 컴패니언 광고를 게재하는 방법을 설명합니다.
디스플레이 컴패니언 광고
컴패니언 광고를 게재하려면 먼저 AdsManager에서 전달된 AdEvent 이벤트를 통해
Ad 객체에 대한 참조를 가져옵니다.
컴패니언 광고 표시는 마스터 광고 표시와 일치해야 하므로 AdEvent.STARTED 이벤트를 사용하는 것이 좋습니다.
그런 다음 이 Ad 객체로 getCompanionAds()를 호출하여 CompanionAd 객체의 배열을 가져옵니다. 여기에서 CompanionAdSelectionSettings를
지정할 수 있으며, 이를 통해
컴패니언 광고에 광고 소재 유형, 유사한 비율, 리소스 유형, 크기 기준에 따라 필터를
설정할 수 있습니다. 이러한 설정에 관한 자세한 내용은
HTML5 API 문서를 참고하세요.
이제 getCompanionAds에서 반환된 CompanionAd 객체를 사용하여
다음 가이드라인에 따라 페이지에 컴패니언 광고를 게재할 수 있습니다.
- 페이지에 필요한 크기의 컴패니언 광고 슬롯
<div>를 만듭니다. -
STARTED 이벤트의 이벤트 핸들러에서
getAd()를 호출하여Ad객체를 가져옵니다. -
getCompanionAds()를 사용하여 컴패니언 광고 슬롯 크기 및CompanionAdSelectionSettings와 모두 일치하고 마스터 광고 소재와 순서 번호가 같은 컴패니언 광고 목록을 가져올 수 있습니다. 시퀀스 속성이 누락된 광고 소재는 순서 번호 0으로 처리됩니다. -
CompanionAd인스턴스에서 콘텐츠를 가져와 해당 광고 슬롯의<div>의 내부 HTMl로 설정합니다.
샘플 코드
<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>
<script>
// Listen to the STARTED event.
adsManager.addEventListener(
google.ima.AdEvent.Type.STARTED,
onAdEvent);
function onAdEvent(adEvent) {
switch (adEvent.type) {
case google.ima.AdEvent.Type.STARTED:
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
var companionAd = companionAds[0];
// Get HTML content from the companion ad.
var content = companionAd.getContent();
// Write the content to the companion ad slot.
var div = document.getElementById('companion-ad-300-250');
div.innerHTML = content;
break;
}
}
</script>
유동적인 컴패니언 광고 게재
이제 IMA에서 유동적인 컴패니언 광고를 지원합니다. 이러한 컴패니언 광고는 광고 슬롯의
크기에 맞게 크기를 조절할 수 있습니다. 상위 div 너비의 100% 를 채운 다음 컴패니언의 콘텐츠에 맞게 높이를 조절합니다. Ad Manager에서 Fluid 컴패니언 크기를 사용하여
설정합니다. 이 값을 설정하는 위치는 다음 이미지를 참고하세요.
GPT 유동적 컴패니언
GPT 컴패니언을 사용하는 경우 defineSlot() 메서드의 두 번째 매개변수를 업데이트하여
유동 컴패니언 슬롯을 선언할 수 있습니다.
<!-- Register your companion slots -->
<script>
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
광고 API 유동적 컴패니언
컴패니언 광고에 Ad API를 사용할 때 google.ima.CompanionAdSelectionSettings.sizeCriteria를 SELECT_FLUID 값으로 업데이트하여 유동적인 컴패니언 슬롯을 선언할 수 있습니다.
<script>
...
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
// Note: Companion width and height are irrelevant when fluid size is used.
var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
var companionAd = companionAds[0];
...
}
}
</script>