자주 발생하는 구현 실수 방지하기

다음 시나리오는 GPT를 구현할 때 발견되는 가장 일반적인 실수 중 몇 가지를 나타냅니다. 이러한 구현은 현재 GPT 버전에서 잘 작동하는 것처럼 보일 수 있지만 앞으로 계속 작동하지 않을 수도 있습니다. 가장 심각한 경우 이러한 구현으로 인해 광고 게재가 예기치 않은 방식으로 중단될 수 있습니다. 지원되지 않는 구현으로 간주됩니다.

각 시나리오에는 표시된 문제를 해결하기 위한 권장 방법이 포함되어 있습니다.

이 목록은 발생할 수 있는 문제의 모든 목록을 제시하지는 않지만 해결해야 할 문제의 유형을 파악하는 데 도움이 되는 가이드가 될 것입니다.

또한 구현에 따라 사이트에서 변경이 필요한 모든 위치를 찾아야 할 수도 있습니다.

흔히 발생하는 실수

시나리오 1: GPT 자바스크립트 라이브러리의 비공식 사본 사용

대략적인 사용 사례 설명 자체 서버에서 로드하거나 비공식 소스에서 이러한 파일을 로드하는 gpt.js, pubads_impl.js 또는 모든 라이브러리를 호스팅합니다.
오류가 있는 코드 스니펫 예시 
// Incorrect: Accessing these files from an unofficial source
<script async src="https://www.example.com/tag/js/gpt.js"></script>
권장되는 오류 해결 방법 
// Correct: Access these files from a Google domain
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
// Also correct, if using Limited Ads
<script async src="https://pagead2.googlesyndication.com/tag/js/gpt.js"></script>

시나리오 2: gpt.js 스크립트 태그 리스너 사용

대략적인 사용 사례 설명 자바스크립트 파일 gpt.js가 로드될 때 GPT API를 호출할 준비가 되었다고 가정한 것은 잘못된 것입니다. API의 일부분이 pubads_impl.js 파일에서 제공되기 때문입니다. 따라서 스크립트 태그에 연결된 이벤트 리스너 내에서 어떤 식으로든 (프레임워크 포함) API에 의존하는 것은 올바르지 않습니다.
오류가 있는 코드 스니펫 예시 
var tag = document.createElement('script');
tag.type = 'text/javascript';
tag.src = (useSSL ? 'https:' : 'http:') +
        ‘//www.googletagservices.com/tag/js/gpt.js';
// Incorrect: Attaching a callback to the script’s onload event.
tag.onload = callback;
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(tag, node);
권장되는 오류 해결 방법 
// Make sure that googletag.cmd exists.
window.googletag = window.googletag || {};
googletag.cmd = googletag.cmd || [];
// Correct: Queueing the callback on the command queue.
googletag.cmd.push(callback);
문제 해결에 관한 설명 / 설명 googletag.cmd는 GPT가 준비되는 즉시 실행될 명령어 목록을 유지합니다. 이는 GPT가 로드되었을 때 콜백이 실행되도록 하기 위한 올바른 방법입니다.

시나리오 3: googletag 개체를 확인하여 GPT가 준비되었는지 확인

대략적인 사용 사례 설명 자바스크립트 파일 gpt.js가 로드되거나 googletag 객체가 정의된 경우 GPT API가 준비되지 않을 수 있으므로 해당 객체를 확인하여 GPT API를 사용할 수 있는지 확인하는 것은 신뢰할 수 없습니다.
오류가 있는 코드 스니펫 예시 
// Incorrect: Relying on the presence of the googletag object
// as a check for the GPT API.
if (typeof googletag != 'undefined') {
 functionProcessingGPT();
}
권장되는 오류 해결 방법 
// Correct: Relying on googletag.apiReady as a check for the GPT API.
if (window.googletag && googletag.apiReady) {
 functionProcessingGPT();
}
문제 해결에 관한 설명 / 설명 GPT는 안정적인 어설션을 만들 수 있도록 API를 호출할 준비가 되는 즉시 부울 플래그 googletag.apiReady를 채웁니다.

시나리오 4: 난독화된 코드 문법 사용

대략적인 사용 사례 설명 축소된 GPT 라이브러리 코드의 정확한 구문을 사용하는 경우 거의 확실하게 중단을 겪게 됩니다. Google에서는 지속적인 개선을 위해 GPT의 내부 작동 방식을 계속 변경하고 있으므로 API 참조 가이드에 설명된 API로만 사용하시기 바랍니다.
예를 들어 일반적인 요구사항은 refresh()를 호출하기 위해 PubAdsService가 완전히 로드되는 시점을 감지하는 것입니다.
오류가 있는 코드 스니펫 예시 
// Incorrect: Relying on an obfuscated property.
if (googletag.pubads().a != null) {
 functionProcessingGPT();
}
권장되는 오류 해결 방법 
// Correct: Relying on public GPT API methods
// (i.e. googletag.pubadsReady in this case).
if(window.googletag && googletag.pubadsReady) {
 functionProcessingGPT();
}
문제 해결에 관한 설명 / 설명 공개 API만 사용할 수 있습니다. PubAdsService가 완전히 로드되었는지 감지하는 경우 부울 값 googletag.pubadsReady가 있습니다.

