티스토리 광고 자동 설정하기, 애드센스 수동광고 사용 안 하기, 광고 신경 안 쓰고 글쓰기

01

of 13

글 이력

이 글 (2023.12)은 티스토리에 애드센스 자동광고를 넣는 방법입니다. 워드프레스에 애드센스 자동광고를 넣는 방법은 아래 글 목록에서 선택해주세요.

02

of 13

티스토리 광고 자동 설정하기

티스토리 블로그는 단순히 워드프레스의 보조 역할을 하는 블로그로 외부 유입용 블로그다. 아무래도 다음 검색에 워드프레스가 잘 검색되지 않기 때문에 티스토리 블로그를 이용해서 유입시킬 목적이다.

단순히 워드프레스의 요약 글만 작성하기 때문에 최대한 빠르게 작성해야 하고 머무르는 시간이 짧아야 한다. 수동으로 애드센스 광고를 넣는 시간도 아까워서 미리 모든 광고를 html을 통해서 자동으로 노출되게 할 생각이다.

※ 티스토리 설정의 수익 – 애드센스 관리 – 광고 설정은 모두 사용 안함

03

of 13

홈 화면 티스토리 광고가 들어가는 위치

사용하는 스킨은 북클럽 스킨이다. 홈 화면은 왼쪽에 사이드바가 있고, 오른쪽에 포스팅 목록 10개를 표시하게 했다.

광고는 사이드바에 2개, 목록 상단에 1개, 목록 중간에 4개, 하단에 1개가 들어간다. 정확한 위치는 아래 이미지에 표시했다.

04

of 13

포스팅 화면 티스토리 광고가 들어가는 위치

사용하는 스킨은 북클럽 스킨이다. 홈 화면과 같은 구조로 되어있다. 다른 점은 오른쪽에 글 목록이 아닌 글 내용이 들어간다.

광고는 사이드바에 2개, 글 상단에 1개, 글 제목 (H1) 아래 1개, 소제목 (H2) 아래 1개, 소제목 (H3) 위 1개, 글 하단에 1개, 티스토리 하단에 1개가 들어간다. 정확한 위치는 아래 이미지에 표시했다.

05

of 13

① ② 사이드 광고 설정

사이드 광고는 배너출력 플러그인을 활성화한 후 티스토리 사이드바에 광고 코드를 추가하면 된다. 만약 멀티 광고를 사용한다면 가로 사이즈를 230으로 설정해야 광고가 잘 표시된다.

06

of 13

③ 목록 상단 광고

아래 이미지의 위치에 본인이 사용할 광고 코드를 넣어주면 된다.

07

of 13

④ 인피드 광고

홈 화면 목록 사이사이에 4개의 광고, 포스팅 화면 상단에 1개의 광고가 표시된다. 인피드 광고의 경우 PC와 모바일에 표시되는 게 다르므로 애드센스에서 인피드 광고를 생성할 때 PC용과 모바일용 두 가지를 만들어야 한다. 우선 대충 만들어서 넣고, 표시된 광고를 보면서 이미지 사이즈 조절하면 된다.

제 티스토리의 경우 PC용은 이미지 사이즈 21%, 모바일용은 이미지 사이즈 30% 정도일 때 썸네일 이미지 사이즈와 거의 같아졌다. ​

아래 코드를 </head> 위에 넣는다.

※ ★ ● ■는 본인이 만든 PC용, 모바일용 인피드 광고 코드를 보고 넣으면 된다.

<!-- 인피드 광고 -->
<script>
	var chInfeed = 0;
	var chInfeedAdSenseShow = 0; // 0 = 인피드광고 적용, 1 = 인피드광고 비적용
	var chInfeedAdSenseInsert = 3; // 목록 3개당 광고수 1개 적용
	var chInfeedAdSense = '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="★" data-ad-client="●" data-ad-slot="■"></ins>';
	var chInfeedAdSense_2 = '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="image-side" data-ad-layout-key="★" data-ad-client="●" data-ad-slot="■"></ins>';
	</script>
<!-- 인피드 광고 -->
Code language: HTML, XML (xml)

아래 코드를

<!-- 인피드 광고 시작 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<script>
	if (chInfeedAdSenseShow == 0) {
		if ((chInfeed++) % chInfeedAdSenseInsert == 0) {
			if(window.innerWidth > 800) {
				document.write(chInfeedAdSense);
			}
			else {
				document.write(chInfeedAdSense_2);
			}
			(adsbygoogle = window.adsbygoogle || []).push( {
				});
		}
	}
	</script>
