이번 블로그 팁으로는
특정 광고를 원하는 기기에서 보이기 또는 숨기는 방법에 대해서
알아보려고 합니다.
필요성에 대해 설명하자면
PC 버전 블로그에 970 x 250 화면의 애드센스 광고를 꼭 넣고 싶습니다.
그래서 애드센스에서 970 x 250 크기의 광고를 만들고
PC에 개제했습니다.
하지만 이게 웬걸?!
모바일로 확인해보니 이 970 x 250 크기의 광고가
모바일에서도 970 x 250 크기를 유지하면서 짤려 나오지 않겠습니다?!!
바로 이럴때 !!
꼭 게재하고 싶은 PC에 970 x 250 광고를 넣으면서
모바일에서는 이 970 x 250광고가 안 보이게 설정하는 방법을 이번 알아 보겠습니다
참고로 이 설정 방법은 애드센스 , 클릭몬 ,리얼클릭, 스폰서 애드등의 광고에서도 적용 되며
광고가 아니여도 사용이 가능합니다.
실전편
방법은 의외로 엄청 간단합니다
바로..
이 표 하나면 끝입니다.
설명하자면
각 코드가 화면 크기에 비례해 보임/숨기기 설정을 하는 것인데요
예를 들어
모바일에서만 화면을 표시하고 싶다 !!
한다면 visible-xs 를
반대로 모바일을 빼고 다른 모든 기기에 표시를 하고싶다
하시는 분은 hidden-xs를 쓰시면 됩니다.
(눈치 빠른 분들은 아셨겠지만 hidden은 숨김을 나태내며
visible은 보임을 나타냅니다.)
자 그럼 실전 코드로 쉽게 알아 봅시다.
코드 기본 형식은
코드 형식.txt입니다.
<실전 1>
<div class="hidden-xs hidden-sm">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
실제로 이용하고 있는 코드 형식이며
이렇게 설정을 하셨다면 모바일과 태블릿에서 숨기게 됩니다
<실전 2>
<div class="visible-xs">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-xxxxxxxxx"
data-ad-slot="xxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
이렇게 되면 모바일에서만 보이고 나머지 기기는 다 숨기게 됩니다
이런 식으로 예를 들면 참 쉽죠?
말 그대로 표만 이해하면 나머지는 쉽게 응용이 가능합니다
특히 광고뿐 아니라 다른 설정에서도 유용하니 익혀두시면
많은 도움이 되실 겁니다.
이상으로
특정 광고를 원하는 기기에서 보이기 또는 숨기는 방법에 대해 알아 보았습니다
댓글