애드센스 모바일에서만 광고 노출하기, 일정 너비 이하에서만 광고 노출하기

북클럽 스킨 변경 방법 알아보기

https://rasdin.tistory.com/593

모바일 웹에서만 애드센스 광고 노출하도록 설정하기

특정 너비 이하에서만 애드센스 광고 노출하도록 설정하기

티스토리 스킨을 변경하면서 사이드바를 추가했고, 이에 따라 pc 웹에서는 게시글 상단의 고정 광고가 나오지 않도록 했다. 그러나 한 가지 문제가 있었는데, 사이드바는 모바일 웹과 같이 페이지의 좌우 폭이 작은 경우에는 노출되지 않는다는 점이었다.

이에 한 가지 생각을 떠올렸는데, 바로 모바일 웹처럼 좌우 폭이 작은 페이지에서 게시글을 볼 때만 상단 고정 광고가 노출되도록 설정하는 것이다.

본문 상단 광고를 제거한 대신 사이드바를 통해 광고를 노출하는 PC웹(좌)과

모바일과 같이 페이지 크기가 작은 경우 사이드바가 사라질 경우 상단 광고를 노출하도록 설정한 모바일웹(우)

모바일 웹에서만 애드센스 광고를 노출하도록 하려면 웹페이지의 너비로 계산해서 일정 너비 이하인 경우에만 애드센스 광고를 노출하도록 설정해야한다.

페이지의 좌우 너비가 780픽셀 이하인 경우로 설정했고, 페이지 너비와 폭에 맞춰서 광고가 노출되도록 하려면 아래와 같이 설정하면 된다.

html로 추가하는 것이 아니라, 티스토리 플러그인의 반응형 광고 플러그인에 추가해줘야 한다.

●에는 본인의 애드센스 고유번호를, ■에는 광고의 슬롯번호를 입력하면 된다.

<style>

@media (max-width:780px){

 .my-ad-mobile{display:inline-block;width:100%;height:100%}

}

</style>

<center><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- 애드센스 광고-->

<ins class="adsbygoogle my-ad-mobile"

     data-ad-client="ca-pub-●"

     data-ad-slot="■"

     data-ad-format="auto"

     data-full-width-responsive="true"></ins>

<script>

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

</script></center>

페이지 폭에 맞추는 것이 아닌 일정한 크기의 광고가 노출되도록 하고 싶다면 다음과 같이 설정하면 된다. 아래 예시는 가로 세로의 길이를 350픽셀로 고정해서 노출하도록 설정한 값이다.

<style>

@media (max-width:780px){

 .my-ad-mobile{display:inline-block;width:350px;height:350px}

}

</style>

<center><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- 애드센스 광고-->

<ins class="adsbygoogle my-ad-mobile"

     data-ad-client="ca-pub-●"

     data-ad-slot="■"

     data-ad-format="auto"

     data-full-width-responsive="true"></ins>

<script>

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

</script></center>

두 코드의 차이는 다음과 같다.

가로 세로 폭을 고정하지 않은 경우(좌)와 가로 세로 폭을 350px로 고정한 경우(우)

가로 세로 폭을 고정하지 않으면 웹 페이지 너비에 맞춘 크기로 광고가 노출되는 것을 확인할 수 있다.

한 가지 문제점이 있는데, 반응형 플러그인을 통해 설정하는 것이기 때문에 모바일 웹에서 접속할 경우 해당 코드가 작동하지 않는다. 반응형 스킨인데 어떻게 모바일 웹으로 접속할까 싶지만, 블로그 설정에서는 모바일 웹 사용 유무만 설정이 가능한 것이지, 모바일 웹 접속 자체를 차단해주는게 아니다.

이때문에 티스토리 블로그 주소 뒤에 /m/ 을 붙여 접속하면 모바일 웹으로 티스토리를 이용할 수 있다. 이렇게 모바일 웹으로 접속하는 것을 방지하기 위해 텐핑 플러그인에 다음과 같은 코드를 넣어주면 모바일웹으로 접속하더라도 PC 웹의 반응형 스킨으로 블로그를 이용할 수 있도록 할 수 있다.

<script>const tmp=location.href,mobile="/m/";-1!=tmp.indexOf("/m/")&&-1==navigator.userAgent.indexOf("Tistory")&&(location.href=tmp.replace("/m/","/"));</script>

북클럽 스킨 변경 방법 알아보기

https://rasdin.tistory.com/593