프로그래밍/블로그

[티스토리] 모바일용 애드센스 자동숨김 간단하게 하기

당근천국 2013. 4. 17. 15:00

일단 티스토리 본문에 모바일용 광고를 넣는 방식은 몇가지가 있죠.

 

'본문에 자바스크립을 넣는 방법', '전체 html에 자바스크립을 넣는 방법', 'css에 무조건 적용되는 코드 넣는 방법' 등등...

 

처음에는 별거 아니 겠다싶어 몇가지 코드를 만들어 테스트해보고 안되길례 검색해보니 저와 같은 생각하신 분들이 있었군요 ㅎㅎㅎ

그런데 검색결과를 보고 대부분 제가 직접 해봤던 것들이라 안되는 코드인데 올라와 있는 것들도 있었습니다.

'크로스브라우징 테스트'를 하지 않아서 인듯 하네요-_-;

 

그나마 작동할 것 같은 코드들은 너무 난잡해서 제가 만들어서 정리해 드립니다.

 

1. 코드 추가

Html/Css 수정으로 가서 아래 코드를 "</head>" 위에 넣습니다.

 

<script type="text/javascript">
	var ad_Mobile = 1;
</script>

 

 

 

 

그 다음 아래 코드를 애드센스가 삽입될 위치에 넣어 줍니다.

 

<SCRIPT type=text/javascript>

</SCRIPT>

 

 

 

준비 끝

 

테스트

이제 테스트를 해봅시다.

 

광고 시작
광고끝

 

테스트 페이지(클릭)

 

티스토리용 모바일 페이지는 주소뒤에 /m을 추가하여 확인 할수 있습니다.

 

 

 

모바일 페이지에서는 잘 보입니다!

 

모바일 페이지에서 잘 보이는 것을 확인 했으면 이 글의 하단에 애드센스 광고가 잘 나오는지 확인 해보세요.

잘 나오고 있습니다.

 

2.이렇게 해야 하는 이유

이미 많은 분들이 티스토리 모바일 페이지에 광고를 띄우는 방법을 사용하시고 계십니다.

그런데 애드센스 정책때문에 한페이지에 광고가 3개 이하로만 넣을 수 있어 모바일광고를 임의로 추가해 두면 기존 광고가 안보이는 현상이 일어납니다.

그래서 많은 분들이 여러가지 방법으로 코드를 만들어 쓰시고 계시죠.

 

2-1.풀브라우징 html과 모바일용 html을 다르다.

그런데 여기서 집고 가야할 점은 브라우저 판별은 이미 티스토리에서 하고 있습니다.

우리는 그걸 갔다가 쓰면 됩니다!

 

티스토리의 동작방식을 잘 생각해보면 관리자에서 수정가능한 html/css는 풀브라우징용이라는 것입니다.

모바일용 html/css가 따로 있는데 우리가 수정할 수가 없는 것 뿐이죠.

 

결국 관리자에서 적용한 코드는 풀브라우징에서만 작동하기 때문에 관리자에서는 무조건 모바일용 코드를 가리기위한 스크립을 동작 시키면 됩니다.

어차피 모바일에서는 그 코드가 있는 html자체를 사용하지 않으니까요.

판단 하고 자시고도 없습니다 ㅎㅎㅎ

 

이걸 응용하면 반대로 풀브라우징에서는 나오고 모바일용에서는 안나오게도 할수 있습니다.

차암~ 쉽조잉

 

그렇니 지금 티스토리의 html이 먹혔는지 안먹혔는지를 판별하기 위한 변수만 있으면 됩니다.

우리는 이 변수를 체크하면 되죠.

(참고 : [Javascript] 변수가 존재 하는지 확인하는 방법)

 

2-2.다른 방법들의 문제점

다른 분들이 사용하신 방법도 작동을 해야 맞는 겁니다 ㅡ.-;;

원래 맞는 방법이지만 동작을 안하니 우회를 해야죠;;;

 

익스플로러의 경우 어떤식으로든 코드상에 자바스크립트가 있으면 먼저 실행을 하는 건지... css나 다른 방식으로 교체를 하면 정상작동을 하지 않습니다 ㅡ,.ㅡ;;;

그러니 익스플로러가 미리 자바스크립트를 호출하지 않도록 동적으로 자바스크립트를 불러와서 사용하는 것이죠.

 

아마 다른 방법들도 더 있을텐데 일단 제가 찾은 방법중 가장 간단한 방법인것 같습니다. ㅎㅎㅎ