시나리오 5: GPT의 함수나 변수 덮어쓰기

대략적인 사용 사례 설명 GPT에서 사용하는 함수나 변수 덮어쓰기에 기반한 사용 사례는 지원되는 사용 사례가 아니므로 언제든지 중단될 수 있습니다. GPT 내부에서 타이밍을 변경하면 중단을 통해 이러한 종류의 잘못된 동작이 나타날 수 있습니다.
오류가 있는 코드 스니펫 예시 
// Incorrect: Haphazardly overwriting a googletag.* property.
googletag.cmd = [];
권장되는 오류 해결 방법 
// Correct: Never overwrite googletag.* properties if they already exist.
// Always check before assigning to them.
googletag.cmd = googletag.cmd || [];

시나리오 6: GPT 호출의 순서를 잘못 지정

대략적인 사용 사례 설명 GPT의 내부가 진화함에 따라 경합 상태로 인해 중단이 발생할 수 있습니다. 잘못 정렬된 구문 집합으로 실행 중인 특정 타이밍으로 인해 작동하더라도 나중에도 작동하지 않을 수 있습니다.
오류가 있는 코드 스니펫 예시 
// Incorrect: Setting page-level key-value targeting after calling
// googletag.enableServices().
googletag.enableServices();
googletag.defineSlot(...);
googletag.pubads().setTargeting(e, a);
권장되는 오류 해결 방법 
// Correct: Setting page-level key-value targeting before calling
// googletag.enableServices().
googletag.pubads().setTargeting(e, a);
googletag.defineSlot(...);
googletag.enableServices();
문제 해결에 관한 설명 / 설명 GPT의 일반적인 타이밍을 준수하여 경합 상태를 방지합니다. 유효한 부분 순서 지정의 예는 다음과 같습니다.
  • 정의-사용-디스플레이
    1. 페이지 수준 설정 정의
    2. 슬롯 정의
    3. enableServices()
    4. 디스플레이 슬롯
  • 디스플레이 사용 설정
    1. 페이지 수준 설정 정의
    2. enableServices()
    3. 슬롯 정의
    4. 디스플레이 슬롯

시나리오 7: 클로저 및 자바스크립트 변수 범위 지정 오용

대략적인 사용 사례 설명 자바스크립트 변수 범위 지정 및 googletag.cmd.push에 전달된 함수에서 캡처된 변수의 값에 관한 가정이 잘못되었습니다.
오류가 있는 코드 스니펫 예시 
// Incorrect: Variable x is declared outside the anonymous function
// but referenced within it.
for (var x = 0; x < slotCount; x++) {
 window.googletag.cmd.push(
  function(){
    // If GPT is not yet loaded, this code will be executed subsequently when
    // the command queue is processed. Every queued function will use the last value
    // assigned to x (most likely slotCount).
    // This is because the function closure captures the reference to x,
    // not the current value of x.
    window.googletag.display(slot[x]);
  })
 }
}
권장되는 오류 해결 방법 
window.googletag.cmd.push(
 function(){
  // Correct: We both declare and reference x inside the context of the function.
  for (var x = 0; x < slotCount; x++){
   window.googletag.display(slot[x]);
  }
 }
)
문제 해결에 관한 설명 / 설명

자바스크립트에서 클로저는 값이 아닌 참조로 변수를 캡처합니다. 즉, 변수가 다시 할당되면 변수를 캡처한 함수 클로저가 나중에 실행될 때 새 값이 사용됩니다. 따라서 클로저의 코드 동작은 콜백이 즉시 실행되는지, 지연되는지에 따라 변경될 수 있습니다.

비동기식으로 로드된 GPT의 경우 GPT가 명령어 대기열의 콜백을 로드하는 속도에 따라 즉시 실행될 수도 있고 실행되지 않을 수도 있습니다. 위의 예시에서는 이렇게 하면 큐에 추가된 명령어의 동작이 변경됩니다.

문제를 방지하려면 명령어 대기열에 배치된 함수가 즉시 실행된다는 가정 없이 코드를 작성해야 하며 자바스크립트의 범위 지정 규칙과 관련하여 주의해야 합니다.

시나리오 8: display를 호출한 후 DOM 내에서 슬롯 컨테이너 이동

대략적인 사용 사례 설명 display를 호출한 후 슬롯 컨테이너를 이동하거나 DOM에 삽입하면 GPT에서 원치 않는 리플로우 및 예기치 않은 동작이 발생할 수 있습니다.
오류가 있는 코드 스니펫 예시 
// Incorrect: Moving slot containers after calling display
googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0");
googletag.enableServices();
googletag.display("div-gpt-ad-123456789-0");
...
// Inserting another element before the slot container, pushing the slot container down the page.
document.body.insertBefore(someOtherElement, document.getElementById("div-gpt-ad-123456789-0"));
권장되는 오류 해결 방법 
// Correct: Make any DOM order changes before calling display

document.body.insertBefore(someOtherElement, document.getElementById("div-gpt-ad-123456789-0"));
...
googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0");
googletag.enableServices();
googletag.display("div-gpt-ad-123456789-0");
이전
실적 모니터링