반응형 디자인, 애드센스 반응형 광고단위를 쓰면서 반드시 주의해야할 점
반응형 스킨을 쓰시는 분들이 많아지는듯 합니다.
그러나 반응형 웹에서 애드센스 광고를 구현할 때에는 반드시 주의해야할 부분이 있습니다.
꽤 많은 분들이 반응형으로 광고를 표시하는데에 bootstrap의 class를 이용하고 계십니다.
(예를들면 데스크탑화면에서는 사이드바에 광고를 띄우고, 모바일에서는 사이드바를감추고, 본문하단에 띄우고..)
그러나 bootstrap의 클래스를 이용하는 것은 display:none으로 광고를 가려버리는 명백한 정책위반입니다. 더불어 광고갯수 정책까지 위반할 수 있습니다.
광고는 보이지 않지만, 백그라운드에서 광고가 로딩되고, 그로인해 CPR광고주에게 피해가 갈 수 있기 때문입니다.
정책위반 하지 않고 광고를 숨기는 방법
앞서 말했듯이 광고를 숨기는 행위가 정책위반이 되는 이유는, 불필요한 광고요청으로 광고주에게 피해가 가기 때문입니다.
따라서 정책위반 없이 광고를 숨기려면, 광고가 요청되기 전에 자바스크립트 등을 통해 광고 코드를 삭제하면 됩니다.
혹은 반응형 광고단위를 사용하여 고급코드에서 크기를 0x0픽셀로 지정하면 광고를 로딩하지 않게됩니다.
1. 반응형-고급코드 0x0크기 이용하는 방법
대부분 반응형 웹 구현을 위해 광고를 숨기기 때문에, 이 방법을 통해서 정책위반을 피해갈 수 있습니다.
반응형 광고코드를 얻을 때, 고급코드를 선택해야합니다.
숨겨지기 원하는 구간에서 광고 크기를 0px, 0px로 설정합니다. 또는 width, height값을 지정하지 않고 display:none을 설정합니다.
일반적인 display:none을 사용하게되면 백그라운드에서 광고가 로딩되지만,
반응형 광고크기를 0x0으로 설정하거나, 미디어쿼리를 통해서 display:none을 설정하면 광고 로딩을 하지 않기 때문입니다.
애드센스 도움말에서 소개하는 광고단위 숨기는 방법. 반드시 미디어쿼리에서 사용해야하고, 다른 방식으로 display:none을 사용하면 안된다.
고급코드 수정이 어려우신 분들은 다음 도구를 이용해보세요.
원하는 범위에서 크기를 0,0으로 입력하시면 됩니다.
2. 자바스크립트를 이용하여 광고 로딩 전에 코드를 삭제하는 방법
이 방법은 자바스크립트에 대해 어느정도 지식이 있어야 합니다.
방법은 간단합니다. 광고를 로딩하는 스크립트가 광고를 로딩하는데 까지 약간의 시간이 걸리기 때문에, 그 전에 html에서 ins코드를 삭제하면 됩니다.
※jQuery를 이용한 예)
$("ins.adsbygoogle").remove();
본인이 원하는 상황에서 광고를 삭제하기 위한 스크립트는 직접 작성하셔야 합니다.
따라서 자바스크립트를 다루는데 자신이 없으신 분들은 위의 반응형-고급코드를 이용하는 방법을 이용하시면 됩니다.