Как собирать статистику кликов по социальным кнопкам в Google Analytics

18.06.2011 Аналитика и юзабилити

Некоторое время назад Google выпустил кнопку +1 для сторонних сайтов. Это был неплохой повод отпраздновать тожество социальной конверсии на целевых страницах.

Теперь даже ленивый маркетолог занимается установкой кода для отслеживания эффекта от социальных кнопок для продвижения сайта. Имеются в виду не только +1, а также фэйсбуковый Like, Fallow из Твиттера и подобные.

Многие включают кнопки социалок на страницы своих сайтов, но очень немногие умеют отслеживать по ним статистику. В этой статье представлены технические инструкции по внедрению образцов кода Javascript на сайт для начала подсчета социальной активности пользователей.

Обратная связь в Javascript и Google Analytics

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

Чтобы проследить активность пользователей, многие социальные сети начали предоставлять функцию обратной связи (callback) в своих кодах. Например, Google +1 позволяет уточнить, какого рода callback вы хотите получить, – когда пользователь добавляет +1 или снимает свой голос.

Для внедрения этой информации в Google Analytics можно воспользоваться их API по отслеживанию событий и записать пользователя, кликнувшего на кнопку +1 на странице чем-то вроде этого кода в функции callback:

_gaq.push(['_trackEvent', 'Sharing', 'Google +1 On']);

Пример: Социальная конверсия кнопки Google +1

>Нужно попасть для начала на http://www.google.com/webmasters/+1/button/index.html - страницу, где вебмастер может сам изменять код своей кнопки. По умолчанию стандартная кнопка без всяких дополнительных функций выглядит так

<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone></g:plusone>

Во-первых, блок <script> должен, по-видимому, отправиться в самый низ страницы, поближе к закрывающему тегу </body>. Во-вторых, строка <g:plusone> может быть размещена в любом месте страницы, где вы хотели бы увидеть кнопку +1.

Теперь нам нужно добавить функцию callback для подсчета событий, связанных с кнопкой +1. Назовем эту обратную связь plusoneCallback, добавим ее к тегу кнопки +1 под «дополнительными функциями» (“advanced options”) в конфигураторе кода Google:

В результате изменится вторая часть кода – тег <g:plusone>, куда мы добавим атрибут callback:

<!-- Place this tag where you want the +1 button to render -->

<g:plusone callback="plusoneCallback"></g:plusone>

Теперь активируем функцию обратной связи, добавив его в начало блока <script>, который размещен внизу страницы. Для примера используем систему Google Analytics, однако, и другие системы можно аналогичным образом настроить для подсчета конверсий кнопки +1:

<!-- Place this tag in your head or just before your close body tag -->

<script type="text/javascript">

function plusoneCallback(plusoneObj)

{

   if (plusoneObj && plusoneObj.state && plusoneObj.state == "off") {

      _gaq.push(['_trackEvent', 'Sharing', 'Google +1 Off']);

   }

   else {

      _gaq.push(['_trackEvent', 'Sharing', 'Google +1 On']);

   }

}

</script>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Почитать о доступных дополнительных функциях можно на официальной странице API кнопки +1.

Пример: Социальная конверсия фейсбукового Like

Facebook предоставляет похожий механизм обратной связи, только называет это подпиской на события.

В случае с Facebook вам может потребоваться регистрация Facebook developer, чтобы получить доступ к коду социалки. После завершения регистрации вы можете попасть на страницу плагина кнопки Like и получить там код вроде этого:

<div id="fb-root"></div>

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

<fb:like send="true" width="450" show_faces="true" font=""></fb:like>

Этот код нужно разместить там, где должна появляться кнопка Like.

Затем можно отслеживать действия с кнопкой Like, подписавшись на Facebook events с помощью небольшого фрагмента Javascript. Если вы хотите получать статистику кликов по Like в Google Analytics, можно добавить следующее к коду кнопки, прямо перед закрывающим тегом </body>:

<script type="text/javascript">

FB.Event.subscribe('edge.create', function(response) {

  _gaq.push(['_trackEvent', 'Sharing', 'Facebook Like']);

});

</script>

Пример: Социальная конверсия Twitter Follow

К нашему счастью, Twitter предлагает очень устойчивое API для отслеживания кликов по кнопке Follow:

<a href="http://twitter.com/ioninteractive"

class="twitter-follow-button">Follow @ioninteractive</a>

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

<script type="text/javascript">

  function followCallback(intent_event) {

    if (intent_event) {

      _gaq.push(['_trackEvent', 'Sharing', 'Twitter Follow']);

    }

  }

  twttr.events.bind('follow', followCallback);

</script>

Можно добавить весь этот блок в то место кода, где должна будет размещаться кнопка Follow, достаточно лишь заменить “ioninteractive” на ваш Твиттер-аккаунт.

 
Больше интересных статей

Оставьте номер телефона, чтобы наш менеджер связался с вами в удобное для вас время

Ваше имя*
Ваш номер телефона*
Тема для обсуждения
Выберите удобное время для звонка
9:00 9:15 9:30 9:45 10:00 10:15 10:30 10:45 11:00 11:15 11:30 11:45 12:00 12:15 12:30 12:45 13:00 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 15:30 15:45 16:00 16:15 16:30 16:45 17:00 17:15 17:30 17:45
Виды услуг
ОбзорМаксимальный размер файла - 10 мб