구글 애널리틱스 이벤트에 애드블록 사용 통계 추가 방법

Google Analytics

어제 애드블록을 감지하여 차단하거나 감지하는 방법을 사용했는데요. 문득 제 블로그를 방문하는 유저분들이 애드블록을 얼마나 사용하는지 궁금해졌습니다. 

 

아마 저 말고도 티스토리를 이용하시는 분들은 방문자 추적을 위해서 구글 애널리틱스를 많이들 사용하실거에요. 애드센스와 연동이 되기 때문에 가장 호환이 좋거든요. 

 

사실 단적인 데이터만 보기에는 네이버 애널리틱스가 더 좋습니다. 심플하게 사용하기는요. 하지만 파워 유저로 조금씩 건너가다보면 구글 애널리틱스가 좋다는걸 금방 깨닫게 될거에요. 저는 업무로도 애널리틱스를 조금씩 사용하기 때문에 낯설지 않게 적응하고 사용하는 것 같습니다. 작년에 gaiq 자격도 공부좀 해서 딴거는 안자랑...

 

말이 길어지는데 다시 돌아와서 오늘은 애드블록 사용 통계를 알아내기 위한 방법에 대해 포스팅해보도록 하겠습니다. 먼저 애널리틱스에 통계를 추가한 결과부터 보시죠.

애드블록 사용 통계 추가 결과

이벤트 카테고리 'adblock' 으로 추가한 모습, 1월 9일 95건이 감지 되었다. 

원래 애널리틱스에 들어가서 행동 -> 이벤트 -> 개요 부분에 들어가게 되면 별도의 설정을 하지 않은 분들은 아무것도 보이지 않게 됩니다. ( 애널리틱스 기본 설정만 했다면요. ) 

 

원래 구글 애널리틱스 이벤트는 사이트에서 일어나는 이벤트들 그러니까 대표적으로 내가 원하는 기능 버튼들의 클릭, 다운로드, 구매, 전환 같은 이벤트 들이 일어났을 때 구글 애널리틱스에 이벤트 태그로 기록을 해서 볼 수 있는 통계성 페이지로 주로 사용 됩니다.

 

홈페이지에서 감지 가능한 대부분의 이벤트들을 다 기록할 수 있다고 생각하면 됩니다. ( 클릭, 스크롤, 스와이프, 키보드 입력 등등 ) 물론 그 감지 하여 애널리틱스에 적재 하는 부분을 자바스크립트로 개발해야 하는것이긴 합니다. 

 

암튼 사이트 관리자가 이 이벤트 태그는 등록하고 싶은대로 만들어서 등록하면 되는데요. 

 

저는 애드블록이 감지된 경우 'adblock' 이라는 이름의 이벤트 태그로 저장할 수 있도록 해두었고 PC는 'pc' , 모바일은 'mobile'이라는 이벤트 액션 값으로 세분화하여 저장하게 했습니다. 그리고 전날 적용하고 오늘 1월 9일 총 95건정도 기록 된것을 확인할 수 있었습니다. 

 

제 블로그가 이 글을 포스팅하는 시점에 일방문 1,000명 정도 되니까 대략 10%의 비율로 애드블록을 사용 합니다. 앞으로 꾸준히 adblock 비율을 체크할 생각입니다. 현재는 10%정도가 애드블록을 사용하는 것 같고 8~90%가 PC, 나머지 1~20% 정도가 모바일이 차지 하는 것으로 보입니다. 

adblock : PC와 Mobile 사용 비율

어떤가요? 본인의 블로그에 방문하는 사람들의 애드블록 사용율을 체크해보고 싶지 않으신가요? 이런 데이터들을 꾸준히 모니터링 하는 것도 향후 블로그 운영 방향에 중요한 요소가 되리라고 생각이 듭니다. 

 

심지어 어떤 페이지에 애드블록 유저가 많이 들어오는지도 모니터링이 되거든요. 

어떤 페이지에 애드블록 유저가 많이 들어오는지도 확인 가능

역시 예상대로 개발과 IT 관련 글들에 애드블록 사용자 비율이 훨씬 높은 것을 알수 있었습니다. 

 

이제 애드블록 사용자들을 탐색 할 수 있도록 추가한 스크립트를 아래에 넣어두었으니 본인 블로그에 잘 적용해보시면 됩니다. 

</body> 위에 애드블록 감지 스크립트 추가

  - 꼭 티스토리가 아니더라도 아래 스크립트를 추가하면 됩니다. 

 

ga('send', 'event', 'adblock', 'adblock_' + (isMobile ? "mobile" : "pc") );

 

부분이 실질적으로 애드블록이 감지 되었을 때 구글 애널리틱스에 데이터를 쌓아주는 부분입니다. 

<script>
var isMobile;
var filter = "win16|win32|win64|mac|macintel";
if ( navigator.platform ) { if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) { 	
	isMobile = true;
} else { 
	isMobile = false;	
} 
}
// Function called if AdBlock is not detected
function adBlockNotDetected() {
	console.log('AdBlock is not enabled');
}
// Function called if AdBlock is detected
function adBlockDetected() {
	console.log('AdBlock is enabled');
	try{
    	// 해당 부분이 이벤트 태깅
		ga('send', 'event', 'adblock', 'adblock_' + (isMobile ? "mobile" : "pc") );	
	}catch(e){console.error(e)}
}

// We look at whether FuckAdBlock already exists.
if(typeof fuckAdBlock !== 'undefined' || typeof FuckAdBlock !== 'undefined') {
	// If this is the case, it means that something tries to usurp are identity
	// So, considering that it is a detection
	adBlockDetected();
} else {
	// Otherwise, you import the script FuckAdBlock
	var importFAB = document.createElement('script');
	importFAB.onload = function() {
		// If all goes well, we configure FuckAdBlock
		fuckAdBlock.onDetected(adBlockDetected)
		fuckAdBlock.onNotDetected(adBlockNotDetected);
	};
	importFAB.onerror = function() {
		// If the script does not load (blocked, integrity error, ...)
		// Then a detection is triggered
		adBlockDetected(); 
	};
	importFAB.integrity = 'sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=';
	importFAB.crossOrigin = 'anonymous';
	importFAB.src = 'https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js';
	document.head.appendChild(importFAB);
}	
</script>
</body>

</html>

필수 체크 : 너무 당연한 소리겠지만 반드시 앞서서 구글 애널리틱스가 블로그에 적용이 된 상태여야 해당 스크립트가 제대로 적용됩니다. 

 

적용 후 바로 확인해 볼 것.

적용을 한 후에는 애드블록을 사용한 브라우저로 블로그를 접속한 다음 애널리틱스 -> 실시간 -> 이벤트 부분에서 적용이 잘 되었는지 바로 확인 가능하니까요. 바로 확인해보시기 바랍니다. 혹시 에러가 발생하여 블로그 접속이 안되시면 바로 되돌리기 하시구요~ 

 

혹시 이와 관련해서 궁금하신 사항이 있으시면 댓글로 남겨주시면 될 것 같습니다~. 감사합니다. 

 

2020/01/09 - [IT] - 애드센스를 막는 애드블록 차단 스크립트

애드센스를 막는 애드블록 차단 스크립트

2018/12/13 - [dev] - 구글 애널리틱스 아카데미 시험 모음(GAIQ 문제)