티스토리 클릭몬 삽입하기(반응형, 웹, 모바일)

티스토리 클릭몬 삽입하기(반응형, 웹, 모바일)

최근에는 블로그에 반응형 스킨을 사용하는 것이 대세가 된 모양입니다.

아직 저도 애드센스를 달지는 못했지만(2018년 7월 24일 기준), 

애드센스의 경우에는 반응형 스킨에 맞도록 쉽게 적용이 가능하다고 알려져 있습니다.

애드센스가 달리기 전에 많이 시험삼아 다는 것들 중에는 클릭몬(링크)과 애드핏(링크)이 있겠는데요, 

그 중 애드핏의 경우에는 큰 문제없이 알려진 방법, 즉 블로그 관리->스킨편집-> HTML에서 본문을 나타내는 아래의 부분을 전후하여

html 스크립트를 배열함으로써 광고 게제가 가능했습니다.

 

(티스토리 스킨편집에서 본문에 해당하는 부분)

<div class="area_view">

티스토리 클릭몬 삽입하기(반응형, 웹, 모바일)

최근에는 블로그에 반응형 스킨을 사용하는 것이 대세가 된 모양입니다.

아직 저도 애드센스를 달지는 못했지만(2018년 7월 24일 기준), 

애드센스의 경우에는 반응형 스킨에 맞도록 쉽게 적용이 가능하다고 알려져 있습니다.

애드센스가 달리기 전에 많이 시험삼아 다는 것들 중에는 클릭몬(링크)과 애드핏(링크)이 있겠는데요, 

그 중 애드핏의 경우에는 큰 문제없이 알려진 방법, 즉 블로그 관리->스킨편집-> HTML에서 본문을 나타내는 아래의 부분을 전후하여

html 스크립트를 배열함으로써 광고 게제가 가능했습니다.

 

(티스토리 스킨편집에서 본문에 해당하는 부분)

<div class="area_view">

</div>

그런데 클릭몬의 경우, 동일한 방법으로 웹용 광고는 게재가 가능했으나, 모바일용은 게재가 되지 않는 문제가 발생했습니다.

<div> </div>의 중간에도 넣어보고 뒤에도 넣어보았지만 모바일에서는 광고가 전혀 포함되지 않더군요.

물론 첫 번째 방법으로, 각 게시글 작성 시(수정 시) 우측 상단의 html버튼을 누르고 직접 광고 스크립트를 넣어주는 방법이 있습니다.

해당 방법으로는 저 역시 모바일에서도 원활한 게재가 가능했습니다.

다만, 해당 방법을 사용할 경우, 추후 해당 광고를 변경하거나 빼고자 할 때, 모든 게시글을 일일이 수정해야 하는 불편함이 있습니다.

이리저리 해보다가 웹용만으로 만족하고 모바일은 포기하려 마음을 놓으려 할 때 즈음, 해결책을 찾았습니다.

<반응형 스킨에 클릭몬 달기>

1. 클릭몬 가입을 이미 완료하셨다는 전제를 하겠습니다.

2. 아래의 스크립트를 메모장에 적어주세요. 혹은 클릭몬.txt 파일을 받으셔도 됩니다.

이 스크립트는 새롭게 만든 것이 아니라, 이미 클릭몬에서 만들어두었고, 스크립트를 복사하는 곳 맨 아래에서 확인할 수 있습니다.

<script type="text/javascript" >

if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))

{(function(){document.writeln(' 모바일용 아이프레임 방식 스크립트 삽입 ');})();}

else{(function(){document.writeln(' 웹용 아이프레임 방식 스크립트 삽입 ');})();}

</script>

클릭몬.txt

2. 클릭몬 웹페이지에 들어가 <MonAd 광고관리> 탭으로 들어갑니다.

3. 위의 이미지와 같이 웹용 광고에서 <아이프레임 방식> 스크립트를 복사하여 다음 위치에 삽입합니다.

따옴표는 남겨두시고 따옴표 안쪽에 넣으시면 됩니다.

아이프레임 방식이 아닌 자바스크립트 방식을 복사하시면 안됩니다.

<script type="text/javascript" >

if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))

{(function(){document.writeln(' 모바일용 아이프레임 방식 스크립트 삽입 ');})();}

else{(function(){document.writeln(' 웹용 아이프레임 방식 스크립트 삽입 ');})();}

</script>

4. 동일한 방식으로 모바일용 광고에서 <아이프레임 방식 스크립트를 복사하여 다음 위치에 삽입합니다.

마찬가지로 양 따옴표는 남겨두시고 그 안쪽에 복붙하시면 되겠습니다.

<script type="text/javascript" >

if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))

{(function(){document.writeln(' 모바일용 아이프레임 방식 스크립트 삽입 ');})();}

else{(function(){document.writeln(' 웹용 아이프레임 방식 스크립트 삽입 ');})();}

</script>

5. 모바일과 웹용 스크립트를 해당 위치에 복붙 하신 뒤 전체 스크립트를 복사합니다.

6. 티스토리 블로그관리에서 플러그인을 클릭합니다.

7.  구글 애드센스(반응형)을 클릭하시고 해당 스크립트를 복사 붙여넣기 하시면 웹과 모바일에 반응형으로 게시글 상단과 하단 광고가 삽입되는 것을 보실 수 있습니다.

