이 도움말에서는 Google 게시자 태그(GPT) 라이브러리를 사용하여 게임 수동 전면 광고를 표시하는 방법을 보여주는 메모와 예를 제공합니다. 게임 수동 전면 광고는 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을 반환할 수 있습니다. 불필요한 작업을 수행하지 않도록 이 사례를 확인해야 합니다. - 전면 광고를 표시하려는 페이지나 환경에서만 게임 수동 전면 광고를 요청하세요. 게임 수동 전면 광고는 데스크톱, 태블릿, 휴대기기에 게재할 수 있습니다.
-
GameManualInterstitialSlotReady이벤트에서makeGameManualInterstitialVisible을 호출하면 전면 광고가 표시됩니다. - 게임 수동 전면 광고에는 최대 게재빈도가 고정되어 있습니다. 이렇게 하면
gameManualInterstitialSlotReady이벤트가 120초마다 한 번 넘게 실행되는 것을 방지할 수 있습니다.
요구사항 및 권장사항
- 게임 수동 전면 광고는 자체 광고 슬롯을 생성합니다. 다른 광고 유형과 달리 게임 수동 전면 광고에서는
<div>를 정의할 필요가 없습니다. 이러한 광고는 광고가 채워질 때 자동으로 자체 컨테이너를 생성하여 페이지에 삽입합니다. - 여러 슬롯이 있는 페이지에서 단일 요청 아키텍처(SRA)를 사용하는 경우 정적 광고 슬롯 div가 생성될 때까지
display()를 호출하지 마세요. 광고 권장사항에 설명된 것처럼,display()를 처음 호출하면 이 시점 이전에 정의된 모든 광고 슬롯을 요청합니다. 게임 수동 전면 광고 슬롯에는 사전 정의된<div>가 필요하지 않지만 정적 광고 슬롯에는 필요합니다. 이러한 요소가 페이지에 나타나기 전에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>
