티스토리 애드센스 수익 일치하는 콘텐츠 서식 안 쓰고 자동으로 넣기
티스토리 수익 탭 연동 이후 본문 바로 아래에 일치하는 콘텐츠를 서식 없이 자동으로 삽입하는 방법을 알려드리겠습니다.
본 글은 이전 글인 티스토리 애드센스 수익 연동한 뒤에도 상단 광고 2개 넣는 방법의 덧글에서 받은 피드백을 바탕으로 작성하게 되었습니다. 하단 광고를 카테고리 글 목록 아래가 아니라 본문 끝과 공감 버튼 사이에 넣고싶다는 의견이 있었습니다. 다행히 해결책을 찾았습니다.
애드 센스 블로그 수익 자동화를 위한 방법을 하단에서 바로 확인해 주세요!
애드 센스 수익
애드 센스 블로그
21년 1월 8일 내용 추가
오늘 확인해 보니 티스토리-관리자-애드센스 페이지에서 하단 광고를 넣었을 때, 구독 버튼 위에 광고가 달리고 있습니다. 잠수함 업데이트가 있었던 걸로 추정됩니다.
그러니 광고 코드를 이용해 클릭률 등의 데이터를 수집하지 않으실 분이라면 티스토리 애드센스 탭을 활용해서 하단 광고를 넣으시면 되겠습니다.
코드를 직접 심으면 2가지 장점이 있습니다.
1. 애드센스 보고서에서 본인이 넣는 광고의 조회율, 클릭률, 수익률을 체크할 수 있다.
2. 광고 노출 속도가 빠르다.
여기서 노출 속도는 상단 광고의 경우 클릭률에 영향을 미치지만, 하단 광고는 사실 큰 차이는 없습니다. 다만 보고서에서 데이터를 수집하고 체크할 수 있다는 점은 중요합니다. 하단광고의 종류에 따라, 개수에 따라, 사이즈에 따라 수익 변화를 테스트 하고 싶다면 코드로 삽입할 수 밖에 없습니다.
이상의 상황을 확인하신 뒤 선택하시면 되겠습니다.
티스토리 수익 탭 업데이트 이후로 플러그인이 사라져서 많은 분들이 불편을 겪고 있습니다. 가장 불편한 점은 기존에 플러그인으로 본문 하단에 삽입했던 일치하는 콘텐츠일 건데요, 이번에 업데이트 된 티스토리 애드센스에서는 html 편집 기능이 없어서 난감할 겁니다.
그래서 우선 궁여지책으로 광고 코드를 서식으로 만들어서 글 하단에 직접 삽입하는 방식을 사용하고 계셨을 텐데요. 문제는 해결할 수 있겠지만 매번 글을 쓸 때마다 일일이 집어넣는 건 너무 번거롭습니다. 그래서 저는 기존 플러그인의 방식처럼 한번 설정하면 자동으로 모든 글에 일치하는 콘텐츠 광고를 넣는 방법을 알려드리겠습니다.
html 코드가 어색하시다면 제가 하는 과정을 따라하기만 하셔도 좋습니다. 그러면 시작하겠습니다.
목차
1. 애드 센스 수익 일치하는 콘텐츠 자동 삽입하기
문제 상황과 최종 목표
제가 이전 글에서 알려드렸던 방법대로 article_rep_desc과 바로 아래의 </div> 태그 사이에 광고 코드를 집어넣었을 경우, 광고 위치는 아래와 같이 설정됩니다. 본문이 끝나고, 공감 버튼이 나오고, 그 아래에 카테고리 다른 글이 나온 다음에 광고가 나옵니다.
▼ 왜 이런 현상이 발생하는 걸까요? 그 이유는 공감 버튼과 카테고리 다른 글이 본문에 포함된 채 티스토리 서버에서부터 터 로드되기 때문입니다. 서버 상에서부터 날아오는 코드들이라 스킨 편집 상에서는 손을 댈 수가 없어서 난감했는데 문득 아이디어가 떠올랐습니다. '광고가 공감 버튼 위에 달라붙도록 설정해버리면 되지 않을까?'
▼ 여러 차례 시행착오를 겪은 후 얻은 결과입니다. 그리고 이 글의 목표이기도 합니다. 본문 글 아래, 공감 버튼 위에 광고가 위치한 모습입니다. 여기서 포인트는 이 광고는 서식을 사용해서 넣은 게 아니라는 점입니다. 일일이 코드를 입력하지 않아도 자동적으로 모든 글에 아래처럼 광고가 삽입되어 있습니다.
2. 티스토리 수익 연동 하단 광고 끄기
가장 먼저 해야 할 일은 티스토리 수익 탭에서 하단 광고를 끄는 겁니다. 광고가 같은 위치에서 연달아 송출되지 않도록, 그리고 테스트 할 때 방해되지 않도록 없애 줘야 합니다.
▼ 블로그 관리자 페이지에서 수익 탭의 애드센스 관리에 들어가 주세요. 그리고 본문 하단 광고를 아래 이미지와 같이 꺼 주고 변경사항 저장을 클릭해 주세요.
3. 준비물 1
아래의 txt 파일을 받아 주세요.
▼ txt 파일 내용은 아래와 같습니다.
<script>
$( document ).ready( function() {
$( ".container_postbtn" ).before( $( ".bottomadsense" ) );
} );
</script>
<div class="bottomadsense">
<!-- 본문 하단 사각 반응 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-본인 애드센스 계정 pub 코드"
data-ad-slot="본인 애드센스 광고 코드"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
4. 코드 편집하기
▼ 아래 이미지는 위의 코드를 Visual Studio Code라는 코드 에디터에 그대로 복사한 모습입니다. 개인적으로 티스토리 스킨 편집 기능이 불편해서 이렇게 코드 에디터에서 편집한 다음 티스토리에 붙여넣는 방식을 쓰고 있습니다. 하지만 단순히 코딩이 조금 더 편리할 뿐입니다. 메모장이나 티스토리 스킨편집 화면 상에서 작업하셔도 무방합니다.
▲ 위의 1번 박스는 광고를 공감 버튼 위에 위치하도록 명령하는 코드고, 아래 2번 박스는 공감 버튼 위에 들어갈 광고 코드입니다. 1번 박스부터 뜯어보겠습니다.
▲ 1-1. 공감 버튼을 지정하는 항목입니다. (손 댈 필요 없습니다.)
1-2. 공감 버튼 앞에 광고를 삽입하겠다는 말입니다.
1-3. 삽입할 광고를 지정하는 항목입니다.
여기서 1-1, 1-2는 고정된 값으로 손 댈 필요 없습니다. 하지만 1-3의 경우 본인이 임의의 값을 설정해도 좋습니다. 예를 들어 1-3을 $( ".twice_sana" ) 라고 해도 상관없습니다. 삽입할 광고에도 똑같이 "twice_sana"라는 이름만 지어주면 됩니다. 이제 광고 코드를 손보겠습니다.
▼ 먼저 맨 윗줄의 <script ~~~~ > </script> 부분을 날려주겠습니다. 날리지 않아도 상관은 없지만, 불필요한 부분이라서 저는 걷어내겠습니다.
▼ 다음은 광고 코드 위아래를 <div> 태그로 감싸줄 겁니다.
위에는 <div class="bottomadsense">
아래에는 </div>라고 입력해 주세요.
참고 1) 앞에서 1-3 부분에 ".twice_sana"라고 입력하셨다면, 여기에서 윗부분에도 <div class="twice_sana"> 라고 입력해 주셔야 합니다. 하나는 앞에 점이 있고, 하나는 점이 없다는 점을 꼭 확인해 주세요.
참고 2) 본 예시는 반응형 디스플레이 광고 코드입니다. 하지만 일치하는 콘텐츠의 코드도 방법은 동일합니다. 겉을 <div> 태그로 묶어주고, class 이름을 부여해 주시면 됩니다.
▼ 작업을 마치셨으면 아래와 같은 모습이 되어 있을 겁니다.
5. 티스토리 스킨에 삽입하기
▼ 이제 앞에서 만들어둔 코드를 티스토리 스킨에 삽입할 차례입니다. 관리자 페이지 - 스킨편집에서 알맞은 article_rep_desc를 찾아야 하는데요, 찾는 방법은 이 글의 3번 항목을 꼭 참고해 주세요.
알맞은 article_rep_desc를 찾으셨다면 바로 아래에 </div> 태그도 보이실 겁니다. 화살표가 가리키는 것처럼 둘의 사이에 만들어둔 코드를 붙여넣기 해 주세요.
저는 편의 상 코드 에디터 상에서 작업했지만, 실제로는 티스토리 스킨편집 html에서 붙여넣기 해 주셔야 합니다! 붙여넣기가 끝났다면 저장 버튼을 눌러 주세요.
6. jQuery 스크립트 추가하기
저장 버튼을 누른 뒤 바로 광고가 정상적으로 송출된다면 성공입니다. 축하합니다! 하지만 광고가 제대로 나오지 않는 분들도 계실 텐데요, 그렇다면 아래의 3가지를 순서대로 체크해 보세요.
첫째, 오타를 확인해 주세요. 온점 하나, 대소문자 하나만 틀려도 오류가 생길 수 있습니다.
둘째, 블로그 스킨에 jQuery 스크립트가 없어서일 수도 있습니다. jQuery 스크립트 설정 방법은 아래 JB팩토리님의 글을 참고해 주세요.
티스토리 강좌 / jQuery 사용하는 방법
티스토리에서 jQuery를 사용하는 방법은 두 가지가 있습니다. jQuery를 새로 연결하는 방법 원하는 버전의 jQuery를 사용하는 방법입니다. jQuery를 연결하는 위치 HTML의 어떤 위치에 연결해도 작동하
www.jbfactory.net
이 글대로 적용했는데도 안된다면?
셋째, 올바른 article_rep_desc 아래에 붙여넣었는지 확인해야 합니다. 스킨 편집에서 article_rep_desc를 검색해 보면 한 개가 아니라 2개, 3개가 있을 겁니다. 여러 개들 중에 어느 게 진짜인지 확인하기 위해서 하나씩 코드를 넣어서 테스트 해 보세요.
이 글이 도움이 되었다면 아래 공감 버튼 한번씩 부탁드립니다! :) 긴 글 읽어주셔서 감사합니다.
'애드센스' 카테고리의 다른 글
| 클래스 101 리남 내 350,000원은 공중분해? (1) | 2020.10.29 |
|---|---|
| 티스토리 애드센스 상단 광고 2개 자동으로 넣는 방법-4step! (27) | 2020.10.28 |
| 티스토리 애드핏 연동하기 2단계면 끝! (1) | 2020.10.27 |
| 티스토리 애드센스 연동하기 2단계면 끝! (2) | 2020.10.27 |
| 태그매니저 IP 수집 설정 이후 이탈률 감소 문제 해결 방법 (3) | 2020.10.16 |
댓글