사실 해당 기능은 클릭몬을 위한 것이 아니라 애드센스를 위한 플러그인인데요, 

놀랍게도 클릭몬의 스크립트를 사용하더라도 별 문제 없이 적용이 되는 것을 확인할 수 있었습니다.

개인적으로는 위의 스크립트를 블로그관리->스킨 설정에서 이리저리 끼워넣다가 계속 모바일이 출력이 안되어 반포기 중이었는데,

우연하게도 애드센스의 반응형 플러그인에 삽입하였더니 모바일과 웹 모두에서 정상 출력이 되었습니다.

혹여 해당 방법에 문제가 있거나, 더 좋은 방법을 아시는 분들은 알려주시면 감사하겠습니다.

빨리 애드고시를 통과해서 애드센스의 몫을 애드센스에게 돌려주는 날이 얼른 왔으면 좋겠네요.

재밌게 읽으셨다면 공감버튼을 눌러주세요 ♡

</div>

그런데 클릭몬의 경우, 동일한 방법으로 웹용 광고는 게재가 가능했으나, 모바일용은 게재가 되지 않는 문제가 발생했습니다.

<div> </div>의 중간에도 넣어보고 뒤에도 넣어보았지만 모바일에서는 광고가 전혀 포함되지 않더군요.

물론 첫 번째 방법으로, 각 게시글 작성 시(수정 시) 우측 상단의 html버튼을 누르고 직접 광고 스크립트를 넣어주는 방법이 있습니다.

해당 방법으로는 저 역시 모바일에서도 원활한 게재가 가능했습니다.

다만, 해당 방법을 사용할 경우, 추후 해당 광고를 변경하거나 빼고자 할 때, 모든 게시글을 일일이 수정해야 하는 불편함이 있습니다.

이리저리 해보다가 웹용만으로 만족하고 모바일은 포기하려 마음을 놓으려 할 때 즈음, 해결책을 찾았습니다.

<반응형 스킨에 클릭몬 달기>

1. 클릭몬 가입을 이미 완료하셨다는 전제를 하겠습니다.

2. 아래의 스크립트를 메모장에 적어주세요. 혹은 클릭몬.txt 파일을 받으셔도 됩니다.

이 스크립트는 새롭게 만든 것이 아니라, 이미 클릭몬에서 만들어두었고, 스크립트를 복사하는 곳 맨 아래에서 확인할 수 있습니다.

<script type="text/javascript" >

if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))

{(function(){document.writeln(' 모바일용 아이프레임 방식 스크립트 삽입 ');})();}

else{(function(){document.writeln(' 웹용 아이프레임 방식 스크립트 삽입 ');})();}

</script>

클릭몬.txt

2. 클릭몬 웹페이지에 들어가 <MonAd 광고관리> 탭으로 들어갑니다.

3. 위의 이미지와 같이 웹용 광고에서 <아이프레임 방식> 스크립트를 복사하여 다음 위치에 삽입합니다.

따옴표는 남겨두시고 따옴표 안쪽에 넣으시면 됩니다.

아이프레임 방식이 아닌 자바스크립트 방식을 복사하시면 안됩니다.

<script type="text/javascript" >

if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))

{(function(){document.writeln(' 모바일용 아이프레임 방식 스크립트 삽입 ');})();}

else{(function(){document.writeln(' 웹용 아이프레임 방식 스크립트 삽입 ');})();}

</script>

4. 동일한 방식으로 모바일용 광고에서 <아이프레임 방식 스크립트를 복사하여 다음 위치에 삽입합니다.

마찬가지로 양 따옴표는 남겨두시고 그 안쪽에 복붙하시면 되겠습니다.

<script type="text/javascript" >

if (/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))

{(function(){document.writeln(' 모바일용 아이프레임 방식 스크립트 삽입 ');})();}

else{(function(){document.writeln(' 웹용 아이프레임 방식 스크립트 삽입 ');})();}

</script>

5. 모바일과 웹용 스크립트를 해당 위치에 복붙 하신 뒤 전체 스크립트를 복사합니다.

6. 티스토리 블로그관리에서 플러그인을 클릭합니다.

7.  구글 애드센스(반응형)을 클릭하시고 해당 스크립트를 복사 붙여넣기 하시면 웹과 모바일에 반응형으로 게시글 상단과 하단 광고가 삽입되는 것을 보실 수 있습니다.

사실 해당 기능은 클릭몬을 위한 것이 아니라 애드센스를 위한 플러그인인데요, 

놀랍게도 클릭몬의 스크립트를 사용하더라도 별 문제 없이 적용이 되는 것을 확인할 수 있었습니다.

개인적으로는 위의 스크립트를 블로그관리->스킨 설정에서 이리저리 끼워넣다가 계속 모바일이 출력이 안되어 반포기 중이었는데,

우연하게도 애드센스의 반응형 플러그인에 삽입하였더니 모바일과 웹 모두에서 정상 출력이 되었습니다.

혹여 해당 방법에 문제가 있거나, 더 좋은 방법을 아시는 분들은 알려주시면 감사하겠습니다.

빨리 애드고시를 통과해서 애드센스의 몫을 애드센스에게 돌려주는 날이 얼른 왔으면 좋겠네요.

재밌게 읽으셨다면 공감버튼을 눌러주세요 ♡