안녕하세요 오늘 소개해드릴 내용은 애드센스 광고를 메인 글 목록 사이에 추가하는 방법을 소개해드리려고합니다.
애드센스 광고 승인을 받고 광고를 넣기위해 관련글들을 찾아보고 효율적으로 광고를 넣는 방법들을 알아보다가
불편한 점이 티스토리에서 제공해주는 애드센스 플러그인을 통한 광고 삽입에 대한 정보글들은 많지만,
플러그인을 통한 광고삽입 정보글들에 비하여 티스토리 스킨 html 편집을 통한 광고 삽입에 대한 정보 들이 많지 않아
티스토리 스킨 수정 관련 방법들을 알아보며 어려움이 있어
이번 기회에 제가 경험하고 문제가 되었었던 과정들을 소개하고 자신의 티스토리 메인 글 목록에 애드센스 광고를 삽입하는 방법을 설명해드리겠습니다.
우선 티스토리에 로그인 하시고 관리 페이지로 들어가 줍니다
좌측 하단에 꾸미기 메뉴에 스킨편집으로 들어가주세요
스킨편집 페이지에 들어가시면 오른쪽 상단에 html 편집이라는 버튼을 눌러주시게되면
아래와 같이 자신의 티스토리 html 소스를 직접 수정할 수 있습니다!
html 에 <head> 라고 써진 태그가 있습니다
html 태그는 시작과 끝이 있으며 안에 내용을 넣을수 있는데요
시작할때 <head> 로 시작을 하면 끝은 </head> 이렇게 써주는건데요
헤드태그 안에 자바스크립트라는 객체기반의 프로그래밍 언어를 아주 간단하게 사용해보도록 하겠습니다.
자바스크립트는 <script></script> 로 사용하실수 있는데요 스크립트라는 태그를 썻죠?
이 스크립트 태그 안에다가 <script>var counterbanner = 1;</script>
이렇게 적어주시면 var 이라는 문구는 변수를 선언 할때 쓰이는 문구인데요
위와 같이 작성하시면 counterbanner 이라는 변수를 생성하고 값을 1로 지정해주겠다 라고 선언한게 됩니다.
변수명은 꼭 counterbanner 로 하지 않으셔도 되니 자신이 편한 변수로 적어주셔도 상관없습니다!.
헤드 태그에 counterbanner =1 이라는 변수를 선언해 주셨다면 이제 글 목록을 작성해주는 태그부분을 찾아야합니다
제가 사용하고있는 whatever 스킨의 경우 <s_index_article_rep> 이라는 태그부분부터 글 목록 작성이 되는 구조로 되어있더라고요
<s_index_article_rep> 태그가 시작되고 바로밑에
<script>
counterbanner++;
</script>
<script>
if (counterbanner % 3 == 0) {
document.write('<div class="post-item\"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"><\/script><ins class="adsbygoogle" style="display:block" data-ad-client="자신의 구글 애드센스 클라이언트 데이터 정보" data-ad-slot="자신의 데이터베이스 슬롯정보" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script></div>');
};
</script>
* script 가 끝나는 태그부분에 \ 가 들어간걸 확인 하실 수 있는데 이부분도 똑같이 작성해주세요
위와 같이 적어주시면 되는데 주의 하셔야 할 점으로는 애드센스 소스코드를 복사하고 붙여넣을때에 애드센스 소스코드를 띄어쓰기 없이 모두 붙여서 작성하셔야 합니다.
위 이미지를 참고하시고 write(' ') 안에 글씨들이 빨간색으로 바뀌게 되면 성공한거에요
띄어쓰기가 포함되어 있으시면 if 라고 시작해준 조건문이 작동하지않게됩니다!
이제 코드에 대한 설명을 하겠습니다.
counterbanner++; 라고 적어준 부분은 변수값을 1씩 증가시켜준다 라고 해석할 수 있는데
글 하나마다 카운트를 하나씩 센다는 의미입니다 이어서 if (counterbanner % 3 == 0) { 은 만약 카운트를 3의 값으로 나누었을때 나머지가 0이면
if () { 광고 } 안에 내용을 실행시킨다는 의미입니다. 계속해서 document.write(' ') 은 ' ' 안에 입력한 내용을 html로 작성한다는 의미입니다.
글이 많이 길어진것같네요 위와같이 적용해주셨다면 위와같이 적용된것을 볼 수 있습니다!
감사합니다
질문하실 부분이나 지적하실점 또는 조언이 있으시면 댓글남겨주세요
도움이 되셨다면
공감 한번씩 부탁드립니다.