본문 바로가기
정보/블로그

[티스토리] 애드센스 본문 상단 광고 서론 밑에 자동으로 달아보기

by 정보알려주는언니 2021. 11. 22.

요즘 애드센스 연구에 한창이다.

블로그를 하고있지만, 방문자수나 애드센스에 신경을 안쓰는것은 거짓말이라고 할 수 있겠다.

나 또한 어느정도 집안살림에 이바지하고자 블로그를 시작했는데,

생각만큼 애드센스 수익이 나오지않자 이방법 저방법 열심히 찾아보는중이다. 

 

 

목차

  1. 애드센스 본문 광고란?
  2. 애드센스 본문 광고 위치를 바꾸는 이유
  3. 애드센스 본문 상단 광고?
  4. 애드센스 본문 상단 광고 서론 아래로 위치시키기

 

 

애드센스 본문 광고란?


애드센스 본문 광고란, 흔히 말하는 티스토리의 포스팅 내에 삽입할 수 있는 광고이다. 

애드센스 승인을 받은 티스토리 블로거들은 흔히 사용법을 알고 있겠지만,

관리자 수익 > 애드센스 메뉴에서 아래와같이 광고설정이 가능하다. 

 

이 부분을 참고하면 본문 상단 / 본문 중간 / 본문하단의 개념을 알 수 있을것이다. 

 

보통의 경우 위 페이지에서 ON/OFF를 통해 설정이 가능하고, 본문에 직접 스크립트를 넣는 방식도 있다.

위 페이지에서 ON/OFF할 경우 자동으로 본문에 자동으로 광고가 생성된다. (본문중간은 직접 광고 위치를 선정해주어야함)

 

 

 

 

애드센스 본문 상단광고의 위치


내 포스팅중 일부를 발췌해서 보여주자면 아래와같다. 

관리자에서 자동으로 본문상단광고를 설정하게되면 아래와같이 타이틀 영역과 콘텐츠영역 사이에 딱 생기게 된다. 

 

내 포스팅 중 일부 발췌

 

 

 

우측상단 광고

기존에는 위와같이 우측상단 광고를 이용했었다. 

 

 

본문 상단 광고가 서론 아래 위치한 케이스

결론적으로 내가 작업하려는 위치는 위와같다.

서론을 먼저 작성하고, 서론 아래 본론이 시작되기 전 광고를 삽입하는 방식이다.

 

 

 

 

애드센스 본문 광고 위치를 바꾸는 이유


나는 이사양잡스라는 유튜버의 영상을 많이 보는 편이다. 그의 영상들은 정말 도움되는것들이 많아 자주 보곤 하는데,

그 중 하나가 애드센스 광고 위치에 관한 영상이 있었다.

물론 모든 사이트가 다 같은것은 아니고, 이사양잡스 유튜버가 정답인것은 아니지만 그래도 나도 적용을 해보고 실험해보는게 좋을것같아  한번 전체적으로 변경을 해보고자 한다. 

 

보통 본문상단광고의 경우 서론 위쪽에 광고가 붙게 되는데, 그렇게되면 USER들이 광고임을 알기때문에 바로 넘어가게된다는것이다. 서론 아래쪽에 광고를 삽입할경우 서론을 읽는동안 광고가 로드되고, 바로 안넘어 갈 가능성이 있기에

이 부분에 위치시키는게 좋다는 이야기가 있었고, 상단광고가 실제로 클릭율이 좋다고한다. 

나또한 본문 우측 상단광고가 그나마 클릭율이 괜찮았다. 

 

하지만 지금 현재 포스팅된 게시글이 150개가량이 되는 시점에서, 모든 글을 수정하기가 힘든 상황이 되었다.

처음에는 티스토리 API로 수정 자동화를 할까 생각했지만, 그렇게되면 다음에 광고 위치를 또 바꾸게되면 그때마다 게시글을 매번 바꿔줘야해서 너무 비효율적이였다.

 

그러다가 스크립트로 자동화하는 방안이 생각나서 공유해보려고 한다. 

 

 

 

 

애드센스 본문 상단 광고 서론 아래로 자동위치


티스토리 광고를 페이지 최하단에 미리 노출 시킨 후 페이지가 로드될때 상단 영역으로 옮기는 방식이다.

 

티스토리 스킨편집 > html편집 클릭 후 아래 코드를 붙여넣는다. 

위치는 북클럽스킨 기준으로 덧글 부분 하단에 위치하고자해서 아래 내용으로 검색하면 된다. 

아래 내용으로 검색하면 2개가 나오는데 그중 첫번째부분 기준이다. 

위치 : <div class="comments">

코드

<!-- 애드센스 광고 노출 -->
<div class="google-ad-articleTop-area" style="width: 100%;margin-top: 1.5rem;margin-bottom: 1.5rem">
	<div class="google-ad-articleTop"  style="width: 100%;margin-top: 1.5rem;margin-bottom: 1.5rem">
		<ins class="adsbygoogle"
			style="display:block; text-align:center;"
			data-ad-layout="in-article"
			data-ad-format="fluid"
			data-ad-client="ca-pub-*******************" <!-- 고유한 번호-->
			data-ad-slot="***********"></ins>
	</div>
</div>

 

 

위와같이 comment div가 끝나는 지점에 해당 코드를 붙여넣는다.

 

 

 

이번에는

위치 : ##_article_rep_desc_##

 로 검색해서 그 하단에 아래 코드를 붙여넣는다.

<!-- 광고노출 스크립트-->
<script>
	$(document).on('ready', function() {
		console.log("load")
		setContentAd();
	} );
							
	function setContentAd() {
		var $selector;
        /**
        * 서론 하단에 목차가 있는경우 목차 위에 상단광고 삽입
        * 목차가 없는경우 첫번째 타이틀 위에 광고 삽입
        * 아무 타이틀도 없는경우 광고 삽입하지않음
        */
		if($("#content h2:eq(0)").text() == '목차')  
			$selector = $("#content h2:eq(0)");
		else if($("#content h3").length > 0)
			$selector = $("#content h3:eq(0)");

		var isDupAd = false;
		if($selector !== undefined){
            // 기존에 광고가 있는지 확인
            $.each($("#content p:eq(0)").nextUntil($selector),function(k,v){
                if(v.tagName == 'SCRIPT')
                    isDupAd = true
            })

            if(isDupAd == false){
                $AdCode = $(".google-ad-articleTop-area").html();
                $selector.before($AdCode);
                $selector.before("<p data-ke-size='size16'>&nbsp;</p>")
            }

		}

		
		$(".google-ad-articleTop-area").remove();
	}
							
</script>

나의 경우 서론을 적은 후 제목2를 이용하여 타이틀을 적곤한다.

그래서 그 위에 광고를 위치시키면 좋겠다 싶어서 그 위치로 잡았다.

 

가끔 목차가 있는 포스팅도 있어서, 목차가 있는 경우 목차의 위에 광고를 삽입한다.

 

 

 

 

 

 

[2021.12.05 추가]

애드센스 광고 위치를 바꾼지 약 3주정도 되었다. 그동안의 경과를 지켜보았더니,

아무래도 이전의 수익이 더 괜찮은것같아 우측상단광고로 다시 적용하려고 한다. 

 

 

 

※ 위와 관련된 정보는 잘 찾기 어려워 한번 적어보았는데, 개발자가 아닌 분들은 이해하기 어려우실수도 있을것같네요.

혹시 궁금하신 내용이 있으시면 덧글달아주시면 언제든지 도와드리겠습니다!

 

 

 

 

 


댓글