필자의 경우 현재 블로그에 모바일과 PC화면 모두에서 보여질수 있게 본문 중간에 300X250 애드센스 광고 단위를 삽입하고 있습니다. 티스토리에서 플러그인 형태로 모바일에 애드센스를 삽입할수 있게 되었지만 아무래도 본문내 삽입보다는 적절한 위치나 레이아웃에 제약이 있는 편이기 때문입니다.
글쓴이의 경우는 PC와 모바일 모두에서 보이게 하도록 삽입하고 있지만 경우에 따라 애드센스 광고를 모바일에서만 보여줘야 할 필요성이 있을 수도 있습니다. 또는 PC에는 아무래도 효과가 더 큰 336 X 286 단위를 보여주고 모바일에서는 더 작은 단위를 보여 주고 싶을 수도 있겠지요.
종종 자주 변경되는 구글 애드센스 정책에 불안감도 있는 부분입니다. 만약 내일이라도 정책의 변경이 있다면 수백개의 글을 일일이 수정해야 할테니까요. 그러다 보니 여러가지 방법을 고민해보고 찾아왔습니다.
현재로써 가장 좋은 방법은 단비스님의 블로거에서 소개한 JS(Java Script 파일)을 이용한 방법이 가장 최선의 방법인것 같습니다.
단비스님의 글 : 블로그의 반응형 광고 단위를 스킨에 넣는법
구글 애드센스 수표
이 방법은 여러가지 응용이 가능한 방법입니다. 언젠가는 구글 어날리스틱스는 티스토리 모바일에 플러그인이 제공되지 않을까 해서 넣고 있지는 않은데 모바일 유입비중에 50%에 육박하는 요즈음이라면 모바일에 구글 어날리스틱스를 넣는 방법으로 이용도 가능해 보입니다. 단비스님이 참조한 남무님의 다른글에서도 소개하였듯이 모바일에만 적용되는 CSS 파일을 넣어서 처리하는것도 가능합니다.
남무님의 글 : 티스토리 모바일에 스타일을 적용해 보자
먼저 아래와 같은 JS 파일을 메모장으로 하나 작성합니다.
MobileGoogleAdSample.js
(function() {
document.writeln('<CENTER>');
document.writeln('<br />');
document.writeln('<SC'+ 'RIPT type=text/javascript>');
document.writeln('<!--');
document.writeln('google_ad_client = "본인의 애드센스 클라이언트 ID";');
document.writeln('google_ad_slot = "본인의 애드센스 슬롯";');
document.writeln('google_ad_width = 300;');
document.writeln('google_ad_height = 250;');
document.writeln('//-->');
document.writeln('</S'+'CRIPT>');
document.writeln('<S'+'CRIPT type=text/javascript src="https://pagead2.googlesyndication.com/pagead/show_ads.js">');
document.writeln('</S'+'CRIPT>');
document.writeln('</CENTER>');
document.writeln('<P> </P>');
})();
아주 기본적인 자바 스크립터인테 해당 단위를 모바일에서만 보이고 싶다면 아래와 같이 해주면 됩니다.
(function() {
var currentM;
currentM = location.href.split("/")[3];
if(currentM=='m'){
document.writeln('적용할 애드센스 코드 또는 CSS');
...}
})();
if(currentM=='m'){ <- 이부분이 모바일 url로 접속시에 구분하여 처리하는 방식 입니다.
JS 파일을 작성을 하셨으면 관리자->HTML/CSS 편집 에서 파일 업로드를 선택한후 작성한 JS파일을 추가로 업로드 합니다. 업로드 후에는 해당 파일을 오른쪽 클릭후 속성 보기를 하시면 자신의 블로그에 맞는 주소를 확인할수 있습니다.
이 방식도 결국 본문에도 이 JS파일을 호출하는 코드를 삽입하긴 해야합니다. 다만 혹여 애드센스 단위를 변경할 일이 생기거나 정책 변경이 생겨 삭제하여야 할일이 생겨도 JS 파일 하나만 내용을 변경하거나 삭제하면 됩니다.
<!-- 추후 변경이나 삭제를 대비하여 애드센스를 JS로 삽입 -->
<DIV style="MARGIN: auto; WIDTH: 300px">
<SCRIPT type=text/javascript src="https://cfs.tistory.com/custom/blog/블로그마다다른주소/skin/images/MobileGoogleAdSample.js"></SCRIPT>
</DIV>
해당 방식 역시 본문내에 코드를 일일이 삽입해야 된다는 점에서 기존과 큰 변화가 없을수도 있지만 JS 파일하나의 수정으로 일일이 모든 포스팅을 수정할 필요가 없어진다는 분명한 장점이 있습니다.
그러나 저나 저도 과거 포스팅을 모두 수정해야 할텐데 엄두가 안나는군요 시간이 나는대로 하나씩 수정해야 겠습니다.
해당 방법을 고민하고 먼저 적용하고 계신 단비스님, 남무님께 감사드립니다. 두분의 수고는 이런것이야 말로 재능기부가 아닌가 하는 생각이 들게 합니다.
2018.10월 추가 -현재는 애드센스 자동 광고 기능을 사용하고 있어 해당 기능은 사용하지 않고 있습니다.
