Настройка Google Analytics: отслеживание социальных действий (лайков, твитов и т.д.)

04.06.2012
/ Категория Google Analytics
/ 4 комментария

Многие сайты размещают у себя социальные виджеты: кнопки «Like», комментарии, опросы и т.д. Бытует мнение, что поисковые системы учитывают часть этой информации при ранжирвоании сайтов.

Так или иначе, если Вы работаете с соц. сетями, Вам наверняка будет полезна статистика социальных действий на Вашем сайте.

Как настроить отслеживание социальных действий в Google Analytics

Я расскажу про 4 основные виджета: Google +1, Like от Вконтакте, Like от Facebook, твит от Twitter.

Первый этап. Общий для всех.

Скопируйте этот код в какой-нибудь .js файл (например, ga_social_tracking.js) и загрузите на сайт:

var _ga = _ga || {};
var _gaq = _gaq || [];

_ga.trackSocial = function(opt_pageUrl, opt_trackerName, opt_targetUrl) {
  _ga.trackFacebook(opt_pageUrl, opt_trackerName);
  _ga.trackTwitter(opt_pageUrl, opt_trackerName);
  _ga.trackVkontakte(opt_pageUrl, opt_trackerName, opt_targetUrl);
};

_ga.trackFacebook = function(opt_pageUrl, opt_trackerName) {
  var trackerName = _ga.buildTrackerName_(opt_trackerName);
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push([trackerName + '_trackSocial', 'facebook', 'like',
            targetUrl, opt_pageUrl]);
      });
      FB.Event.subscribe('edge.remove', function(targetUrl) {
        _gaq.push([trackerName + '_trackSocial', 'facebook', 'unlike',
            targetUrl, opt_pageUrl]);
      });
      FB.Event.subscribe('message.send', function(targetUrl) {
        _gaq.push([trackerName + '_trackSocial', 'facebook', 'send',
            targetUrl, opt_pageUrl]);
      });
    }
  } catch (e) {}
};

_ga.buildTrackerName_ = function(opt_trackerName) {
  return opt_trackerName ? opt_trackerName + '.' : '';
};

_ga.trackTwitter = function(opt_pageUrl, opt_trackerName) {
  var trackerName = _ga.buildTrackerName_(opt_trackerName);
  try {
    if (twttr && twttr.events && twttr.events.bind) {
      twttr.events.bind('tweet', function(event) {
        if (event) {
          var targetUrl; // Default value is undefined.
          if (event.target && event.target.nodeName == 'IFRAME') {
            targetUrl = _ga.extractParamFromUri_(event.target.src, 'url');
          }
          _gaq.push([trackerName + '_trackSocial', 'twitter', 'tweet',
            targetUrl, opt_pageUrl]);
        }
      });
    }
  } catch (e) {}
};

_ga.trackVkontakte = function(opt_pageUrl, opt_trackerName, opt_targetUrl) {
    var trackerName = _ga.buildTrackerName_(opt_trackerName);
    try {
        if (VK && VK.Observer && VK.Observer.subscribe) {
            VK.Observer.subscribe('widgets.like.liked', function() {
                _gaq.push([trackerName + '_trackSocial', 'vkontakte', 'like',
                    opt_targetUrl, opt_pageUrl]);
            });
            VK.Observer.subscribe('widgets.like.unliked', function() {
                _gaq.push([trackerName + '_trackSocial', 'vkontakte', 'unlike',
                    opt_targetUrl, opt_pageUrl]);
            });
        }
    } catch (e) {}
};

_ga.extractParamFromUri_ = function(uri, paramName) {
  if (!uri) {
    return;
  }
  var uri = uri.split('#')[0];  // Remove anchor.
  var parts = uri.split('?');  // Check for query params.
  if (parts.length == 1) {
    return;
  }
  var query = decodeURI(parts[1]);

  // Find url param.
  paramName += '=';
  var params = query.split('&');
  for (var i = 0, param; param = params[i]; ++i) {
    if (param.indexOf(paramName) === 0) {
      return unescape(param.split('=')[1]);
    }
  }
  return;
};

Подключите этот файл на нужных страницах. Для этого между <head> и </head> нужно вставить код (вместо «/ga_social_tracking.js» путь к файлу со скриптом из пункта 1):

<script type="text/javascript" src="/ga_social_tracking.js"></script>

Второй этап. Индивидуальный для каждого виджета.

Нужно немного видоизменить код виджета, который установлен у Вас на сайте.

Отслеживание лайков Google +1

Тут ничего дополнительно делать не нужно, Google Analytics собирает всю необходимую информацию по умлочанию. Т.е. достаточно просто установить на сайте код Google Analytics и код кнопки +1. Получить код кнопки.

Отслеживание лайков Вконтакте

Вконтакте даёт Вам такой код (Получить код кнопки):

<!-- Размещается внутри <head> -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>

<script type="text/javascript">
  VK.init({apiId: XXXXXXX, onlyWidgets: true});
