블로그 운영자라면 한 번쯤은 경험하는 문제가 있습니다. 바로 애드센스 광고가 정상적으로 뜨지 않거나, 콘솔에 에러가 발생하는 경우입니다. 특히 postMessage와 관련된 오류는 자바스크립트 코드와 애드센스 광고 스크립트가 충돌해서 발생할 수 있습니다. 이 글에서는 그 원인과 해결 방법을 정리했습니다.

애드센스 광고가 뜨지 않는 이유

애드센스 광고가 표시되지 않는 원인은 크게 두 가지로 나눌 수 있습니다.

• 애드센스 계정, 정책, 광고 재고 문제로 인해 광고가 차단된 경우
• 자바스크립트 코드에서 애드센스가 보내는 메시지를 잘못 처리해 충돌이 생기는 경우

첫 번째는 구글의 정책이나 계정 상태를 점검해야 하고, 두 번째는 우리가 직접 수정할 수 있습니다.

postMessage와 애드센스

애드센스는 광고를 iframe으로 불러옵니다. 이때 광고 스크립트는 postMessage API를 통해 브라우저와 통신합니다. 문제는 페이지에 등록된 message 이벤트 리스너가 이 메시지를 무조건 처리하려고 하면, 비JSON 데이터를 JSON.parse 하면서 에러가 발생한다는 점입니다. 이 때문에 광고가 중단되거나 화면에 노출되지 않는 현상이 생깁니다.

최종 코드

이 문제를 피하기 위해 메시지 수신 코드를 간단하게 작성할 수 있습니다. 출처(origin)를 체크해서 내 사이트가 보낸 메시지만 처리하도록 하는 방식입니다.

function recvApp(e)
{
    if (e.origin && e.origin !== window.location.origin) {
        return;
    }

    var json = JSON.parse(e.data);

    ...
}

window.addEventListener('message', recvApp);

코드 설명

• if (e.origin && e.origin !== window.location.origin)
  현재 페이지의 출처와 다른 곳에서 보낸 메시지는 모두 무시합니다.
• JSON.parse(e.data)
  메시지를 JSON 객체로 변환합니다. 내 사이트에서 보낸 메시지만 처리하도록 제한했기 때문에 충돌을 줄일 수 있습니다.

정리

애드센스와 같은 광고 스크립트는 기본적으로 postMessage를 사용합니다. 따라서 메시지 처리 코드를 작성할 때는 반드시 출처를 확인하고, 내 사이트에서 보낸 메시지만 다루는 것이 안전합니다. 위와 같이 코드를 수정하면 애드센스와의 충돌로 인한 오류를 막고 광고 노출 문제도 예방할 수 있습니다.