티스토리 뷰

카테고리 없음

Tistory 구글 애드센스 광고 클릭 리스너 등록 방법 (Google Ads 클릭 트래킹)

rlawlstjd007 2022. 9. 26. 22:08

들어가며

  • 최근 블로그에 달아놓은 광고로 A/B Test 를 해보면 어떨까 싶어 구글 애드센스 클릭을 트래킹을 하고자 했었다.  
  • 간단하겠지 싶었는데 막상 해보니 생각보다 쉽지가 않아서 우여곡절 끝에 해결 했던 방법을 포스팅 하게 되었다. 
    • 물론 꼼수라고 볼수도 있을 것 같긴 하지만

해결 방법

문제 상황

  • 필자의 경우 tistory 에서 기본으로 제공하는 애드센스 설정을 사용하고 있는데 이 경우 google 에서 제공하는 js 를 통해서 결과적으로 iframe 형태로 광고 배너가 렌더링 된다. 

 

  • 처음에는 간단하게 iframe 에 접근 하여 핸들러를 다는 방법을 생각했는데 (아래 써드 파티가 있어 간단하겠다고 생각했지만)

 

 

GitHub - vincepare/iframeTracker-jquery: jQuery Plugin to track click on iframes (like Google Adsense or Facebook Like button)

jQuery Plugin to track click on iframes (like Google Adsense or Facebook Like button) - GitHub - vincepare/iframeTracker-jquery: jQuery Plugin to track click on iframes (like Google Adsense or Face...

github.com

 

  • 당연하게도 google 측에서 Cross-Origin Read Blocking (CORB) 정책으로 막고 있어 접근이 불가능 했다. 
    • 사실 이쯤에서 포기하려 했었지만 오기가 생겼다. 

 

차선책

  • 구글링 중에 괜찮은 예제를 하나 찾게되었다. 
  • 해당 예제에서는 element 가 focus 를 잃었을 때 발생하는 blur event 를 활용하여 iframe 이 클릭되어 화면의 focus 를 잃은 경우를 트래킹 하는 예제다. 
 

How to detect a click event on a cross domain iframe

How to detect a click event on a cross domain iframe - gist:1780598

gist.github.com

 

 

  • 자세한 구현을 살펴보자면 
    • iframe 영역에 mouse enter event 이벤트를 감지하여 광고 영역에 마우스가 진입 여부를 캡쳐
    • window 객체의 blur 이벤트를 통해서 현재 window 에서 focus out 이 된 순간에 mouse enter 가 되어 있었다면 이를 광고가 클릭 되었다고 판단
var myConfObj = {
  iframeMouseOver : false
}
window.addEventListener('blur',function(){
  if(myConfObj.iframeMouseOver){
    console.log('Wow! Iframe Click!');
  }
});

document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
   myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
    myConfObj.iframeMouseOver = false;
});

 

적용하기

  • 이제 블로그에 적용을 해보자. 
  • 아래 코드는 애드센스 상단, 하단 광고 배너에 대한 click 리스너를 등록하는 코드이다. 
<script>
	let adClickContext = {
		  isMouseOver : false,
		  AdId: ''
	}

	initAdIframe("aswift_0");	// 상단 광고 배너 등록
	initAdIframe("aswift_1");	// 하단 광고 배너 등록
	
	window.addEventListener('blur',function(){
	  	if(adClickContext.isMouseOver){
			console.log("광고 클릭됨 [배너 id: " + adClickContext.AdId + "]");
	  	}
	});

	function initAdIframe(elementId) {
		// 일부 광고중 화면에 diaplay 되지 않으면 iframe 이 로드 되지 않는 경우가 있기 때문에 display 될때까지 체크 함.
		const load = setInterval(function(){
		    const iframe = document.getElementById(elementId);

		    if(iframe != null) {
		        iframe.addEventListener('mouseover', function (e) {
                            adClickContext.isMouseOver = true;
                            adClickContext.AdId = e.target.getAttribute('id');
                        });

                        iframe.addEventListener('mouseout', function (e) {
                            adClickContext.isMouseOver = false;
                            adClickContext.AdId = '';
                        });		

		        console.log("광고 배너 클릭 리스너 초기화 완료 [배너 id: " + elementId + "]");
		        clearInterval(load);
		    }
		}, 1000);
	}
</script>

 

  • 위 코드를 티스토리 HTML 편집을 통해서 <head> 태그 안에 적당한 위치에 넣어주자. 
    • 티스토리 HTML 편집 방법은 이 글을 참고

 

  • 적용후에 포스팅을 열고 개발자 도구를 확인해보면 광고 배너 클릭 리스너 초기화 완료 [배너 id: aswift_0]
    라는 로그가 보인다면 초기화 성공이다. 

 

테스트

  • 애드센스의 경우 광고를 직접 클릭 하여 테스트 하는 것은 부정 클릭의 소지가 있어 리스크가 있어 테스트 용도로 iframe 을 띄워 테스트를 해보겠다. (https://www.openstreetmap.org 에서 제공하는 embed iframe 을 이용)
  • 위에서 추가한 코드 블럭 밑에 아래 코드 블럭을 그대로 집어 넣겠다. 
    • 필자는 하단 iframe 을 동적으로 만들어 포스팅 하단 element 에 넣어주었다.
    • 혹여 다른 위치에 넣어야 하는 경우 코드를 수정하면 된다. 
<script>
	initAdIframe("test");
	window.addEventListener('load', async (event) => {
			const testElemeht = document.createElement('iframe');
			testElemeht.src ="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"
			testElemeht.id = "test"
			testElemeht.width = "1000"
			document.getElementsByClassName('revenue_unit_wrap')[1].parentElement.insertBefore(testElemeht, document.getElementsByClassName('revenue_unit_wrap')[1]);
	});
</script>

 

  • 적용후에 블로그를 열어보면 아래와 같이 포스팅에 추가한 앙증맞은 iframe 이 보인다. 

 

  • 개발자 도구를 열어 광고 배너 클릭 리스너 초기화 완료 [배너 id: test] 라는 로그를 확인하여 초기화 된 것을 확인하자. 

 

  • 그리고 iframe 에 클릭을 하거나 OpenStreamMap 링크를 클릭하고 개발자 도구를 확인해보면  광고 클릭됨 [배너 id: test] 로그를 확인한다면 테스트 성공이다 ! 

마치며

  • 이 포스팅을 통해 광고 클릭을 트래킹할 수 있게 되면서 여러 실험들을 할 수 있는 초석을 다질 수 있었다.
  • 추후에 이를 토대로 A/B 테스트를 연동하여 광고클릭율을 증가를 측정해볼 예정이다 ! 

 

반응형
댓글