티스토리 개발자 도구 콘솔 에러 adsbygoogle.push() error 해결 방법

 티스토리 블로그에서 개발자 도구를 열고 콘솔을 보면 아래와 같은 에러가 발생하는 경우가 있다.

TagError: adsbygoogle.push() error: No slot size for availableWidth=0 at Cn (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1662565282289206:159:67) at En (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1662565282289206:157:1164) at Kn ...

 해당 에러는 애드센스 광고를 로드하려고 했지만 맞는 광고의 크기가 없어서 로드하지 못한 경우 발생한다.

 다양한 요인으로 발생한다고는 하지만 주로 사이트의 레이아웃과 관련하여 애드센스 광고가 로드되어야 할 부분의 높이나 넓이가 너무 작은 경우 발생할 수 있다.

목차 (Contents)

 

콘솔 에러 adsbygoogle.push() error

1. 에러 발생 사유.

 해당 블로그에서는 사이드바의 광고와 관련하여 에러가 발생했다.

 블로그는 사이드 바에 수동으로 광고 코드를 넣은 상태인데, 화면이 작아짐에 따라 사이드바를 보이지 않게 처리하면서 사이드바의 광고가 로드될 자리가 없어지게 되고 에러가 발생한 것이다.

 

2. 코드 변경.

 레이아웃이 변경되면서 광고가 로드될 자리가 없어진다면 광고가 로드되지 않도록 설정해야 한다.

 보통 웹 페이지의 변경에 따라서 디자인을 변경할 경우에는 CSS에 @media {}에서 레이아웃 변경을 하게 되는데 여기서는 광고를 보이지 않게 처리할 수는 있어도 광고 자체가 로드되지 않도록 할 수는 없다.

 때문에 해당 블로그에서는 자바스크립트를 사용하여 일정 크기에서는 광고가 로드되지 않도록 해봤다.

 

 자바스크립트 코드는 아래의 형태와 같으며 해당 코드를 사용하고자 한다면 굵게 표시한 부분만 자신의 광고 코드로 변경하면 된다.

 웹 사이트 창의 크기가 1110 이상인 경우에만 광고 코드가 실행되는 코드이다.

<script> if (window.matchMedia('(min-width: 1110px)').matches) {     document.write('<ins class="adsbygoogle" style="display:block" data-ad-client="xxxx" data-ad-slot="xxxx" data-ad-format="auto"></ins>');     (adsbygoogle = window.adsbygoogle || []).push({}); } </script>

 

그 외 내용

 위 방법이 정석적인 방법인지는 잘 모르겠다.

 찾아보면 더 좋은 방법이 있을 수 있으며, 무슨 이유로 에러가 났는지 해당 블로그에서는 어떻게 해결을 시도했는지 참고하는 정도로 보면 좋지 않을까 한다.

 자동 광고의 경우 해당 에러는 발생하지 않으며 수동으로 직접 코드를 넣은 경우 발생한다고 보면 되지 않을까 한다.

 때문에 코드를 수정하기 귀찮거나 싫다면 차라리 해당 부분의 광고 코드는 지워 버리고 자동 광고를 사용하는 것어 더 나을 수도 있다.