안수찬의 개발이야기

autotrack 을 이용한 구글 어낼리틱스 이벤트 트래킹 자동화

Introduction

안수찬 @dobestan

안수찬 @dobestan

소프트웨어 생태계에 기여할 수 있는 실용주의 프로그래머가 되고자 합니다. 나는 안수찬이다. 그러므로 나는 할 수 있다.


Google Analytics

autotrack 을 이용한 구글 어낼리틱스 이벤트 트래킹 자동화

Posted by 안수찬 @dobestan on .
Featured

Google Analytics

autotrack 을 이용한 구글 어낼리틱스 이벤트 트래킹 자동화

Posted by 안수찬 @dobestan on .

앞으로 블로그의 특정 컨텐츠 들에 대해서 광고를 집행할 계획을 짜고 있다. "네이버 키워드 광고", "페이스북 광고" 를 시작으로 조금씩 홍보가 필요한 컨텐츠 들에 대해서 광고를 태워볼 예정이다.

사실 광고를 집행함에 있어, 집행하는 행위 자체보다 훨씬 중요한 것은 "지표(Metrics)에 대한 정확한 측정(Measurement)" 이다. 내 광고주 서비스가 아니라, 내가 운영하는 개인 블로그라고 해서 예외는 없다고 생각하고 정확하게 측정할 필요가 있었다. 추가적으로 측정해야할 지표는 다음과 같았다.

  • 외부 링크로의 클릭 수 ( Outbound Link Clicks )

사실 생각을 해보니 기존에 측정하고 있던 지표들에 추가해야할 것이 이것밖에 없었다. 기존에는 GA(Google Analytics) 를 적극적으로 활용하고 있어, "외부 링크로의 클릭수" ( 사실상의 Event 이자 Goal; 내가 컨텐츠를 작성하며 생각하고 있는 Funnel Flow 가 있다. ) 를 트래킹 하기 위해서는 각각의 링크들에 event 를 걸어줄 필요가 있었다.

tl;dr

<script async src='path/to/autotrack.js'></script>  
<script>  
  ga('create', 'GA TRACKING ID', 'auto');
  ga('require', 'outboundLinkTracker');
  ga('send', 'pageview');
</script>  
Google Analytics
Google Analytics

구글 어낼리틱스는 사랑입니다. 특히나 GA 에서 제공하는autotrack 은 정말 어썸합니다.

외부 링크로의 클릭 이벤트

"track outbound links in ga" 라는 키워드로 검색해보면, 구글 어낼리틱스 공식 문서에서는 다음과 같은 코드를 제공하고 있다. 사실상 그냥 ga event tracking 하는 기능을 함수로 묶어둔 기능이다. 별로 도움이 되질 않는다.

// ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

var trackOutboundLink = function(url) {  
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){document.location = url;}
   });
}
<a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return false;">Check out example.com</a>  

물론 이 코드를 적절하게 활용해서 트래킹을 해도 되겠지만, 몇 가지 "심각한" 문제가 있다.

  • 모든 클릭 이벤트를 측정하려고 하는 요소마다 이벤트를 걸어줘야 한다.
  • 심각한 문제: 포스트를 작성하는 것이 귀찮아지면, 블로그 쓰는게 재미가 없어질 것 같다.

이러한 심각한 문제를 해결하기 위해서, 이를 약간의 코드를 덧붙여 자동화 해보고자 한다. ( 블로그 쓰는 행위는 언제나 즐거워야 한다. )

클릭 이벤트 자동화

사실 이 부분은 기존에 사용하고 있던 코드가 있어서 조금은 쉽게 해결했다. 현재 이 블로그에는 "외부 링크에 대해서 클릭 시, 새 창으로 열리도록" 하는 코드가 포함되어 있는데, 이를 약간 활용해서 다음과 같이 작성했다.

$(document).ready(function() {
  $("a[href^=http]").each(function(){
    if (this.href.indexOf(location.hostname) == -1) {
      $(this).click(function() { 
        var url = this.href;
        ga('send', 'event', 'outbound', 'click', url);
        return true;
      });
    }
  })
});

이미 누군가가 구글에서 만들어 뒀었다

위 코드를 몇 주 정도 잘 쓰면서 테스트 해보고 있었는데, 검색을 하다 보니 Google Analytics 팀에서 공식적으로 내놓은 autotrack 이라는 라이브러리가 있었다. 역시 검색을 잘 해야 살아남는다. 올해 2월에 배포한 꽤나 따끈따끈한 라이브러리이다. 그리고 내가 필요로 했던 outboundLinkTracker 기능 뿐만이 아니라, 다양한 기능을 제공하니 Google Ananlytics 를 사용한다면 여러분들도 꼭 살펴보았으면 좋겠다.

  • cleanUrlTracker - 동일한 URL 에 대해서 정확하게 트래킹 ( 예, /dobestan/, /dobestan 은 동일한 페이지로 트래킹 )
  • eventTracker - HTML 속성으로 조금 더 쉽게 트래킹 할 수 있도록 해준다. ( 예, <button ga-on="click" ga-event-category="Video" ga-event-action="play">Play video</button> )
  • impressionTracker - Impression 트래킹 ( 사용자들에게 광고가 보였는지 트래킹 )
  • mediaQueryTracker - Media Query 변경되는 이벤트 트래킹
  • outboundFormTracker - 외부 폼 입력 트래킹
  • outboundLinkTracker - 외부 링크 클릭 트래킹
  • pageVisibilityTracker - Page Visibility 트래킹 ( 예를 들면, "유저가 페이지를 그대로 켜둔채 오랜 시간 화장실을 다녀왔을 때" 같은 상황 - 페이지는 변경되지 않고 시간이 지난 후에 탭 클릭 같은거 트래킹 )
  • socialWidgetTracker - Facebook, Twiiter Social Wiget 이벤트 트래킹
  • urlChangeTracker - SPA(Single Page Application) 에서 URL 변경을 트래킹

결과

기존의 레거시 트래킹 코드를 제거하고 autotrack 을 적용하였다. 적용한 직후 별도의 설정없이 바로 Outbound Link Click 이벤트가 트래킹 됨을 확인할 수 있다. 아마 조만간 내가 운영, 관리하고 있는 사이트들에 모두 적용하지 않을까 생각한다.

autotrack 적용 결과

GA의 "실시간 > 이벤트" 에 정상적으로 "Outbound Link" 로 트래킹 되는 것을 확인할 수 있다.

안수찬 @dobestan

안수찬 @dobestan

https://dobest.io/

소프트웨어 생태계에 기여할 수 있는 실용주의 프로그래머가 되고자 합니다. 나는 안수찬이다. 그러므로 나는 할 수 있다.

View Comments...