티스토리의 광고 정책 때문에 구글 애드센스 광고 연동, 본문 내 자동 삽입 기능을 껐을 때 사용하는 방법이다.
수동으로 넣는 방법은 광고 스크립트 서식을 사용하여 넣는 것인데, 번거롭고 이미 작성된 글은 수정을 해야 한다.
제목1. 자동으로 본문 광고 삽입
자동으로 본문에 광고를 삽입해보자.
제목2. 구글 애드센스에서 광고 단위를 만든다.
광고 형식은 인아티클 광고로 선택한다.
예제 그림과 같이 본문 내에 광고가 삽입된다.
페이지 우측의 저장 및 코드 생성 버튼을 누르고 광고 코드를 복사한다.
제목3 테스트
내용
2. 스킨 HTML에 코드를 추가한다.
티스토리 스킨 편집에서 HTML 탭로 이동한다.
임의의 위치에 복사한 코드를 붙여넣고 <div>로 감싼다.
고유 요소이므로 id를 설정한다.
<div id="ad-inarticle">
... 구글 광고 코드
</div>
3. jQuery 스크립트 코드를 추가한다.
광고 코드를 본문 내로 이동시키는 코드를 추가한다.
page ready 또는 on load 이벤트 조건을 생략했으므로 </body> 위에 추가한다.
... 생략
<script>
// 광고를 본문 내로 이동
if( $(".entry-content h2").length > 1) { // 제목1 2개 이상일 때
if( $(".entry-content h2 h3").length > $(".entry-content h2") ){ // 제목2가 제목1 보다 많을 때
$(".entry-content h2 h3").last().before($("#ad-inarticle")); // 마지막 제목2 전에 삽입
}
else {
$(".entry-content h2:eq(1)").before($("#ad-inarticle")); // 제목1 두번째 전에 삽입
}
}
else if( $(".entry-content h2").length > 0) { // 제목1 1개 이상일 때
$(".entry-content h2:eq(0)").after($("#ad-inarticle"));
}
else if( $(".entry-content h2").length == 0) { // 제목1 0개일 때
if( $(".entry-content h3").length >= 1) {
$(".entry-content h3").before($("#ad-inarticle"));
}
else {
$(".entry-content p").first().after($("#ad-inarticle"));
}
}
</script>
</body>제목이 여러개 있는 경우와 없을 때로 나누어 광고 코드를 이동 시킨다.
위 코드는 샘플이므로 if 조건은 블로그에 맞게 원하는대로 편집한다.
if 조건이 복잡해서 싫다면, 아래 글을 참고하여 랜덤 위치에 광고를 넣도록 한다. 👍
(jQuery) 블로그 본문 중 랜덤 위치에 광고 삽입하기
