Июль
8
2011

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

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

Ранее я писал, что в Google Analytics появились отчеты по Google+1. В конце было указано, что кроме самой кнопки +1 будут отслеживаться кнопки социальных сетей, но время шло, а данные о социальных сетях не появлялись в отчетах.Необходимо также модифицировать код некоторых кнопок, для отсылки отчетов.

Для facebook и twitter есть примеры кода, для остальных необходимо придумывать самому.

Я рекомендую загружать социальные кнопки после загрузки страницы, здесь находится пример кода (для Facebook, Twitter, Вконтакте, Google+) с отложенной загрузкой и отслеживанием кликов в Google Analytics.

Общий код

Для работы необходимо прежде всего подгрузить код отслеживания

<script src="http://analytics-api-samples.googlecode.com/svn/trunk/src/tracking/javascript/v5/social/ga_social_tracking.js"></script>

В общем виде функция передачи отчетов выглядит как

_gaq.push(['_trackSocial', 'сеть', 'действие', 'ссылка']);

Соответственно сеть — имя социальной сети в отчете, действие — название действия в отчете, ссылка — ссылка на страницу.

Facebook

Для фейсбука есть синхронный и асинхронный код отслеживания. Вот пример моего кода:

  <div id="fb-root"></div>
<script>
// Facebook async loading.
(function() {
var e = document.createElement('script'); e.async = true;
e.src = 'http://connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({appId: '164838206912600', status: true, cookie: true,
xfbml: true});
_ga.trackFacebook();
};
</script>

В том месте, где должна быть кнопка, вставляем этот код

<fb:like href="<?php the_permalink(); ?>" layout="box_count" show_faces="false" action="like" font="arial"></fb:like>

Twitter

Для твиттера действия аналогичны фейсбуку, только код другой. В любом месте страницы вставляем (я предпочитаю вставлять в самый конец страницы)

  <script>
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';</p>
// Setup a callback to track once the script loads.
twitterWidgets.onload = _ga.trackTwitter;
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>

И в нужном месте вставляем саму кнопочку

<a href="http://twitter.com/share" data-url="<?php the_permalink(); ?>" data-count="vertical" data-via="TIgor4eg" data-lang="ru">Tweet</a>

Вконтакте

Для контакта стандартных примеров не нашлось, так что пришлось мастерить самому. У контактика отслеживать действия можно только для кнопки «Нравится». У них для этого специально определен объект VK.Observer.

В шапку шаблона вставляем код, отслеживающий нажатия на кнопку Вконтакте

<script type="text/javascript">
_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) {}
};
</script>

Теперь в нужном месте вставляем кнопку. Обратите внимание, что я использую значение произвольного поля post-picture, это сделано для показа картинки к посту при наведении на ссылку в самом ВКонтакте.

<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "vertical",pageUrl:"<?php the_permalink(); ?>"<?php
$post_pictures = get_post_custom_values('post-picture');
$post_picture = $post_pictures[0];
if ($post_picture != '')
{?>,pageImage:"<?php echo $post_picture; ?>"<?php } ?>   });
</script>

Если вам картинка не нужна, то можно использовать любой удобный вам код кнопки Нравится.

Как это выглядит

После установки и настройки я понажимал на кнопки, для проверки. Вскоре в социальных отчетах Google Analytics появились новые события.

Неправильная раскладка: rjl jnckt;bdfybz cjwbfkmys[ ltqcndbq d пщщпду фтфднешсы

Понравилась статья? Посоветуйте друзьям!

Analytics Facebook Google Google Plus twitter vko вконтакте социальная сеть Соцсети


Понравилась статья? Подпишись на рассылку по E-Mail или в RSS.
  • Денис Чудинов
    Переписал счётчик для твиттера - Заработало Почему ты вписываешь - это обязательный элемент?
  • Ты про куски с text-align: justify; ? Это плагин подсветки кода вывел разметку статьи. Уже убрал.
  • Евгений Васькевич
    Спасибо за статью. Вы не знаете, а можно ли отслеживать нажатия на кнопку Share вконтакте ?
  • Можно написать на javascript функцию и назначить ее выполнение при нажатии на кнопку, но это не так удобно. function gakon(){ _gaq.push([\'_trackSocial\', \'vkontakte\', \'share\', \'\']); }; <!-- document.write(VK.Share.button({url: "\"},{type: \"custom\", text: \"\"})); -->
  • Евгений Васькевич
    Я реализовал вот таким образом. _ga.trackVkontakte = function( pageUrl, trackerName ) { var trackerName = _ga.buildTrackerName( trackerName ); try  { if ( VK && VK.Share && VK.Share.click )  { var targetUrl; var oldShareClick = VK.Share.click; VK.Share.click = function( index, el ) { _gaq.push( [trackerName + \'_trackSocial\', \'vkontakte\', \'share\', targetUrl, pageUrl] ); return oldShareClick.call( VK.Share, index, el ); }; } } catch (e) {} } Наткнулся на вашу статью и появилась надежда, что можно сделать по нормальному, увы...Спасибо за ответ.
  • Чето они не хотят ставиться у меня по-нормальному. А эксплорер начинает показывать сразу ошибку на странице. Видать код не гладкий.
  • У меня же стоят и работают.