Налаштування Google Analytics для відстеження соціальних дій на сайті
І ще один приємний момент для вас - пост буде забезпечений конкретними кейсами про те, як все це зробити, як налаштувати та проаналізувати!
Але спершу я хочу показати вам, що в результаті ми отримаємо після всіх виконаних дій.
Краса, чи не так? Я теж думаю, що це чудово!
Тепер справа за малим – зробити також красиво і вам, дорогі читачі.
Відстеження Twitter
Отже, асинхронно підвантажуємо Twitter API:
Цей код треба вставити в сторінку між тегами
Тут когось може збентежити такий момент, наприклад, кнопка твита показується не на всіх сторінках сайту, а тільки на якихось конкретних і тому не хочеться, щоб код завантажувався завжди. У такому випадку описаний вище код можна вставити разом із кодом виведення кнопки на сторінці.
Як ви помітили, у коді стоїть подія onload, яка означає, що після завершення завантаження яваскрипта у нас підтягується трекер _ga.trackTwitter; про це буде розказано далі.
Далі в потрібному місці сторінки треба вставити код виведення самої кнопки. Його ви можете сформувати на офіційній сторінці Twitter'а для девелоперів. Код усім нам добре відомий і виглядає так:
Якщо ви помітили, код відрізняється від оригіналу тим, що в ньому немає рядка . Вона нам тут не потрібна, тому що цей JS-скрипт ми вже завантажили асинхронно.
Впровадження Твіттера завершено, переходимо далі до Facebook.
Відстеження Facebook
Алгоритм застосування практично такий самий як і для Твіттера. Спочатку асинхронноініціюємо JS-API, а потім вставляємо до сторінки.
А тепер по порядку. Йдемо на сторінку для розробників, щоб отримати код кнопки. Налаштовуємо в консутруктор все як вам подобається. Тиснемо GetCode, переходимо на вкладочку XFBML і копіюємо вміст третього поля, воно виглядає приблизно так:
Далі трохи прокручуємо сторінку вниз, до заголовка "Step 2 - Get Open Graph Tags". Там бачимо черговий конструктор, але нам важливе лише поле Admin і 15-значне число нижче. Копіюємо. Це є ваш «Facebook IDs page administrators або Facebook Platform application ID», тобто це ваш ID або ID вашої програми в Facebook. Стандартно це просто ваш власний ID сторінки. Айдишник нам необхідний для можливості ініціалізації асинхронного завантаження JS-API.
UPD! appId нам більше не потрібен, у зв'язку з політикою facebook, що змінилася.
Коротше, в результаті нам необхідно отримати наступний код:
Як бачите, і в цьому коді при ініціалізації відбувається виклик трекера _ga.trackFacebook();.
Не забудьте замінити деякі значення, а саме: appId: '123456789012345' – обов'язково замініть на свій ID (ми його копіювали трохи раніше). - необов'язково, відповідає за зовнішній вигляд кнопки - при необхідності замініть на свій код (його ми так само встигли скопіювати раніше).
Отриманий код треба вставити в місце сторінки, де повинна виводитися кнопка Like.
Якщо передбачається виводити на одній сторінці кілька кнопок (можливо навіть різних), асинхронне завантаження JS не треба дублювати, просто в потрібні місця вставляйте .
Так із цим теж закінчили. Рухаємось далі – до Вконтакту.
Відстеження ВКонтакті
Механіка VK аналогічна механіці FB. Але якщо всі попередні коди можна було знайтиде-небудь на просторах зарубіжного інтернету, то код, який я покажу нижче, довелося складати самому.
Ідемо на сторінку офіційної документації контакту за кнопкою «Мені подобається». Підключаємо сайт, якщо він ще не підключений. Налаштовуємо зовнішній вигляд і копіюємо отриманий код кудись у блокнот.
Отримати в результаті нам треба щось таке:
Як і при налаштуванні Twitter та Facebook у цьому коді в момент ініціалізації JS відбувається виклик трекера _ga.trackVkontakte();.
До вставлення коду на сайт треба замінити деякі параметри: VK.init(); – обов'язково – треба замінити appId на свій, який видав вам конструктор. VK.Widgets.Like("vk_like", ); - необов'язково відповідає за зовнішній вигляд кнопки - при необхідності замініть на свій, сформований в конструкторі.
Після того, як внесли необхідні правки, можна вставляти отриманий код у те місце, де ви хочете бачити кнопку «Мені подобається».
Відстеження Google +1
Цей пункт я вказав тут лише для формальності, тому щотрекінг кнопки +1 відбувається за умовчанням для Google Analytics і ніякі додаткові налаштування не потрібні. Просто йдемо на офіційну сторінку від Гугла та вставляємо отриманий код на сайт.
Підключення файлу з трекерами
Найважливіший пункт, без якого нічого не відстежуватиметься.
У кожному коді, який ми збирали вище, були виклики трекерів _ga.track. Але самих трекерів у нас поки немає, і стандартний код GA їх не включає. Ми це виправимо, допоможемо Гуґлу зрозуміти, що ми від нього хочемо.Все, що нам треба зробити - це підвантажити додатковий JS-скрипт, ось він - https://alaev.info/wp-content/themes/creative/trackSocial.js .
Відкриваєте посилання, вказане вище, у браузері,тикаєте правою кнопкою у вікні, далі «Зберегти як. » і зберігаєте файл собі на комп, а потім завантажуєте на сервер у корінь (туди, де лежить index.php) і вставляєте між тегами наступний код:
Уважно! Не забудьте замінити site.ru на свій домен.
Важливий момент – код лічильника
Цей пункт не менш важливий за всі попередні. Я зараз хочу звернути увагу на місце розташування код лічильника Google Analytics в коді сторінки.Я настійно рекомендую всім прямо зараз взяти і перенести код лічильника GA (та й Яндекс.Метрики теж) в місце відразу після тега, що відкриває.
По-друге, це ніяк не позначиться на швидкості завантаження сайту, оскільки коди лічильників ПФ та ЯМ асинхронні, що означає їх завантаження паралельно до завантаження основного вмісту сайту. Тобто користувач взагалі нічого не помітить.
По-третє, це просто корисно, тому що точність статистики (мається на увазі в цілому, а не відстеження соцдій) буде вищою.
Чекліст - перевіряємо працездатність
Після стільки дій не дивно засумніватися в правильності налаштування, тому я вирішив додати в пост чекліста, який допоможе зрозуміти, чи все правильно зроблено.Всі пункти повинні бути суворо виконані:
Встановлення «з нуля» чи оновлення віджетів?
Ще один важливий момент.Якщо ви виконуєте встановлення кнопок на сайт вперше, то вам просто необхідно правильно виконати всі пункти, описані в пості.
Але якщо у вас на сайті вже є/були кнопки і віджети, і ви вирішили додати відстеження, то рекомендую видалити всі сліди кнопок, виклик JS-скриптів і все що може бути пов'язане з соціальними мережами. Це потрібно для правильної роботи всього механізму, який ми впроваджуємо. Ув іншому випадку можуть виникнути глюки, такі як, неправильне відображення, відмова GA рахувати і т.д.
Цифри просто сміття. Аналіз – править світом
Знаю, пафосно звучить, але це так. Якщо ви просто збираєтеся збирати циферки у звітах Аналітикса, навіть не намагайтеся щось робити, у вас нічого не вийде. Ні, ну цифри ви зберете, а навіщо? Ось і я кажу — нема чого!
З усіма отриманими даними треба працювати та аналізувати їх, щоб розуміти, як досягти кращого результату, примножити поточні досягнення.
Виходячи з вищесказаного можна буде робити висновки:
А що з іншими соцмережами?
Можливо, хтось із вас захоче запитати, а як бути з іншими соціальними мережами або кнопками? Я відповім.
Кнопка «Зберегти» або Share від ВКонтакте
Для цієї кнопки не передбачено в API жодних подій, тому правдиво відстежити збереження не вдасться. Але все ж таки вихід є, хоч і нетривіальний.Якщо вирішили все ж таки відстежувати share, то необхідно зробити наступне:
- У конструкторі вибрати стиль «Іконка» та скопіювати отриманий код.
- Змінити це
Кнопки від Мій Світ (my.mail.ru) та Однокласники
Тут узагалі моє хворе. Я бився з цими кнопками майже тиждень, складав різні реальні і нереальні варіанти. Але все безуспішно.
Події для цих кнопок в API mail.ru передбачені, але ось проблема - події призначені для кнопок, впроваджених у додатки, а для розміщених на сайтах кнопок ці події не спрацьовують.
Нещодавно я вступив у клуб розробників mail.ru щоб з'ясувати, як справи з подальшою розробкою API, зокрема поцікавився можливістю появи подій і для кнопок на сайтах, але поки щожодної відповіді не отримав. Я буду тримати вас у курсі!
А поки що, відстеження цих кнопокможливе за алгоритмом, описаним для кнопки зберегти від ВКонтакте. Якщо цього когось цікавить, викладу докладну інструкцію.
Ось такі справи, друзі. На сьогодні все. Вибачте за стільки об'ємний пост, але, повірте, воно того варте!