Привіт, хлопці. Продовжую серію постів про «правильної» налаштуванні і використанні Google Analytics. Як і обіцяв раніше, завів нову рубрику на блозі «Аналітика», і буду сюди складати вкрай корисні і цікаві пости!

А сьогодні ми поговоримо про дуже цікавої, корисної і дуже актуальній темі – відстеження соціальних дій на сайті. Тобто ми навчимо Google Analytics вважати всі події пов’язані з соцмережі, наприклад, будемо вважати кількість твітів, лайків/анлайков для Facebook і ВКонтакте, а найголовніше ми зможемо дізнатися, хто ці люди, які вчинили діяння, звідки вони прийшли і що робили.

І ще один приємний момент для вас – пост буде забезпечений конкретними кейсами про те, як все це зробити, як налаштувати і проаналізувати!

Але спершу я хочу показати вам, що в результаті ми отримаємо, після всіх виконаних дій.

Краса, чи не правда? Я теж думаю, що це чудово!

Тепер справа за малим – зробити красиво і вам, дорогі читачі.

У пості я будуть розповідати про всі найпопулярніші соціальні сервіси, ми всі їх чудово знаємо – це Twitter, Facebook, Vkontakte, Google +1 (його я тут згадав, хоча його налаштування не потрібно, т. к. GA його вважає за замовчуванням). І якщо раптом щось із списку вам ну потрібно, то можете просто пропустити частину поста, переходячи до потрібних заголовків, всі розділи незалежні.

Відстеження Twitter

Почнемо комплексну налаштування з Твіттера. Як і у всіх пунктах ми будемо починати з установки завантаження JS-коду. Чому я про це кажу, тому що стандартні методи, які видаються соцмережі для вставки в код сайту тут не підійдуть. Нам необхідно завантажувати код асинхронно, мало того, що це корисно для швидкості роботи сайту, але і лише цим способом ми зможемо впровадити код відстеження в механізм роботи соціальних кнопок.

Отже, асинхронно подгружаем Twitter API:


<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>

(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);
})();

Цей код треба вставити в сторінку між тегами

Тут когось може збентежити момент такий, наприклад, кнопка твіту не показується на всіх сторінках сайту, а тільки на якихось конкретних і тому не хочеться, щоб код завантажувався завжди. В такому випадку, описаний вище код можна вставити разом з кодом виведення кнопки на сторінці.

Як ви помітили, в коді стоїть подія onload, яке означає, що по завершенні завантаження яваскрипт у нас підтягується трекер _ga.trackTwitter; про це буде розказано далі.

Далі в потрібному місці сторінки треба вставити код виведення самої кнопки. Його ви можете сформувати на офіційній сторінці Twitter ‘ а для девелоперів. Код всім нам добре відомий і виглядає так:

<a href=“https://twitter.com/share” class=“twitter-share-button” data-count=“vertical” data-via=“victimalex” data-lang=“ru”>Твітнуть</a>

Твітнуть

Якщо ви помітили, даний код відрізняється від оригіналу тим, що в ньому немає рядки . Вона нам тут не потрібна, так як цей JS-скрипт ми вже завантажили асинхронно.

Впровадження Твіттера завершено, переходимо далі, до Facebook.

Відстеження Facebook

Алгоритм впровадження практично такий же як і для Твіттера. Спочатку асинхронно ініціюємо JS-API, а потім вставляємо в сторінку.

А тепер по порядку. Йдемо на сторінку для розробників для отримання коду кнопки. Налаштовуємо в консутрукторе все як вам подобається. Тиснемо GetCode, переходимо на вкладочку XFBML і копіюємо вміст третього поля, воно виглядає приблизно так:

=“false” layout=“button_count” width=“200” show_faces=“false”></fb:like>

Далі трохи прокручуємо сторінку вниз, до заголовка «Step 2 — Get Open Graph Tags». Там бачимо черговий конструктор, але нам важливо лише поле «Admin» і 15-значне число нижче. Копіюємо. Це є ваш «Facebook IDs of page administrators or a Facebook Platform application ID», іншими словами це ваш ID або ID вашого застосування в Facebook. Стандартно це просто ваш власний id сторінки. Айдишник нам необхідний для ініціалізації асинхронної завантаження JS-API.

UPD! appId нам більше не потрібен, у зв’язку з новою політикою facebook.

Коротше, в підсумку нам необхідно отримати наступний код:



<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>
=“false” layout=“button_count” width=“200” show_faces=“false”></fb:like>

// 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();
};

Як бачите, і в цьому коді при ініціалізації відбувається виклик трекера _ga.trackFacebook ();.

Не забудьте замінити деякі значення, а саме:
appId: ‘123456789012345’ – обов’язково замініть на свій ID (ми його копіювали трохи раніше).
— необов’язково, відповідає за зовнішній вигляд кнопки — при необхідності замініть на свій код (його ми встигли скопіювати раніше).

Отриманий код треба вставити в те місце сторінки, де повинна виводитися кнопка Like.

