블로그스팟 adsbygoogle.push() 에러 해결

블로그스팟 블로그 성능 체크 중 개발자 모드 콘솔창에 나타난 에러 입니다. 

이 에러 메시지 안내를 따라가 보면 "반응형 광고 코드가 명시적 너비가 설정되지 않은 상위 컨테이너 내부에 있기 때문입니다." 라고 되어 있는데 딱히 광고 사이즈에 width를 명시해줘도 해결되지 않았기 때문에 다른 방법을 찾아봤습니다.

adsbygoogle.push() 에러 해결

해결 방법을 검색 하던 중 이 에러가 HTML이 다 그려지기 전 구글 스트립트 코드가 실행되어 생기는 에러라는 사실을 발견 했습니다.

구체적으론 자동 광고가 아닌 블로그 포스팅 내부나 사이드바 등에 코드를 직접 넣는 수동 광고 부분이 문제로 이 광고 코드를 보면 script 부분에 adsbygoogle을 호출하는 부분이 있는데 이 부분이 문제 였습니다.

구글 수동 광고 코드

이 코드를 window.onload 함수를 사용해 HTML이 다 그려지기 전까지 호출되지 않도록 하면 에러를 해결할 수 있습니다.

window.onload 추가

변경 전 코드

(adsbygoogle = window.adsbygoogle || []).push({});

변경 후 코드

window.onload = function() { (adsbygoogle = window.adsbygoogle || []).push({}); }

수동 코드를 1개만 넣는 경우 이렇게 사용하시면 되고 저처럼 여러 개를 넣어야 하는 경우는 다르게 적용해야 합니다. 일단 수동 코드의 script 항목을 전부 삭제합니다.

스트립트 제거 후 남은 코드

모든 수동 코드에 script를 삭제 했다면 블로그스팟 html 편집에서 제일 하단 body 태그 우에 아래 스크립트를 삽입합니다. 페이지의 html 로딩이 끝나면 ads함수를 호출 하는 스크립트 입니다.

<script>

     window.onload = function() {

    (adsbygoogle = window.adsbygoogle || []).push({});

}

</script>

</body> 태그 위에 삽입한 모습

script 수정 후 새로고침 해본 모습입니다. 처음 보였던 adsbygoogle.push 에러가 나타나지 않는 모습을 볼 수 있습니다.