티스토리 애드센스 광고가 안나올 때 해결 방법

필자는 MaterialT Mark3 스킨으로 바꾼 이후 애드센스 광고가 출력되지 않아서
크롬 브라우저의 개발자도구 기능을 통해 오류를 해결했다.

F12를 누르면 개발자 도구가 열리고 Console 탭에서
x 모양이 떠있는 부분을 확인하여 해당 에러 문구를
구글링하여 찾아보았는데 필자의 경우 아래 코드에서 오류가 발생하였다.

adsbygoogle.push() error: No slot size for availableWidth=0
TagError

위와 같은 오류가 두번 발생했는데 상하단에 광고를 노출하기 위한 코드에 문제가 생긴 것으로 추측된다.

해결 방법을 찾아서 아래와 같이 변경하였다.

➽ 변경 전

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

➽ 변경 후

<script>
window.onload = function() {
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>

window.onload는 페이지가 완전히 열렸을 때를 의미한다.

그 후 구글 광고를 표시해주는 push 코드를 통해서 애드센스 광고가 띄워진다.
자세한 원인은 모르지만 위와 같이 티스토리 플러그인에 코드를 반영하니 해결됐다. 

그런데 저 코드를 적용하고 나서 필자는 상하단 광고중에서 상단 광고만 출력되었다.
개발자도구를 열어서 또 다른 오류가 있나 확인해 봤는데 하단 광고에 대한 오류는 뜨지 않았다.
코드는 멀쩡히 돌아가고 있는 것 같은데 출력이 되지 않는게 이상하여
개발자도구에서 아래처럼 구글 애드센스에 광고 요청을 하는 메시지를 전달하였다.

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

입력 후 Enter

그 결과 정상적으로 하단에도 광고가 출력이 되었다!
분명히 구글 애드센스 플러그인의 상하단 광고 영역에 변경한 코드를 넣어줬는데도 불구하고
해당 코드가 제대로 적용되지 않는 부분이 있는지..
한 번더 push를 해야 광고가 출력이 되는 것 같다.

하지만 이렇게 개발자도구에서 적용한 내용들은 내 컴퓨터에서만 일시적으로 적용되는것이므로
다른 사람이 내 페이지에 들어왔을 때는 광고가 여전히 출력되지 않을 것이다.

따라서 저 코드를 내 페이지에 들어왔을 때
사용자들 컴퓨터에서 자동으로 실행되게 해야하는데 그 코드는 아래와 같다.

<script>
function Adcode() {
(adsbygoogle = window.adsbygoogle || []).push({});
}

var timeoutID;
$(function() {
timeoutID = window.setTimeout(Adcode, 1000);
})
</script>

저 코드는 1000ms(1초) 뒤에 구글 광고를 표시하라고 메시지를 날린다.

위 내용을 티스토리 스킨 편집에 들어가서 /head 위에 붙여넣었더니
하단에도 광고가 제대로 출력되었다. 

가끔 광고를 많이 배치한 경우 일부 광고가 동작하지 않을 수 있는데  

31번째 줄에 push 코드를 복사하여 밑의 줄에 한 줄더 추가해주면 나머지 광고들도 정상 동작한다.