Якщо передбачається виводити на одній сторінці декілька кнопок (можливо навіть різних), то асинхронну завантаження JS не треба дублювати, просто в потрібні місця вставляйте .

Так з цим теж закінчили. Рухаємося далі – до Вконтакте.

Відстеження ВКонтакте

Механіка VK аналогічна механіці FB. Але якщо всі попередні код можна було знайти де-небудь на теренах забугорного інтернету, то код, який я покажу нижче, довелося писати самому.

Йдемо на сторінку офіційній документації контакту по кнопці «Мені подобається». Підключаємо сайт, якщо він у вас ще не підключений. Налаштовуємо зовнішній вигляд і копіюємо отриманий код куди-небудь в блокнот.

Отримати в підсумку нам треба щось таке:


<div id=“vk_api_transport”></div>
<script type=“text/javascript”>
window.vkAsyncInit = function() {
VK.init({apiId: 1234567, onlyWidgets: true});
VK.Widgets.Like(“vk_like”, {type: “button”});
_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>
<div id=“vk_like”></div>

window.vkAsyncInit = function() {
VK.init({apiId: 1234567, onlyWidgets: true});
VK.Widgets.Like(“vk_like”, {type: “button”});
_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);

Як і при налаштуванні Twitter і Facebook в цьому коді в момент ініціалізації JS відбувається виклик трекера _ga.trackVkontakte ();.

До вставки коду на сайт треба замінити деякі параметри:
VK.init({apiId: 1234567, onlyWidgets: true}); – обов’язково — треба замінити appId на свій, який видав вам конструктор.
VK.Widgets.Like(“vk_like”, {type: “button”}); – необов’язково, відповідає за зовнішній вигляд кнопки — при необхідності замініть на свій, сформований в конструкторі.

Після того, як внесли необхідні правки, можна вставляти отриманий код в те місце, де ви хочете бачити кнопку «Мені подобається».

Відстеження Google +1

Цей пункт я тут вказав лише для формальності, тому що трекінг кнопки +1 відбувається за замовчуванням Google Analytics і ніякі додаткові налаштування не потрібні. Просто йдемо на офіційну сторінку від Гугла і вставляємо отриманий код на сайт.

Підключення файлу з трекерами

Найважливіший пункт, без якого нічого не буде відслідковуватися.

У кожному коді, що ми збирали вище, були виклики трекерів _ga.track. Але ж самих трекерів у нас поки немає, і стандартний код GA їх не включає в себе. Ми це виправимо, допоможемо Гуглу зрозуміти, що ми від нього хочемо. Все що нам треба зробити – це довантажити додатковий JS-скрипт, ось він — http://alaev.info/wp-content/themes/creative/trackSocial.js.

Відкриваєте посилання, вказане вище, в браузері, тикаєте правою кнопкою миші у вікні, далі «Зберегти як…» і зберігаєте файл собі на комп, а потім завантажуєте на сервер в корінь (туди, де лежить index.php) і вставляєте між тегами наступний код:

<script type=“text/javascript” src=“http://site.ru/trackSocial.js”></script>

Уважно! Не забудьте замінити site.ru на свій домен.

Важливий момент – код лічильника

Даний пункт не менш важливий всіх попередніх. Я зараз хочу звернути увагу на місце розташування код лічильника Google Analytics в коді сторінки. Я настійно рекомендую всім прямо зараз взяти і перенести код лічильника GA (так і Яндекс.Метрики теж) місце відразу після відкриваючого тега .

По-перше, відстеження соціальних дій, а саме відпрацювання трекерів можлива тільки після завантаження основного коду лічильника. Мова йде про розташування на сторінці.

По-друге, це ніяк не позначиться на швидкості завантаження сайту, так як коди лічильників ПФ і ЯМ асинхронні, що означає їх завантаження паралельно завантаженні основного вмісту сайту. Тобто користувач взагалі нічого не помітить.

По-третє, це просто корисно, тому що точність статистики (мається на увазі в цілому, а не відстеження соцдействий) буде вище.

Чекліст — перевіряємо працездатність

Після стількох дій дивно засумніватися в правильності налаштування, тому я вирішив додати в пост чекліст, який допоможе зрозуміти, чи все правильно зроблено.
Всі пункти повинні бути строго виконані:

  • Використовується асинхронний код лічильника Google Analytics і розташований він відразу після відкриваючого .
  • Після всіх змін кнопки і віджети відображаються на сторінці і працюють нормально.
  • У вихідному коді присутня . На сторінці сайту натискаємо Ctrl+U для перегляду вихідного коду, знаходимо зазначену позицію і натискаємо на посилання на JS файл, він повинен відкритися і показати вміст.
  • В обліковому записі Google Analytics у вас обраний новий інтерфейс, він повинен бути схожий на інтерфейс на моїх скріншотах. Т. к. в старому інтерфейсі немає звітів про соціальному взаємодії.
  • Потыкайте соціальні кнопки самі або попросіть друзів. Tweet, FB like, FB unlike, FB send, VK like VK unlike — ось список всіх можливих дій.
  • Через добу в звітах GA можна буде побачити результати і, відповідно, загальну працездатність.
  • Установка «з нуля» або оновлення існуючих віджетів?

    Ще один важливий момент. Якщо ви виконуєте встановлення кнопок на сайт вперше, то вам просто необхідно правильно виконати всі пункти, зазначені в пості.

    Але якщо у вас на сайті вже є/були кнопки і віджети, і ви вирішили додати відстеження, то настійно рекомендую видалити всі сліди кнопок, виклик JS-скриптів і все що може бути пов’язано з соц мережами. Це необхідно для правильної роботи всього механізму, який ми впроваджуємо. В іншому випадку можуть виникнути глюки, такі як, неправильне відображення, відмова GA вважати і т. д.

    Цифри – просто сміття. Аналіз – править світом

    Знаю, пафосно звучить, але це так. Якщо ви просто збираєтеся збирати циферки в звітах Аналитикса, навіть не намагайтеся щось робити, у вас нічого не вийде хорошого. Ні, ну цифри звичайно, ви зберете, а навіщо? От і я кажу — нема чого!

    З усіма отриманими даними треба працювати і аналізувати їх, щоб розуміти, як домогтися кращого результату, примножити поточні досягнення.

    Отже, що ж у результаті ми отримаємо з тієї інформації, що нам дасть відстеження соціальних дій:

    • Красиві графіки – це офігенно, можна похвалитися перед поцонами на районі. Жартую, звичайно 😉
    • Ми можемо дізнатися, скільки соціальних дій було здійснено на сайті за певний період. А так само здійснював один і той же користувач кілька дій за сесію.
    • Можемо дізнатися на яких сторінках відбувалася активність і через які саме інструменти. Тобто ми будемо знати, які матеріали сайту, що сподобалися відвідувачам, а які не викликали бажання поділитися.
    • Можемо дізнатися все соцдем характеристики користувача, вчинила дію.
    • І саме круте! Це джерело переходу, яка спричинила за собою соціальну дію. Тобто прийшов користувач пошукача або перейшов з іншого сайту. Відразу буде зрозуміло, де розміщувати анонси/прес-релізи, а де не варто.

    Виходячи з вищесказаного можна буде робити висновки:

    • Які соціальні мережі найбільше любить і використовує ваша цільова аудиторія.
    • В якій соцмережі варто посилювати свою присутність і розводити активність, а якою мережею можна знехтувати.
    • Варто впроваджувати додаткові можливості самої використовуваної соцмережі на сайт (віджет коментарів, авторизацію, livesream тощо).
    • І взагалі купа-купа всього, що мені навіть поки відразу в голову не приходить.

    А що з іншими соцмережами?

    Може бути, хтось із вас захоче запитати, а як бути з іншими соц мережами або кнопками? Я відповім.

    Кнопка «Зберегти» або Share ВКонтакте

    Для цієї кнопки не передбачено в API ніяких подій, тому правдиво відстежити збереження не вийде. Але все ж вихід є, хоч і нетривіальний.
    Якщо вирішили все ж відстежувати share, то необхідно зробити наступне:

    • У конструкторі вибрати стиль «Іконка» і скопіювати отриманий код.
    • Змінити це
      document.write(VK.Share.button(false,{type: “custom”, text: “<img src=\“http://vk.com/images/vk32.png?1\” />“}));

      document.write(VK.Share.button(false,{type: “custom”, text: ““}));

      Ось так

      document.write(VK.Share.button(false,{type: “custom”, text: “<img src=\“http://vk.com/images/vk32.png?1\” onClick=\“_gaq.push([‘_trackSocial’, ‘вконтакте’, ‘share’]);\”/>“}));

      document.write(VK.Share.button(false,{type: “custom”, text: ““}));

    Кнопки від Мій Світ (my.mail.ru) і Однокласники

    Тут взагалі моє хворе. Я бився з цими кнопками майже тиждень, складав всякі реальні і нереальні варіанти. Але все безуспішно.

    Події для цих кнопок в API mail.ru передбачені, але ось заковика – події призначені для кнопок, впроваджених в додатки, а для розміщених на сайтах кнопок ці події не спрацьовують.

    Не так давно я вступив у клуб розробників mail.ru щоб з’ясувати, як йдуть справи з подальшою розробкою API, зокрема поцікавився можливістю появи подій і для кнопок на сайтах, але поки ніякої відповіді не отримав. Я буду тримати вас у курсі!

    А поки що, відстеження цих кнопок можливо за алгоритмом, описаним для кнопки зберегти від ВКонтакте. Якщо це когось цікавить, викладу тут докладну інструкцію.

    Ось такі справи, друзі. На сьогодні все. Вибачте за стільки об’ємний пост, але, повірте, воно того варте!

    Задавайте питання, пишіть коментарі, обговорюйте, і не забувайте тиснути на соціальні кнопки нижче! Спасибі.

    З повагою, Олександр Алаєв