페이지 내 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 페이지에 JavaScript를 추가하고 컴패니언 광고 슬롯을 선언해야 합니다.
참고: 다음 각 예에서 googletag.defineSlot 메서드 호출 (사용 중인 실제 예에 따라 <head> 또는 <body> 태그에 있음)에 유효한 network 및 unit-path를 제공해야 합니다.
예 1: 기본 광고 슬롯 구현
다음 샘플 코드는 HTML 페이지에 gpt.js 파일을 포함하고 광고 슬롯을 선언하는 방법을 보여줍니다. 선언된 광고 슬롯은 728x90px입니다. 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>
사용해 보기
작동하는 구현은 다음 CodePen을 참고하세요.
예 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>Ad 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>