티스토리 구글 애드센스 광고가 지정된 영역을 이탈하는 문제점 임시 조치

애드센스 광고 크기 벗어나는 문제

구글 애드센스 광고가 영역을 이탈하는 문제점

구글 애드센스를 8월18일 승인되고, 광고를 설정하면서 티스토리

본문 상단 2개의 광고 화면이 설정한 광고 크기를 이탈하는 문제가 발행하여 임시 조치

한 내용을 공유합니다. 전 웹 프로그래밍 관련 지식은 없고, 티스토리를 하면서 하나하나 알아나가는 단계로, 코드에 문제가 있을 수 있으나, 혹시 필요하실 분이 있을까봐 공유하오니, 참고해주세요. 블로그를 운영하다가 관련 내용 문제가 생기면, 해당 글을 수정하도록 하겠습니다.

---

문제점

아래 그림과 같이 본문 상단 2개에 설정한 광고에서 광고 자리를 이탈하는 현상이 발생하여 본문의 내용을 가리는 문제가 발생했습니다. 처음에는 대수롭지 않게 생각했는데, 이 현상이 자주 발생하고, 제 블로그만 이런 현상이 있다는 것을 알게 되었습니다. 

문제점 재현 방법

• 텍스트가 포함된 광고만 이런 현상이 있음
• 그림으로 채워져 있는 듯한 광고는 이런 현상이 없음
• 텍스트가 포함된 광고가 정상적으로 보여지는 경우 브라우저 창의 크기를 변경 하면 100% 확률로 같은 현상이 발생

이대로 두면 안되는 이유

이 문제가 있는 경우 콘텐츠를 가리는 것으로, 아래 그림과 같이 에드센스 광고 구현 정책에 위배되어 애드센스 계정이 중지 될 수 있습니다. 아래에 캡처한 화면의 링크를 남겨 놓았습니다.

애드센스 광고 구현 정책 : https://support.google.com/adsense/answer/1346295

애드센스 광고 구현 정책 일부

원인 : 근본 원인은 모르겠다.

애드센스 본문 상단 2개 광고를 넣기 위해 적용한 코드는, 구글링으로 쉽게 구할 수 있는 코드로 작성하여서 문제는 없다고 판단되었습니다. 여러가지 코드를 다해봤지만 광고 삽입 코드의 문제는 아닌 것 같습니다.

원인은 알아내지 못했지만, 해결책을 찾기 위해 이것저것 찾아보면서 애드센스 광고 태그 <ins> 내부의 <iframe> 의 height 체크를 해제하면 정상적으로 광고가 표시되는 것을 알게 되었습니다. <iframe> 의 height 속성을 토글하면서 테스트한 이유는 iframe 부터 height 사이즈가 커지기 시작했습니다.

애드센스 광고 크기 이탈 해결 방법

정확한 근본적인 이유는 모르겠지만, 제가 추정하는 것은 #1 스킨의 문제이거나, #1 스킨을 수정하면서 제가 사이드 이펙트를 고려하지 않은 내용 때문으로 추정합니다. 제가 #1 스킨에서 수정한 내용은 많지만, 크게 수정한 것은 아래와 같습니다.

#1 스킨 주요 수정 내용

• TOC 추가
• 본문 사이즈 변경
• 사이드바 설정 - 기본 설정: 본문 하단 위치, 모바일은 숨김
• 데스크탑 : 본문 우측 위치로 변경
• 모바일 : 하단 으로 변경

임시 조치

티스토리 CSS 에 아래의 코드를 추가하여 해당 현상을 임시로 해결 하였습니다. CSS 의 선택자는 애드센스 광고 삽입 HTML 코드에서 <ins> 태그의 의 class가 선택 되어야 합니다. 

CSS 추가 코드

애드센스 상단 광고 삽입 코드 중 일부

✔ 참고로 제가 티스토리 본문 애드센스 상단2개 광고를 삽입한 코드는 참고로 아래 첨부 파일과 같습니다. 

트스토리 애드센스 상단 광고 2개 삽입 코드.txt

주의 사항

이렇게 코드를 수정해도 되는지 관련 정책을 찾아 보았지만, 해당 정책이 위반 되는 내용은 찾지 못했습니다. 하지만, 이 CSS코드는 <ins> 코드내의 iframe 의 속성을 변경하는 것으로, 광고 내의 코드 속성을 변경 하는 것이라 문제가 될 소지는 있을 것 같습니다. 참고로 애드센스에서 제공하는 광고 코드에는 <iframe> 태그가 없고 그 상위 태그인 <ins> 태그 까지만 제공을 합니다. 

혹시, 같은 문제로 이 글을 보셔서 조치 하실 분들은 참고만 해주세요. 제가 블로그 운영하다가 이 수정으로 문제가 발생하면 해당 글을 수정하거나 삭제하겠습니다. 

끝까지 읽어 주셔서 감사합니다.^^ 😄