소셜 상호작용 - 웹 추적 (ga.js)

ga.js는 기존 라이브러리입니다. 새로운 구현을 시작하는 경우 이 라이브러리의 최신 버전인 analytics.js를 사용하는 것이 좋습니다. 기존 구현의 경우 ga.js에서 analytics.js로 이전하는 방법을 알아보세요.

이 문서에서는 Google 애널리틱스를 사용하여 Facebook, 트위터와 같은 Google 이외의 네트워크에서 상호작용 측정항목을 가져오는 방법을 설명합니다. 사이트 소유자이거나 콘텐츠 관리 플러그인 개발자이거나 공유 버튼 사용자에게 자동 소셜 상호작용 보고를 제공하려는 소셜 네트워크 운영자라면 이 문서를 사용해 소셜 공유 버튼에 대한 애널리틱스를 설정하세요.

소개

기본적으로 Google 애널리틱스는 +1 버튼에 대한 통합 보고서를 제공합니다. 즉, 같은 페이지에 ga.js와 +1 버튼을 구현한 경우 모든 +1 소셜 상호작용이 자동으로 보고됩니다. 문제 해결 도움말을 비롯한 +1 애널리틱스에 대한 자세한 내용은 고객센터의 소셜 애널리틱스 정보를 참고하세요.

Facebook이나 Twitter와 같은 다른 네트워크에 대한 소셜 상호작용 분석 및 보고서를 확인하려면 Google 애널리틱스를 각 네트워크 버튼과 통합해야 합니다. 소셜 플러그인 분석을 사용하면 Facebook의 '좋아요'에서 트위터 '트윗'에 이르는 상호작용의 범위가 기록됩니다. 이벤트 추적으로 일반적인 콘텐츠 상호작용도 추적할 수 있지만 소셜 애널리틱스는 소셜 상호작용을 기록하기 위한 일관된 프레임워크를 제공합니다. 이렇게 하면 Google 애널리틱스 보고서 사용자에게 여러 네트워크에서 소셜 네트워크 상호작용을 비교할 수 있는 일관된 보고서가 제공됩니다.

애널리틱스를 Facebook 및 Twitter 버튼과 통합하는 방법의 실제 예를 보려면 소셜 애널리틱스 샘플 코드를 확인하세요.

소셜 애널리틱스 설정

소셜 상호작용 추적을 설정하려면 소셜 상호작용 데이터를 Google 애널리틱스로 전송하는 _trackSocial 메서드를 사용해야 합니다. 이 메서드는 사용자가 소셜 상호작용을 완료하면 호출해야 합니다. 소셜 네트워크마다 다른 메커니즘을 사용하여 소셜 상호작용이 발생하는 시점을 결정하며, 이를 위해서는 일반적으로 네트워크 버튼에 대한 API와 통합해야 합니다.

소셜 애널리틱스 통합에 대한 구체적인 세부정보는 소셜 네트워크에 따라 다르므로 이 가이드의 나머지 부분에서는 네트워크별로 소셜 플러그인 애널리틱스를 설정하는 방법에 관한 일반적인 권장사항을 제공합니다. 각 네트워크의 개발자 문서를 확인하여 네트워크별 구현을 파악하는 것이 좋습니다.

다음은 _trackSocial 메서드에 관한 설명입니다.

_gaq.push(['_trackSocial', network, socialAction, opt_target, opt_pagePath]);

여기에서 매개변수는 다음을 나타냅니다.

• network

  필수 항목입니다. 추적 중인 소셜 네트워크 (예: Facebook, 트위터, LinkedIn)를 나타내는 문자열입니다.

• socialAction

  필수 항목입니다. 추적 중인 소셜 액션을 나타내는 문자열입니다 (예: 좋아요, 공유, 트윗).

• opt_target

  선택사항입니다. 작업을 수신하는 URL (또는 리소스)을 나타내는 문자열입니다. 예를 들어 사용자가 사이트의 페이지에서 좋아요 버튼을 클릭하면 opt_target가 페이지 제목이나 콘텐츠 관리 시스템에서 페이지를 식별하는 데 사용되는 ID로 설정될 수 있습니다. 대부분의 경우 좋아요 표시한 페이지는 현재 있는 페이지와 동일합니다. 따라서 이 매개변수가 undefined이거나 생략된 경우 추적 코드는 기본적으로 document.location.href을 사용합니다.