<!-- 인피드 광고 끝 -->
Code language: HTML, XML (xml)

아래 이미지 위치에 넣는다.

08

of 13

⑤ 하단 광고

아래 이미지의 위치에 본인이 사용할 광고 코드를 넣어주면 된다.

09

of 13

⑥ 제목 h1 아래 광고

아래 이미지의 위치에 본인이 사용할 광고 코드를 넣어주면 된다. (저 같은 경우 일부러 큰 광고를 넣을려고 인피드 광고를 넣었습니다.)

※ 광고 아래 목차 같은 경우는 직접 만들어야 합니다.

10

of 13

⑦ 소제목 h2 아래 광고

소제목 h2 태그 아래에 광고를 넣는 방법이다.

요약글만 간단하게 작성하는 티스토리라 h2 태그는 포스트에 1개만 들어가게 작성한다. 그래서 첫 번째 h2 태그 (i == 0) 아래에 광고를 넣게 설정했다. 광고는 뭘 넣어도 되는데 인아티클 광고를 넣었다.

※ ★ ●는 본인의 광고 코드를 보고 입력하면 된다.

아래 코드를 </body> 위에 넣는다.

<!-- h2 태그 아래 애드센스 광고 삽입 -->
<script>
    var numTag = $("div.entry-content > div > h2").length;
    if (numTag > 0) {
        for (var i = 0; i < numTag; i++) {
            if (i == 0) {
                $("div.entry-content > div > h2").eq(i).after('<br><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="★" data-ad-slot="●"></ins></center><br>');
            } 
        }
    }
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
    $(window).on('load', function() {
        $(".adsbygoogle").each(function() {
            (adsbygoogle = window.adsbygoogle || []).push({});
        });
    });
</script>
<!-- h2 태그 아래 애드센스 광고 삽입 -->
Code language: HTML, XML (xml)

11

of 13

⑧ 소제목 h3 위 광고

소제목 h3 태그 위에 광고를 넣는 방법이다.

목록으로도 사용하는 h3 태그는 글 하나에 여러개가 들어가는데, 두 번째 h3 태그 (i == 1) 위에만 광고를 넣게 설정했다. 광고는 뭘 넣어도 되는데 인아티클 광고를 넣었다.

아래 코드를 </body> 위에 넣는다.

<!-- h3 태그 위 애드센스 광고 삽입 -->
<script>
    var numTag = $("div.entry-content > div > h3").length;
    if (numTag > 0) {
        for (var i = 0; i < numTag; i++) {
            if (i == 1) {
                $("div.entry-content > div > h3").eq(i).before('<br><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="★" data-ad-slot="●"></ins></center><br>');
            } 
        }
    }
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
    $(window).on('load', function() {
        $(".adsbygoogle").each(function() {
            (adsbygoogle = window.adsbygoogle || []).push({});
        });
    });
</script>
<!-- h3 태그 위 애드센스 광고 삽입 -->
Code language: HTML, XML (xml)

※ 이 코드를 이용하면 h태그 뿐만아니라, 이미지 태크, 기타 모든 태그 위, 아래에 광고를 넣을 수 있다. if 문을 if (i % 2 == 0)로 수정하면 짝수 태그에만 광고를 넣을 수도 있다. 코드를 조금만 수정하면 원하는 이미지 아래, 원하는 이미지 위, 원하는 태그 위 등등 자신이 원하는 위치 어느곳에나 자동으로 광고를 넣을 수 있다.

12

of 13

⑨ 관련글 멀티 광고

아래 이미지의 위치에 본인이 사용할 광고 코드를 넣어주면 된다.

13

of 13

마치며

이제 티스토리에 워드프레스 요약 글 작성할 때 광고 신경을 안 쓰고 빠르게 글만 작성하면 된다. 어차피 내 집이 아닌 카카오 집인 티스토리 블로그를 애정으로 키울 생각은 없다. 데이터 센터 화재와 카카오 자체 광고로 인해서 1년의 세월을 낭비했기에 더 이상 신뢰를 할 수 없게 되었다.

집이 사라지는 그날까지 최대한 내 수익을 위해서 이용하고, 잠시 머물다가는 월셋집 정도로 생각하면 될 것 같다.