티스토리 반응형 애드센스 광고 제대로 달기 (반응형 화면 문제 해결)

애드센스 광고를 달고 티스토리 블로그를 신나게 운영하는 중에 제보가 들어왔습니다.

모바일 사용자를 위한 배려를 해달라는 요청인 겁니다.

평소에도 모바일로 들어가서 블로그를 확인했던 적이 많이 있었기에 무슨일이지 하고 보내준 캡쳐 화면을 보니 문제가 좀 있는겁니다.

그래서 바로 확인에 들어갔습니다.

그런데 별 문제가 없는데 왜그러지 하며 생각하는데 폰마다 다를 수 있겠다는 생각이 들었습니다.

제가 G4를 사용하고 있는데 좀 더 최신기종은 화면 해상도도 더 높아지고 했으니 문제가 있을 수 있겠다는 생각이 들어서 확인에 들어갔습니다.

평소의 PC에서의 블로그 화면입니다.

우측 상단에 floating으로 광고를 띄워놨습니다.

PC에서는 별 문제가 없습니다.

일단 최신기종의 폰이 없는 관계로

User-Agent Switcher for Google Chrome 프로그램을 이용해서 모바일 화면으로 확인해봅니다.

https://chrome.google.com/webstore/detail/user-agent-switcher-for-g/ffhkkpnppgnfaobgihpdblnhmmbodake?hl=ko

아 이제 문제가 되는 화면이 보이네요 아래 화면이 문제가 된 모습입니다.

딱 봐도 문제가 뭔지 보이시죠?

광고가 우측 상단에 floating으로 떠있어야 하는데 우측 전체를 떡하니 다 차지하고 있는겁니다.

당연히 글자를 읽을 수가 없게 되어버립니다.

그런데 조금 더 브라우저 크기를 줄이니 또 정상의 모습이 됩니다. 제 경우는 이 정상이 된 모습을 봐왔던 것이고

특정 폰에서는 위에서 처럼 문제가 되는 화면이 나오고 있는 것입니다.

   

원인도 찾아보고 문제도 해결해 보도록 하겠습니다.

애드센스 플러그인입니다.

이걸 잘 사용을 해야 하는데요

사실 문제는 ....

티스토리 모바일 반응형 스킨(Square 스퀘어)을 사용하고 있고

여기에 플러그인에서 Google Adsense(반응형)을 함께 사용하면서 

우측 상단 floating으로 광고를 넣었기 때문에 발생하는 문제인 것입니다.

Google Adsense (반응형) 플러그인에는 광고가 우측상단 floating이 없습니다.

그래서 아래와 같이 코드를 삽입했었고, 성공적인 줄 알고 사용했더랬죠.

 대부분의 경우는 잘 되는 것 처럼 보였지만 문제가 발생하는 경우가 있다는 걸 오늘 처음 알게 되었네요

<p style="clear: both; float: right;">

애드센스 코드

</P>

티스토리 반응형 스킨에서 모바일로 모드 전환하는 크기가 있고 이보다 큰 상태에서는 

<p></P>를 <div>로 한 번 더 감싸도록 코드가 생성이 되더군요.

이 div태그가 생성되지 않도록 스킨을 수정해 보려고 하다가 실패

결국은 조금 귀찮음을 감수하더라도 

플러그인 설정에서 데스크탑 웹용과 모바일으로 나눠서 광고를 달아서 해결했습니다.

반응형으로 만들면 사이즈 정보관계 없이 다 광고가 들어가서 좋지만

데스크탑웹용과 모바일 용 플러그인에 반응형 광고를 달면 사이즈가 맞지 않다고 진행이 안됩니다.

그래서 직접 애드센스 페이지에서 광고단위에 들어가서

내 광고를 반응형이 아닌 각각 사이즈를 정해서 만들어서 넣어줘야 합니다. 

데스크탑웹용에는 권장 사이즈가 나와있어서 그에 맞도록 골라서 광고를 생성해서 넣어주고

모바일용에는 애드센스 페이지에 새광고를 만들 때 모바일에 최적이라고 표시된 광고사이즈로 선택하면 됩니다.

이 부분 때문에 좀 더 귀찮다고 표현한겁니다.

기존에 만들어둔 광고가 반응형밖에 없었기 때문에 

다 사이즈별로 광고를 새로 생성해야 했습니다.

자 이렇게 수정을 한 후 확인을 해보겠습니다.

역시 문제되었던 모바일 화면이 이제는 정상적으로 나와주고 있습니다.

    

티스토리 반응형 스킨을 잘 다루시는 분이라면

이렇게 광고를 나눠서 하지 않고

그냥 반응형 광고로 똑같은 효과를 낼 수 있는 분도 있을 것 같은데

그런 방법이 있다면 제보바랍니다.

애드센스 관련해서 새로 수정하거나 이벤트가 있을 때마다 이 카테고리에 포스팅 할 예정입니다.

그럼 이번 포스팅은 여기까지.

끝.