• opt_pagePath

  선택사항입니다. 작업이 발생한 경로 (매개변수 포함)별로 페이지를 나타내는 문자열입니다. 예를 들어 https://developers.google.com/analytics/devguides/에서 좋아요 버튼을 클릭하면 opt_pagePath가 /analytics/devguides로 설정되어야 합니다. 대부분의 경우 소셜 액션의 출처는 페이지의 경로입니다. 따라서 이 매개변수가 undefined이거나 생략된 경우 추적 코드는 기본적으로 location.pathname와 location.search을 사용합니다. Google 애널리틱스 _trackPageview 메서드로 선택적 페이지 경로 매개변수를 수정하여 가상 페이지뷰를 추적하는 경우에만 이 값을 설정해야 합니다.

Facebook 작업

Facebook JavaScript SDK에 따르면 페이지에 좋아요 버튼을 설정하는 가장 간단한 방법은 다음 코드를 사용하는 것입니다.

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>

좋아요

Google 애널리틱스로 좋아요를 기록하려면 Facebook의 edge.create 이벤트를 구독하고 Google 애널리틱스 추적 코드를 실행할 콜백 함수를 만듭니다.

FB.Event.subscribe('edge.create', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});

사용자가 페이지에 좋아요를 표시하면 콜백 함수가 실행되고 좋아요를 표시한 리소스의 URL을 수신합니다. 그러면 리소스가 _trackSocial 메서드에 값으로 전달되어 Google 애널리틱스에서 네트워크, 액션, 좋아요 표시된 URL을 보고할 수 있습니다.

좋아요 수

Facebook API를 사용하면 좋아요 취소와 같은 기타 흥미로운 이벤트를 구독할 수도 있습니다.

FB.Event.subscribe('edge.remove', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});

공유

공유를 구독할 수도 있습니다.

FB.Event.subscribe('message.send', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});

Twitter 트윗

트윗 버튼 문서 및 웹 인텐트 자바스크립트 이벤트에 따르면 페이지에 Twitter 버튼을 구현하고 사용자 상호작용을 감지하려면 다음 코드를 사용해야 합니다.

<a href="http://developers.google.com/analytics" class="twitter-share-button" data-lang="en">Tweet</a>
<script type="text/javascript" charset="utf-8">
  window.twttr = (function (d,s,id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
    js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
  }(document, "script", "twitter-wjs"));
</script>

Google 애널리틱스로 트윗 버튼 이벤트를 추적하려면 Twitter의 웹 인텐트 자바스크립트 이벤트를 사용하여 콜백 함수를 Intent Event에 바인딩해야 합니다. 콜백 함수에서 이벤트 바인딩을 래핑하여 이벤트 바인딩 전에 모든 항목이 로드되었는지 확인하는 것이 중요합니다.

function trackTwitter(intent_event) {
  if (intent_event) {
    var opt_pagePath;
    if (intent_event.target && intent_event.target.nodeName == 'IFRAME') {
          opt_target = extractParamFromUri(intent_event.target.src, 'url');
    }
    _gaq.push(['_trackSocial', 'twitter', 'tweet', opt_pagePath]);
  }
}

//Wrap event bindings - Wait for async js to load
twttr.ready(function (twttr) {
  //event bindings
  twttr.events.bind('tweet', trackTwitter);
});

사용자가 트윗을 하면 콜백 함수는 일반적으로 트윗되는 리소스의 URL을 가져오는 데 사용할 수 있는 객체를 수신합니다. Twitter JavaScript 코드가 로드되면 주석이 달린 트윗 링크를 iframe으로 변환하고 트윗할 URL이 인코딩되어 iframe URL에 쿼리 매개변수로 추가됩니다. 콜백에 전달된 이벤트 객체에는 이 iframe에 대한 참조가 있으며 이를 사용하여 트윗되는 리소스의 URL을 가져올 수 있습니다.

위의 콜백 함수는 iframe 참조가 실제로 iframe인지 확인한 다음 url 쿼리 매개변수를 보고 트윗할 리소스를 추출하려고 시도합니다.

다음은 URI에서 쿼리 매개변수를 추출하는 함수의 예입니다.

function extractParamFromUri(uri, paramName) {
  if (!uri) {
    return;
  }
  var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)');
  var params = regex.exec(uri);
  if (params != null) {
    return unescape(params[1]);
  }
  return;
}

쿼리 문자열에 있으면 매개변수가 반환됩니다. 매개변수가 없으면 함수는 _trackSocial 메서드로 전달되는 undefined를 반환하고 메서드의 기본 동작을 취합니다.

통합 권장사항

