Налаштування Google Analytics для відстеження соціальних дій на сайті

відстеження Twitter
відстеження Facebook
відстеження ВКонтакте
Відстеження Google +1
Підключення файлу з трекера
Важливий момент - код лічильника
Чекліст - перевіряємо працездатність
Установка «з нуля» або оновлення існуючих віджетів?
Цифри - просто сміття. Аналіз - править світом
А що з іншими соцмережами?
Кнопка «Зберегти» або Share від ВКонтакте
Кнопки від Мой Мир (my.mail.ru) і Однокласники

Опубліковано: 22 листопада 2011 / Оновлене: 7 листопад 2012

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

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

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

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

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

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

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

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

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

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

<! - ПОЧАТОК Load Twitter JS-API asynchronously + GA.tracking -> <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> <! - КІНЕЦЬ Load Twitter JS-API asynchronously + GA.tracking ->

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

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

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

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

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

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

Якщо ви помітили, даний код відрізняється від оригіналу тим, що в ньому немає рядка <script type = "text / javascript" src = "// platform.twitter.com/widgets.js"> </ script>. Вона нам тут не потрібна, так як цей JS-скрипт ми вже завантажили асинхронно.

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

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

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

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

<Fb: like send = "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.

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

<! - ПОЧАТОК Facebook button + GA.tracking -> <! - Facebook async loading of JSAPI -> <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> <fb: like send = "false" layout = "button_count" width = "200" show_faces = "false"> </ fb: like> <! - КІНЕЦЬ Facebook button + GA.tracking ->

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

Не забудьте замінити деякі значення, а саме:
appId: '123456789012345' - обов'язково - замініть на свій ID (ми його копіювали трохи раніше).
<Fb: like send = "false" layout = "button_count" width = "200" show_faces = "false"> </ fb: like> - необов'язково, відповідає за зовнішній вигляд кнопки - при необхідності замініть на свій код (його ми так ж встигли скопіювати раніше).

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

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

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

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

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

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

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

<! - ПОЧАТОК VK.like button + GA.tracking -> <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> <! - КІНЕЦЬ VK.like button + GA.tracking ->

Як і під час налаштування 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-скрипт, ось він - https://alaev.info/wp-content/themes/creative/trackSocial.js.

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

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

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

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

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

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

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

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

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

використовується асинхронний код лічильника Google Analytics і розташований він відразу після відкриває <body>.
Після всіх змін кнопки і віджети відображаються на сторінці і працюють нормально.
У вихідному коді присутня <script type = "text / javascript" src = "http://site.ru/trackSocial.js"> </ script>. На сторінці сайту натискаємо 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: "<img src = \" http: //vk.com/images/vk32.png? 1 \ "/>"}) );
Ось так
document.write (VK.Share.button (false, {type: "custom", text: "<img src = \" http: //vk.com/images/vk32.png? 1 \ "onClick = \" _ gaq .push ([ '_ trackSocial', 'vkontakte', 'share']); \ "/>"}));
document.write (VK.Share.button (false, {type: "custom", text: "<img src = \" http: //vk.com/images/vk32.png? 1 \ "onClick = \" _ gaq .push ([ '_ trackSocial', 'vkontakte', 'share']); \ "/>"}));

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

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

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

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

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

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

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

З повагою, Олександр Алаев
Опубліковано: 22 листопада 2011

Краса, чи не так?
Установка «з нуля» або оновлення існуючих віджетів?
Ні, ну цифри ви звичайно зберете, а навіщо?
А що з іншими соцмережами?
Може бути, хтось із вас захоче запитати, а як бути з іншими соц мережами або кнопками?
32.png?
32.png?
32.png?
32.png?

Статьи