H5 게임 전면 광고 표시

이 예에서는 Google 게시자 태그(GPT) 라이브러리를 사용하여 게임 전면 광고를 표시합니다. 게임 전면 광고는 GPT에서 관리하는 전체 페이지 광고로, 수동 트리거를 기반으로 웹 기반 게임을 플레이하는 사용자에게 표시됩니다. 게임 전면 광고에 관한 자세한 내용은 H5 게임 전면 광고 표시를 참고하세요.

게임 전면 광고를 표시하고 상호작용하려면 다음 GPT 이벤트를 사용하세요.

이벤트 실행 조건...
GamingInterstitialSlotReady 게임 전면 광고를 사용자에게 표시할 준비가 되었습니다.

전면 광고를 표시하려면 제공된 이벤트 객체에서 makeGameManualInterstitialVisible()를 호출합니다.
GamingInterstitialSlotClosed 사용자가 이전에 표시된 게임 전면 광고를 닫았습니다.

게임 전면 광고가 닫힐 때마다 맞춤 로직을 실행하려면 이 이벤트를 사용하세요.

게임 구조

게임 전면 광고는 게임의 구조에 따라 전체 화면 또는 게임 프레임 내부에 표시될 수 있습니다. 자세한 내용은 H5 게임 구조를 참고하세요.

샘플 구현은 H5 게임이 전체 화면 구조를 사용하여 최상위 창에 직접 렌더링된다고 가정합니다. 이 시나리오에서는 게임 전면 광고도 전체 화면으로 렌더링됩니다.

그러나 이 코드는 iFrame/WebView 구조를 사용하여 하위 프레임 내부에 배치될 때도 작동합니다. 게임 전면 광고를 H5 게임 캔버스로 제한하려면 다음 예와 같이 게임을 iFrame에 배치합니다.

<!doctype html>
<html>
 
<head>
   
<!-- The Google Publisher Tag here, if any, will only be responsible for serving ads outside of the H5 game. -->
   
<title>Page for this example H5 game</title>
   
<!-- Your <head> content here. -->
 
</head>
 
<body>
   
<span id="example-text">Example H5 game</span>

   
<!-- Sample code is served here. The Google Publisher Tag loaded in this frame will only be used within the H5 game. -->
   
<iframe src="https://www.example.com" title="Example game" allow="autoplay"></iframe>
 
</body>
</html>

사용 참고사항

  • 최적의 사용자 환경을 보장하기 위해, GPT는 형식을 올바르게 지원하는 페이지에서만 게임 전면 광고를 요청합니다. 이 제한으로 인해 defineOutOfPageSlot()가 null을 반환할 수 있습니다. 불필요한 작업을 수행하지 않도록 이 사례를 확인해야 합니다.

  • 전면 광고를 표시하려는 페이지나 환경에서만 게임 전면 광고를 요청하세요. 게임 전면 광고는 데스크톱, 태블릿, 휴대기기에 게재할 수 있습니다.

  • 게임 전면 광고는 자체 광고 슬롯을 생성합니다. 다른 광고 유형과 달리 게임 전면 광고에서는 <div>를 정의할 필요가 없습니다. 이러한 광고는 광고가 채워질 때 자동으로 자체 컨테이너를 생성하여 페이지에 삽입합니다.

  • 게임 전면 광고는 일회용입니다. 게임 전면 광고 슬롯은 새로고침할 수 없습니다. 대신 샘플 구현과 같이 슬롯을 소멸하고 다시 만들어야 합니다.

  • 게임 전면 광고에는 최대 게재빈도가 고정되어 있습니다. 최대 게재빈도가 설정되어 있으면 gamingInterstitialSlotReady 이벤트가 120초마다 한 번 넘게 실행되지 않습니다.

  • 여러 슬롯이 있는 페이지에서 단일 요청 아키텍처 (SRA)를 사용하는 경우 정적 광고 슬롯 div가 생성될 때까지 display()를 호출하지 마세요. 광고 권장사항에 설명된 것처럼, display()를 처음 호출하면 이 시점 이전에 정의된 모든 광고 슬롯이 요청됩니다. 게임 전면 광고 슬롯에는 사전 정의된 <div>가 필요하지 않지만 정적 광고 슬롯에는 이러한 <div>가 필요합니다. 이러한 요소가 페이지에 나타나기 전에 display()를 호출하면 신호 품질이 저하될 수 있습니다. 정적 슬롯이 정의된 후에 초기 호출을 지연하는 것이 좋습니다.

샘플 구현

데모 보기