이 도움말에서는 Google 게시자 태그(GPT) 라이브러리를 사용하여 H5 게임 전면 광고를 표시하는 방법을 보여주는 메모와 예를 제공합니다. 게임 전면 광고는 GPT에서 관리하는 전체 페이지 광고로, 웹페이지에서 실행되는 게임에서 수동 트리거를 통해 사용자에게 표시됩니다.
다음 GPT 이벤트는 게임 전면 광고를 표시하고 상호작용하는 데 사용됩니다.
| 이벤트 | 실행 조건... |
|---|---|
|
|
게임 전면 광고 슬롯을 표시할 준비가 되었습니다. 전면 광고를 표시하려면 제공된 이벤트 객체에서 |
|
|
표시되던 게임 전면 광고 슬롯이 닫힙니다. 게임 전면 광고가 닫힐 때마다 맞춤 로직을 실행하는 데 사용됩니다. |
게임 전면 광고는 게임이 표시되는 방식에 따라 전체 화면 또는 게임 프레임 내부를 렌더링할 수 있습니다. H5 게임 광고 구조에 대해 자세히 알아보세요.
다음 샘플 코드는 H5 게임이 '전체 화면' 구조를 사용하여 페이지와 동일한 상단 프레임에 직접 배치되었다고 가정합니다. 이 경우 게임 전면 광고도 전체 화면으로 렌더링됩니다.
그러나 이 코드는 하위 프레임 내부에 배치될 때도 작동합니다('iFrame/WebView' 구조 사용). 게임 전면 광고를 H5 게임 캔버스로 제한하려면 게임을 iFrame에 배치해야 합니다.
예
<!doctype html>
<html>
<head>
<!-- 여기의 Google 게시자 태그(있는 경우)는 H5 게임 외부에 광고를 게재하는 것에 대해서만 책임을 집니다. -->
<title>이 예시 H5 게임에 대한 페이지</title>
<!-- <head> 콘텐츠가 올 위치입니다. -->
</head>
<body>
<span id="example-text">예시 H5 게임</span>
<iframe src="https://www.example-game.com" title="예시 게임" allow="autoplay">
<!-- 샘플 코드가 여기에 제공됩니다. 이 프레임에 로드된 Google 게시자 태그는 H5 게임 내에서만 사용됩니다. -->
</iframe>
</body>
</html>
사용 참고사항
- 최적의 사용자 환경을 보장하기 위해, GPT는 형식을 올바르게 지원하는 페이지에서만 게임 전면 광고를 요청합니다. 따라서
defineOutOfPageSlot()이 null을 반환할 수 있습니다. 전면 광고를 표시하려는 페이지나 환경에서만 게임 전면 광고를 요청하세요. 게임 전면 광고는 데스크톱, 태블릿, 휴대기기에 게재할 수 있습니다. makeGameManualInterstitialVisible에서makeGameManualInterstitialVisible을 호출하면 전면 광고가 표시됩니다.- 게임 전면 광고에는 최대 게재빈도가 고정되어 있습니다. 이렇게 하면
gameManualInterstitialSlotReady이벤트가 120초마다 한 번 넘게 실행되는 것을 방지할 수 있습니다.
요구사항 및 권장사항
- 게시자는 게임 외 인벤토리에 H5 게임 전면 광고를 사용할 수 없습니다. 이 형식을 구현하면 게시자는 이 조건에 자동으로 동의하는 것입니다. Google 게시자 정책 및 Google Ad Manager 파트너 가이드라인도 준수해야 합니다.
- Google은 언제든지 게시자를 승인 또는 비승인할 권리를 보유하며, 위반 사실이 확인된 게시자는 허용 목록에서 제외됩니다.
- 게임 전면 광고는 자체 광고 슬롯을 생성합니다. 다른 광고 유형과 달리 게임 전면 광고에서는 <div> 요소를 정의할 필요가 없습니다. 이러한 광고는 광고가 채워질 때 자동으로 자체 컨테이너를 생성하여 페이지에 삽입합니다.
- 여러 슬롯이 있는 페이지에서 단일 요청 아키텍처(SRA)를 사용하는 경우 정적 광고 슬롯 div가 생성될 때까지
display()를 호출하지 마세요. 광고 권장사항에 설명된 것처럼,display()를 처음 호출하면 이 시점 이전에 정의된 모든 광고 슬롯을 요청합니다. 게임 전면 광고 슬롯에는 사전 정의된 <div>가 필요하지 않지만 정적 광고 슬롯에는 이러한 <div>가 필요합니다. 해당 요소가 페이지에 나타나기 전에display()를 호출하면 신호 품질이 저하될 수 있으므로 정적 슬롯이 정의된 후로 초기 호출을 지연하는 것이 좋습니다. - 수동 전면 광고를 트래피킹하려면 표준 웹 전면 광고와 동일한 광고 단위 및 광고 항목 설정이 필요합니다.
시작하기
- 태그 지정
googletag.defineOutOfPageSlot()을 사용하여 GPT 슬롯을 만들고 OutOfPage 형식을googletag.defineOutOfPageSlot()으로 설정합니다.
H5 게임 전면 광고에 대한 GPT 기술 개발자 가이드를 참고하세요.- 슬롯이 정의되면
gameManualInterstitialSlotReady이벤트를 수신하는 이벤트 리스너를 추가합니다. 이벤트 리스너 콜백에서 제공된 이벤트 객체에서makeGameManualInterstitialVisible()메서드를 호출하여 광고를 표시합니다. - 다른 모든 정적 광고 슬롯을 선언하면
googletag.display호출 시 게임 전면 광고 슬롯을 채우라는 요청이 트리거됩니다.
예
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>게임 수동 전면 광고 예시</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
let gameManualInterstitialSlot;
googletag.cmd.push(function () {
// 게임 수동 전면 광고 슬롯을 정의합니다.
defineGameManualInterstitialSlot();
// 정적 광고 슬롯을 정의합니다.
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// SRA 및 서비스를 사용하도록 설정합니다.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// 페이지 또는 기기가 전면 광고를 지원하지 않는 경우 슬롯이 null을 반환합니다.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('전면 광고가 준비되기를 기다리는 중...');
// 전면 광고가 로드되면 클릭 핸들러를 등록할 이벤트 리스너를 추가합니다.
// 이 이벤트가 실행되지 않으면 로컬 저장소를 지우고 페이지를
// 새로 고쳐 보세요.
googletag.pubads().addEventListener('gameManualInterstitialSlotReady',
(slotReadyEvent) => {
if (gameManualInterstitialSlot === slotReadyEvent.slot) {
printStatus('전면 광고가 준비되었습니다.');
const button = document.getElementById('trigger');
button.style.display = 'block';
button.addEventListener('click', () => {
slotReadyEvent.makeGameManualInterstitialVisible();
printStatus('전면 광고가 활성 상태입니다.');
}, { once: true });
}
});
googletag.pubads().addEventListener('gameManualInterstitialSlotClosed',
resumeGame);
}
}
function resumeGame() {
document.getElementById('trigger').style.display = 'none';
// 게임 수동 전면 광고 슬롯은 일회용이므로 이전 슬롯을 제거하고 새 슬롯을 만듭니다.
googletag.destroySlots([gameManualInterstitialSlot]);
defineGameManualInterstitialSlot();
googletag.display(gameManualInterstitialSlot);
}
function printStatus(status) {
document.getElementById('status').innerText = status;
}
</script>
<style>
button {
display: none;
}
div.content {
position: fixed;
top: 50%;
}
</style>
</head>
<body>
<div id="static-ad-1" style="width: 100px; height: 100px;"></div>
<div class="content">
<span id="status">이 페이지에서는 게임 수동 전면 광고가 지원되지 않습니다.</span>
<p>
<button id="trigger">전면 광고 트리거</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// 표시할 첫 번째 호출이 정적 광고 슬롯 div가 정의된
// 다음에 오는지 확인합니다.
googletag.display(staticSlot);
});
</script>
</body>
</html>
트래피킹
- 새 광고 단위를 만들거나 기존 광고 단위를 사용합니다. 광고 단위 크기로 320x480, 300x250, 336x280을 선택합니다.
- 광고 항목을 만듭니다. 사용 사례에 따라 적절한 광고 항목 설정을 선택합니다.
| 광고 항목 설정 | ||||
|---|---|---|---|---|
| 사용 사례 | 광고 유형 | 광고 항목 유형 | 예상 광고 소재 | 타겟팅 > 인벤토리 |
| 예약 디스플레이 광고 게재 | 디스플레이 |
|
320x480, 300x250, 336x280 |
이전 단계에서 만들거나 선택한 광고 단위 |
| 예약되지 않은 광고 게재 | 디스플레이 |
|
||
| 예약 동영상 광고(예: VAST 태그 또는 MP4) 게재 | 동영상 또는 오디오 |
|
300x250v 또는 320x480v | |
| 예비 광고/공개 입찰 광고 게재 | 디스플레이 | Ad Exchange | 요청된 모든 크기 | |