구글 애드센스 블로그 홈 화면에서 제외

IT/코딩 Javascript

무찌마 / 2021. 8. 11. / 댓글

애드센스 삭제 코드

 

구글에 웹 페이지 로딩 속도, 시인성 등 여러 가지 사용자 접속 환경을 정밀하게 측정하는 PageSpeed Insights라는 도구가 있습니다.

 

블로그의 수정이 잦으니까 가끔 알 수 없는 오류가 발생하기도 하고 이 도구의 측정 점수가 뚝 떨어지기도 합니다. 심쿵하기도 하고 다시 복구해야 하는 데 마음이 편하지 않습니다. 자주 하니까 짜증이 나는 거죠. 편하게 모든 과오는 블로그에 붙여 놓은 애드센스와 애드핏 배너 광고의 탓으로 돌립니다.

 

블로그 첫 페이지(홈 화면)에서 광고를 제거하면 측정 점수가 잘 나오고 처음 접속자가 쾌적하게 블로그 구독을 시작할 수 있습니다. 거기에 덧붙여 구글에서 검색 순위를 높여준다는 확인되지 않은 소문도 있습니다. 일단 고득점만 하면 됩니다. 인덱스, 본문 페이지는 나중에 따로 살펴봅니다.


티스토리 블로그의 홈 화면에서 구글 애드센스 광고를 제외하는 방법은 간단합니다. 블로그 관리 홈에 들어가서 애드센스 전체 자동 광고를 활성화시키고 선택 사항에서 '홈 화면'을 제외시키면 됩니다.

 

자동이니까 광고의 위치, 크기 등 모든 것을 애드센스가 AI를 활용하여 알아서 처리합니다. 잘 되면 괜찮은데, 이상한 곳에 배너를 붙여 놓아 화면 박스 바깥으로 튀어 나가거나 아예 광고가 나오지 않는 경우도 발생합니다. 티스토리가 중간에 개입하면서 해결이 어려운 새로운 문제도 발생하고 있습니다.

 

어쨌든 여러 가지 이유로 자동 광고에 의한 홈 화면 제외가 되지 않을 경우 수동으로 광고를 부착하고 홈 화면 광고를 따로 제거해야 합니다.

 

인터넷을 검색하면 수동으로 애드센스 코드를 페이지별로 다르게 부착하라고 조언은 있지만 티스토리 블로그는 여러 가지 자료를 티스토리 서버와 블로그 실행 코드가 혼합하여 실시간으로 페이지의 내용을 출력하는 것이기 때문에 그런 방법은 적용이 불가능합니다.


해결 방법 1

 

display: none;

 

블로그 관리 홈에서 구글 애드센스를 티스토리와 연동시키면 아래와 같은 코드로 배너 광고가 출력됩니다.

 

<div class="revenue_unit_wrap position_list">... </div>

 

그러면 블로그 홈 화면에서만 애드센스를 제외하려면, 다음과 같이 코드를 추가할 수 있을 것입니다.

참고로 티스토리 블로그의 홈 화면 <body>의 id가 "tt-body-index"입니다.

 

CSS 파일, style.css

#tt-body-index .revenue_unit_wrap.position_list {
	display: none;
}

 

CSS 파일에 위 코드를 추가하고 홈 페이지를 로딩하고 개발자 도구를 실행하여 애드센스 객체의 코드를 확인합니다. 애드센스 코드가 페이지의 HTML 코드에 들어있지만, 의도했던 대로 화면에 출력은 되지 않습니다. 개발자 도구의 콘솔 창을 열어 관련된 부분을 살펴 보면 3개 정도의 오류 로그가 발생합니다. 페이지에 첨부된 애드센스 코드가 상태를 체크하기 때문입니다. 이런 방법으로 배너를 보이지 않게 만드는 행위는 구글의 정책에 위반한다는 글도 눈에 띄지만 같은 사례인지 확실하지 않기 때문에 그냥 무시하고 여태까지 사용했습니다.

 

해결 방법 2
if ( document.body.id == "tt-body-index" ){
	$(".revenue_unit_wrap").remove();
}

홈 화면에서 페이지 출력 전에 애드센스 코드를 제거하는 방법입니다. 다른 페이지에서는 정상 출력시킵니다. 참고로 이 블로그는 북클럽 스킨을 사용하기 때문에 script.js 파일의 GNB 메뉴바 실행 블록에 추가하였습니다. 이벤트 리스너 블록에 추가하면 안됩니다. 페이지 처음 로딩하는 과정에서 한 번만 실행하면 되기 때문입니다.

 

Book Club 스킨 script.js

$(document).ready(function(){
	if ( document.body.id == "tt-body-index" ){
		$(".revenue_unit_wrap").remove();
	}
	$gnb.find("li").each(function() {
		if ( $(this).find("a").prop("href") == window.location.href ){
			$(this).addClass("current");
		}
	});
});

 

이 코드만 사용하면 홈 화면 로딩될 때 구글 애드센스 로고가 잠깐 뜨는 현상이 발생합니다. 그래서 '해결 방법 1'에서  CSS 파일에 추가한 코드를 병행해야 합니다. '방법 1+2'가 됩니다.

 

※ 'remove()'는 지정된 HTML DOM 객체를 삭제하고 메모리를 반환합니다.

 

더보기

The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
What is the Document Object Model? (w3.org)
HTML DOM remove() Method
Removing an element from the DOM with vanilla JS

※ 'remove()' 대신 'detach()'를 사용하면 저장된 데이터와 이벤트를 보존합니다. 'remove()'가 상대적으로 처리 속도가 빠릅니다.


발로 짠 코드라서 안전은 1%도 보장하지 못합니다. 조언 부탁드립니다. 그리고 이 코드는 애드센스와 애드핏 광고 모두 홈 화면에서 제외합니다.

댓글