많은 사이트에서 콘텐츠 관리 플러그인을 사용하여 소셜 버튼을 추가합니다. 이러한 플러그인의 작성자인 경우 소셜 플러그인 애널리틱스를 통합하여 이러한 상호작용을 자동으로 기록하는 것이 좋습니다. 마찬가지로 소셜 네트워크의 개발자인 경우 소셜 애널리틱스와 통합하여 사용자가 Google 애널리틱스에서 소셜 네트워크 상호작용을 더욱 쉽게 추적할 수 있습니다.

이 섹션에서는 제품 또는 CMS가 소셜 상호작용을 자동으로 추적하도록 소셜 플러그인 애널리틱스를 통합하는 데 참고할 만한 권장사항을 설명합니다. 모든 권장사항의 실제 예를 보려면 소셜 플러그인 애널리틱스 샘플 코드를 확인하세요.

_gaq 큐 인스턴스화 및 사용

최신 버전의 Google 애널리틱스 추적 코드는 동기 및 비동기 로드를 모두 지원합니다. 개발자가 아직 로드되지 않은 메서드를 호출할 수 있도록 Google 애널리틱스에서는 _gaq.push(); 추적 메서드를 푸시할 수 있는 명령어 큐 _gaq를 제공합니다.

추적 코드가 로드되면 큐에 있는 모든 명령어가 실행됩니다. Google 애널리틱스 자바스크립트 추적 코드를 플러그인 또는 제품과 통합하는 경우 항상 이 명령어 큐가 인스턴스화되고 통합 시 _trackSocial 명령어가 이 배열에 푸시되는지 확인해야 합니다.

var _gaq = _gaq || [];

이렇게 하면 수신 웹사이트 페이지에서 기존 추적 코드 스니펫을 사용하는지 또는 비동기 추적 코드 스니펫을 사용하는지에 관계없이 메서드가 호출됩니다.

사용자 구성

소셜 플러그인 애널리틱스를 통합하는 플러그인을 개발하는 경우 사용자가 플러그인을 사용할 때 설정할 수 있는 다음 옵션을 제공하는 것이 좋습니다.

선택적 페이지 경로 매개변수 설정 — _trackSocial 메서드의 마지막 매개변수는 소셜 상호작용이 발생한 현재 URL을 재정의하는 것입니다. 최종 목표는 페이지 추적과 소셜 플러그인 애널리틱스 간에 동일한 URL이 보고되도록 하는 것입니다. 일부 사용자는 추적 중인 기본 페이지 URL을 페이지 조회수 추적으로 재정의할 수 있으므로, 일관된 보고를 위해 소셜 플러그인 애널리틱스의 URL을 재정의할 수 있는 방법이 필요합니다.

다음은 사용자가 이러한 옵션을 설정하도록 허용하는 방법과 코드가 옵션에 응답하는 방법을 보여주는 예입니다.

// Create a function for a user to call to pass in the options.
function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'like',
            opt_target, opt_pagePath]);
      });
    }
  } catch(e) {}
}

위의 예에서 opt_pagePath 매개변수를 설정하여 trackFacebook 함수를 호출하면 기본 페이지 경로 값을 매개변수의 공급 경로로 덮어씁니다. 그렇지 않으면 해당 매개변수의 값이 undefined로 설정됩니다. 정의되지 않은 매개변수에 기본값이 사용됩니다.

참고: 이 예에서는 Facebook API가 로드되지 않은 경우 스크립트 오류가 발생하지 않도록 몇 가지 검사도 추가했습니다. 책임감 있는 개발자는 오류를 적절하게 처리해야 합니다.

여러 트래커

일부 Google 애널리틱스 사용자는 동일한 페이지에서 여러 추적기를 구별하기 위해 추적 객체의 이름을 지정합니다. 동일한 웹사이트 페이지에서 여러 추적기를 사용하는 것은 권장하지 않지만 여러 추적기를 처리하는 것도 고려해 볼 수 있습니다.

다음은 각 추적기 객체의 _trackSocial 메서드를 반복하고 호출하는 방법의 예입니다. 페이지의 모든 추적기 객체의 배열을 반환하는 _getTrackers 메서드를 사용합니다.

이 예에서는 Facebook 이벤트가 트리거되면 각 추적기 객체의 _trackSocial 메서드가 Google 애널리틱스 명령어 큐 _gaq로 푸시됩니다.

getSocialActionTrackers = function(network, socialAction, opt_target, opt_pagePath) {
  return function() {
    var trackers = _gat._getTrackers();
    for (var i = 0, tracker; tracker = trackers[i]; i++) {
      tracker._trackSocial(network, socialAction, opt_target, opt_pagePath);
    }
  };
}

function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(_ga.getSocialActionTrackers_('facebook', 'like',
            opt_target, opt_pagePath));
      });
    }
  } catch(e) {}
}