</script>

<!-- Размещается внутри <body> -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "full"});
</script>

Вместо него Вам нужно разместить следующее:

<!-- Вконтакте: like - размещается внутри <head> -->
<div id="vk_api_transport"></div>
<script type="text/javascript">
	window.vkAsyncInit = function() {
	  VK.init({apiId: XXXXXXX, onlyWidgets: true});
	  VK.Widgets.Like("vk_like", {type: "button", verb: 1, pageUrl: "http://domain.ru/"});
	  _ga.trackVkontakte();
	};
	setTimeout(function() {
	  var el = document.createElement("script");
	  el.type = "text/javascript";
	  el.src = "http://vkontakte.ru/js/api/openapi.js";
	  el.async = true;
	  document.getElementById("vk_api_transport").appendChild(el);
	}, 0);
</script>

<!-- Вконтакте: like - размещается внутри <body> -->
<div id="vk_like"></div>

В этом коде вместо XXXXXXX нужно подставить id приложения (сайта) — берётся при генерации кнопки Вконтакте.

Также нужно поменять кое-что в этой строке:

VK.Widgets.Like("vk_like", {type: "button", verb: 1, pageUrl: "http://domain.ru/page.php"});

Оформление кнопки — type: «button» (а ещё может быть full, mini или vertical)
Фраза на кнопке — verb: 1 для «Это интересно» или пустота для «Мне нравится».
Высота кнопки — height: 18px / 20px / 22px / 24px
URL текущей страницы (нужно только для отслеживания) — pageUrl: http://domain.ru/page.php
Чтобы получить URL странциы, можно использовать глобальную переменную $_SERVER[‘REQUEST_URI’] — просто вывести её значение вместо «/page.php» из примера.

Отслеживание лайков Facebook

Стандартная кнопка Facebook собирается из 2-х шагов (настройка оформления кнопки; настройка информации о сайте и его владельце).

Вам понадобится только первая часть: нужно получить код для формата XFBML. Для этого идём на developers.facebook.com.

Оригинальный код, который даёт Вам Facebook, выглядит так (стандартный код из 2 частей):

<!-- То, что нужно разместить в <head> (я взял тут только обязательные поля) - получено из шага 2-->
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://domain.ru/page.php" />
<meta property="fb:admins" content="XXXXXXXXXXXXXXX" />

<!-- то, что нужно разместить в <body> - получено из шага 1 -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<fb:like href="http://domain.ru/page.php" send="false" width="450" show_faces="true" font="arial"></fb:like>

Вместо него Вам нужно разместить следующее:

<!-- Facebook: Like - то, что нужно разместить в <head> -->
		  <div id="fb-root"></div>
		  <script>
			// Facebook async loading.
			(function() {
			  var e = document.createElement('script'); e.async = true;
			  e.src = document.location.protocol +
				'//connect.facebook.net/ru_RU/all.js';
			  document.getElementById('fb-root').appendChild(e);
			}());
			window.fbAsyncInit = function() {
			  FB.init({status: true, cookie: true, xfbml: true});
			  _ga.trackFacebook();
			};
		  </script>

<!-- Facebook: Like - то, что нужно разместить в <body> -->
		<fb:like send="false" layout="button_count" width="450" show_faces="true" font="arial"></fb:like>

Отслеживание твитов (twitter.com)

Из твиттера мы получили что-то такое (Получить код кнопки):

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Вместо этого размещаем следующее:

<!-- Twitter - разместить внутри <head> -->
		<script>
			(function(){
			  var twitterWidgets = document.createElement('script');
			  twitterWidgets.type = 'text/javascript';
			  twitterWidgets.async = true;
			  twitterWidgets.src = 'http://platform.twitter.com/widgets.js';

			  // Setup a callback to track once the script loads.
			  twitterWidgets.onload = _ga.trackTwitter;

			  document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
			})();
		</script>

<!-- Twitter - разместить внутри <body> -->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru">Твитнуть</a>

И снова не забываем про настройки. Все настройки оформления кнопки содержатся в ссылке. Можно её скопировать из кода, который сгенерировал для Вас Twitter.

Всё. Отчёты можно найти в разделе «Источники трафика / Соцфункции».

Так, например, выглядят данные о лайках:

На основе материалов АлаичЪ’а.

4 комментария

ES Optimizer:

08.08.2013 в 15:02

А где скрин, как это выглядит или просматривать в самой аналитике? Чтобы убедиться, что все настроил правильно. Будет?

Ответить
- Евгений:
  
  08.08.2013 в 15:15
  
  добавил
  
  Ответить
  - ES Optimizer:
    
    08.08.2013 в 15:32
    
    Отлично. Он еще и unlike учитывает. Это что сколько передумали или просто игрались, ставя like, а потом unlike?
    
    Ответить
    - Евгений:
      
      08.08.2013 в 15:55
      
      В рамках одной сессии для одной соц. сети учтётся только 1 like и только 1 unlike.
      
      Ответить