Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

[구글 아날리틱스] 아주 간단하게 외부 링크와 다운로드 추적하기

워드프레스 플러그인 중에 Google Analyticator라는 게 있다. 포럼도 있다. 여기 있는 코드를 활용하면 아주 간단하게 추적을 할 수 있다. (워드 프레스를 사용하는 사람이라면 설치하고 설정에서 활성화해 주면 끝이다.) 위 플러그인을 다운받아 압축을 풀면 external-tracking.js 라는 파일도 있다. 이게 외부 링크와 다운로드 링크를 추적하는 코드다. 이놈을 그냥 파일에 넣으면 되는데, 코드 두 줄을 위에 삽입해 줘야 한다. […]

워드프레스 플러그인 중에 Google Analyticator라는 게 있다. 포럼도 있다. 여기 있는 코드를 활용하면 아주 간단하게 추적을 할 수 있다. (워드 프레스를 사용하는 사람이라면 설치하고 설정에서 활성화해 주면 끝이다.)

위 플러그인을 다운받아 압축을 풀면 external-tracking.js 라는 파일도 있다. 이게 외부 링크와 다운로드 링크를 추적하는 코드다. 이놈을 그냥 파일에 넣으면 되는데, 코드 두 줄을 위에 삽입해 줘야 한다.

플러그인 설정은 js에 쓸 수가 없기 때문에 js파일에 포함돼 있지 않은 거다. 그래서 수동으로 넣어 줘야 하는 거다. 코드는 간단하다.

var analyticsFileTypes = ['pdf','zip','mp3'];
var analyticsEventTracking = 'enabled';

이렇게 파일의 맨 위에다 넣는다. 위의 파일타입 부분에 원하는 파일 타입들을 넣어 주면 되겠다. 그리고 페이지에 포함한다. 그러면 끝!

그래서 완성된 결과물은 아래와 같다. 아래 코드를 복사해서 js 파일을 만들면 된다.

var analyticsFileTypes = ['pdf','zip','mp3'];
var analyticsEventTracking = 'enabled';

jQuery(document).ready(function() {
  jQuery('a').each(function() {
    var a = jQuery(this);
    var href = a.attr('href');
    
    // Check if the a tag has a href, if not, stop for the current link
    if ( href == undefined )
      return;
    
    var url = href.replace('http://','').replace('https://','');
    var hrefArray = href.split('.').reverse();
    var extension = hrefArray[0].toLowerCase();
    var hrefArray = href.split('/').reverse();
    var domain = hrefArray[2];
    var downloadTracked = false;
  
     // If the link is a download
    if (jQuery.inArray(extension,analyticsFileTypes) != -1) {
      // Mark the link as already tracked
      downloadTracked = true;
      
      // Add the tracking code
      a.click(function() {
        if ( analyticsEventTracking == 'enabled' ) {
          _gaq.push(['_trackEvent', 'Downloads', extension.toUpperCase(), href]);
        } else
          _gaq.push(['_trackPageview', analyticsDownloadsPrefix + url]);
      });
    }
    
    // If the link is external
     if ( ( href.match(/^http/) ) && ( !href.match(document.domain) ) && ( downloadTracked == false ) ) {
        // Add the tracking code
      a.click(function() {
        if ( analyticsEventTracking == 'enabled' ) {
          _gaq.push(['_trackEvent', 'Outbound Traffic', href.match(/:\/\/(.[^/]+)/)[1], href]);
        } else
          _gaq.push(['_trackPageview', analyticsOutboundPrefix + url]);
      });
    }
  });
});

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (2개)

  1. ikyeong 댓글:

    안녕하세요. 구글 아날리틱스 공부중인데요.. 연습용으로 제 워드 프로세스 블로그를 추적해보고 싶어서 구글 아날리틱스 계정 만들고 워드프로세스 주소 셋팅해서 tracking code를 받았는데 어디에 삽입해야할 지 잘 모르겠네요…ㅠㅠ 이 글에서 말씀하신대로 Google Analyticator 플러그인을 넣어보려고도 했는데 제 블로그 셋팅에서 플러그인 옵션 자체가 보이지를 않고, Dash board에서 General setting 들어가봐도 Tracking code 옵션도 안보이네요.

    혹시 코드 삽입하는 것과 플러그인 모두 유료 워드프로세스 홈페이지만 쓸 수 있는 것인가요? 저는 현재 무료버전을 쓰고 있고 도메인도 wordpress 들어가 있거든요. 이 경우에는 google analytics에서 준 Tracking code를 수동으로 넣을 수 있는 방법도 없는 건가요?

    답변 기다릴게요. 감사합니다!

    1. 녹풍(綠風, Windgreen) 댓글:

      전 설치형을 사용하고 있습니다. 그래서 가입형 워드프레스에 대해선 아는 게 없습니다. 제약이 많다는 것 정도 압니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다