애드센스 광고 pc와 모바일 광고 다르게 나타내게 하는 방법

애드센스 광고 pc와 모바일 광고 다르게 나타내게 하는 방법

저번에 포스팅 해드린 애드센스 웹페이지 측면 스크롤을 따라다니는 광고에 대해 작성했었는데요

애드센스 확인결과 본문 상단 광고보다 더 높은 노출률과 수익이 났음을 확인 했습니다.

-아는 동생에게 고맙다고 말했습니다 정말 똘똘한 녀석입니다-

다만 문제는 애드센스 광고를 모바일 티스토리 연동을 해제하면 모바일에서도 웹페이지와 같은 본문작성한게 보여지지만

스크롤을 따라다니는 광고는 정말 거슬리게 되더군요

스크롤을 내려도 사라지지 않고 X표시를 눌러야만 없어집니다. 

X표시가 잘 보여지지도 았고

크기를 줄이거나 포지션을 이동시키면 모바일에서 그럭저럭 잘보여질 지라도 웹에서는 좋은 모양으로 변하지는 않았습니다.

그래서 PC에서만 나오게 할수는 없을까?

HTML편집 으로 들어가 해당 스크롤 광고 

<div style="position: fixed; right: 40px; top: 200px;">

<!-- 데탑용 -->

<script>

if(window.getWindowCleintWidth()>=768){

document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="■■■" data-ad-slot="★★★"></ins>');

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

}

</script>

</div>

자바스크립트 이미지 효과 부터 만들어주시면 됩니다.

<div style="

부터 만들어주겠습니다.

float:right (오른쪽 정렬입니다) margin 여백입니다.

<div style="float:right; margin:5px 0px 0px 5px;">

식으로 오른쪽 정렬과 여백을 각각 지정해주세요

<script>

이제 어떤 값을 어떤 식으로 적용할지 지정해주시면 되는데요

(768)은 모바일을 구분하는 경계 단위입니다.

<script>

if(window.getWindowCleintWidth()>=768){  에서 768로 한다는 이야기는 pc에서는 출력하지만 모바일에서는 나오지 않는다 라는 뜻입니다.

document.write

는 (=브라우저)에 출력해주는 명령어입니다.

if(window.getWindowCleintWidth()>=768){

document.write(     명령어를 입력             ) 

(안 사이에는 구글 광고를 넣어주면 된다)

' (광고) ' 이런식으로 '를 넣어줍니다 태그안에 " 큰따옴표가 있을때는 작은 따옴표로 묵어줘야 합니다

   애드센스 광고에서 측면 광고를 불러오겠습니다 다음과 같이 광고 코드가 나옵니다

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

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client="ca-pub-숫자숫자숫자숫자"

     data-ad-slot="숫자숫자숫자숫자"

     data-ad-format="auto"></ins>

<script>

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

</script>

빨간색 부분은 당연히 계정마다 본인만의 코드가 있습니다. 남의거 똑같이 배끼시면 안돼요;;;

if(window.getWindowCleintWidth()>=768){

document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>

<ins class="adsbygoogle"

 data-language="ko" style="display:inline-block;width:336px;height:280px" 

data-ad-client="■■■" 

data-ad-slot="★★★"></ins>');

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

}

</script> 에서 <\/script> 를 해주면 HTML창에서 보면 <＼/script>가 이런식으로 보여진다 상단에 <script>가 있으니 구글 광고 /script를 적용하지 않게 하기 

위함이 아닌가 싶다

</ins> 다음에 스크립트는 당연히 제거

pc만 나오게 하는 광고는 완성

<div style="float:right; margin:5px 0px 0px 5px;">

<!-- 데탑용 -->

<script>

if(window.getWindowCleintWidth()>=768){

document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="■■■" data-ad-slot="★★★"></ins>');

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

}

</script>

</div>

----------------------------------------------------------------------------------------------------------------------------

<div style="text-align:center;width:100%">

<!-- 모바일 상단 300 x 250 크기 -->

<script>

if(window.getWindowCleintWidth()<768){

document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-language="ko" style="display:inline-block;width:300px;height:250px" data-ad-client="■■■" data-ad-slot="★★★"></ins>');

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

}

</script>

</div>

<div style="text-align:center;width:100%"> =  div style 이 이번에는 다릅니다.

pc 쪽은 특정 위치를 잡고 정렬값을 줬다면 모바일은 광고를 본문 기준으로 잡아줘야 하기 때문이지요

if(window.getWindowCleintWidth()>=768)  if(window.getWindowCleintWidth()<768){

피씨버젼과 모바일만 적용하는 값을 보면

()>=768 , ()<768     ()안은 768이다 pc만 출력한다 ()안보다 <768 보다 작다 모바일만 출력한다 라고 보면 될것 같습니다.

고로 하단은 모바일 코드로 대체하셔도 됩니다만 이미 구글 애드센스 모바일용을 사용하고 있으시다면 pc에만 출력을 하시는 쪽으로 하시던가

다른 작은 모바일 광고로 대체해도 될거 같습니다. 

이제 깔끔하게 pc에서는 스크롤 따라다니는 광고가 나오고 모바일에서는 나오지 않게 되었다.

(물론 모바일에는 다른 광고로 추가하는 것도 가능

티스토리 스크롤 따라다니는 광고