Отслеживание комментариев ВК в Google Analytics с помощью GTM
В этой статье я покажу вам, как отслеживать добавление и удаление комментариев виджета ВКонтакте, встроенного на сайт, с помощью Google Tag Manager и автоматически отправлять эти данные в Google Analytics.
Предположим, мы установили на своем сайте виджет комментариев ВКонтакте для того, чтобы пользователи делились мнением о вашей деятельности:
Виджет комментариев на сайте graphanalytics.ru
И хотим отслеживать в аналитике комментарии, которые пользователи оставляют в этом виджете и которые удаляют. Это можно сделать благодаря Open API и встроенным событиям ВКонтакте.
Примечание: я целенаправленно опущу настройку виджета комментариев, потому как добавить его на сайт очень просто, если следовать этой инструкции.
Разберем два способа передачи данных в Google Analytics:
- в отчеты Источники трафика - Социальные сети - Социальные модули;
- в отчеты Поведение - События - Лучшие события.
Большая часть действий в обеих настройках будет одинакова.
Способ №1
Переходим в Google Tag Manager и создаем тег типа Пользовательский HTML тег. Вставляем в него следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?167"></script> <script type="text/javascript"> VK.init({apiId: 7440570, onlyWidgets: true}); </script> <script type="text/javascript"> VK.Widgets.Comments('vk_comments', {limit: 5, attach: '*'}); VK.Observer.subscribe('widgets.comments.new_comment', function addCommentVK(num, last_comment, date) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'socialInteraction', 'socialNetwork': 'ВКонтакте', 'socialAction': 'Добавление комментария', 'socialTarget':{{Page Path}}, 'num':num, 'last_comment':last_comment, 'date':date }); }); </script> <script type="text/javascript"> VK.Observer.subscribe('widgets.comments.delete_comment', function deleteCommentVK(num, last_comment, date) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'socialInteraction', 'socialNetwork': 'ВКонтакте', 'socialAction': 'Удаление комментария', 'socialTarget':{{Page Path}}, 'date':date }); }); </script> |
В Google Tag Manager это будет выглядеть так:
Отслеживание комментариев ВК
Давайте разберем все строчки кода по отдельности. Первая часть достаточно простая:
|
1 2 3 4 5 |
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?167"></script> <script type="text/javascript"> VK.init({apiId: 7440570, onlyWidgets: true}); </script> |
Это код виджета комментариев ВК, который предоставляется после создания на странице https://vk.com/dev/Comments и который нужно разместить в теге <head> на тех страницах, где будет размещен виджет.
apiId: 7440570- это уникальный идентификатор приложения (у каждого он свой);
Настройки виджета комментариев ВК
Затем идет строчка:
|
1 |
VK.Widgets.Comments('vk_comments', {limit: 5, attach: '*'}); |
Она тоже является частью настроек виджета, отображает максимальное число комментариев на странице (limit: 5) и разрешает пользователям прикреплять различные типы вложений (attach: '*' - все типы разрешены), включая фотографии, граффити, видео, аудио и ссылки. Исходя из вышеописанного, весь этот код принадлежит самому виджету и не влияет на настройку событий, которые мы будем отправлять в Google Analytics. Этот кусок кода можно добавить и не через GTM. А вот дальше начинается самое интересное.
Для обработки событий в Open API мы будем использовать метод VK.Observer.subscribe с параметрами event(string), handler(function). Он добавляет функцию, переданную в параметре handler, в список получателей события, которое указано в параметре event. А события, которые мы будем отслеживать с помощью Google Tag Manager - это добавление и удаление комментария.
При публикации комментария виджет передает событие widgets.comments.new_comment, а при удалении — widgets.comments.delete_comment. При этом в функцию-обработчик будут переданы 4 параметра:
- num (integer, число) — количество комментариев;
- last_comment (string, строка) — текст последнего комментария;
- date (string, строка) — текущая дата в формате ISO 8601 (например, 2004-02-12T15:19:21+00:00);
- sign (string, строка) — контрольная сумма md5 от конкатенации четырех строк: api_secret, date, num, last_comment.
В большинстве случаев, можно игнорировать последние два параметра и обрабатывать только первые два. Подробнее читайте в официальной документации ВКонтакте.
В этом примере я добавил только 3 параметра, без sign:
|
1 |
VK.Observer.subscribe('widgets.comments.new_comment', function addCommentVK(num, last_comment, date) |
где function addCommentVK - название функции добавления комментария (function deleteCommentVKдля удаления);
Далее идет всем известная конструкция с уровнем данных (dataLayer):
|
1 2 3 4 5 6 7 8 9 10 |
window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'socialInteraction', 'socialNetwork': 'ВКонтакте', 'socialAction': 'Добавление комментария', 'socialTarget':{{Page Path}}, 'num':num, 'last_comment':last_comment, 'date':date }); |
где event - socialInteraction. Это важно, поскольку мы хотим, чтобы данные передавались в отчеты Источники трафика - Социальные сети - Социальные модули. Для отслеживания социальных взаимодействий в Google Analytics предусмотрен специальный тип обращения social, в котором есть 3 обязательных поля: socialNetwork, socialAction и socialTarget.
Поля типа обращения "социальное взаимодействие"
Подробнее читайте в официальной справке Google. В нашем dataLayer как раз присутствуют все 3 этих параметра:
- 'socialNetwork': 'ВКонтакте'
- 'socialAction': 'Добавление комментария'
- 'socialTarget':{{Page Path}}
Во встроенной переменной {{Page Path}} будет передаваться часть URL-страницы, на которой был размещен виджет и оставлен комментарий. Также в уровень данных передается 3 параметра от ВКонтакте: num, last_comment и date.
Это был скрипт для отслеживания добавления комментария. Чуть ниже по коду размещен аналогичный, только с событием widgets.comments.delete_comment с измененной переменной socialAction (Удаление комментария) и без num и last_comment, поскольку для этого события они отрабатываются не так, как нужно.
Триггер активации - Все страницы (All Pages). Или вы можете задать свой собственный, например, на которых размещен виджет комментариев ВК. Теперь мы можем перейти в режим отладки GTM, чтобы посмотреть, как отрабатывают наши события.
Добавление комментария ВК
Как видим, при добавлении комментария срабатывает события socialInteraction и формируется уровень данных со всеми необходимыми переменными. В num передалось значение 1, поскольку в виджете всего 1 комментарий, в last_comment отобразился текст этого комментария, а в date - точная дата добавленного комментария.
Тоже самое и с удалением комментария - срабатывает событие, но немного с другим dataLayer:
Удаление комментария
Теперь мы можем создать переменные типа Переменная уровня данных, чтобы извлечь все эти значения.
Переменная уровня данных socialNetwork
Аналогично со всеми остальными переменными: socialAction, socialTarget, num, last_comment и date. После этого создайте триггер типа Пользовательское событие с названием нашего события socialInteraction:
Пользовательское событие socialInteraction
В завершении необходимо создать тег типа Universal Analytics с типом Социальные сети. Добавьте в поле Сеть переменную socialNetwork, в Действие - socialAction, а в Целевое действие - socialTarget.
Тег Universal Analytics с типом "Социальные сети"
Триггер активации - пользовательское событие socialIntercation. Сохраните настройки.
Теперь при каждом добавлении или удалении будет срабатывать триггер socialIntercation и данные будут отправляться в Google Analytics. Посмотреть их можно в отчете Источники трафика - Социальные сети - Социальные модули. Данные отобразятся в течение 24 часов после совершения событий.
Источники трафика - Социальные сети - Социальные модули
Примечание: эти события в режиме реального времени в Google Analytics отображаться не будут.
Способ №2
Теперь мы хотим, чтобы наши данные отправлялись не в специальные отчеты типа Социальные сети - Социальные модули, а в обычные События - Лучшие события. Все, что нужно сделать - это изменить тег Universal Analytics с типа Социальные сети на Событие. В качестве дополнительных метрик вы можете передать оставшиеся 3 параметра, которые заложены в функцию-обработчик ВКонтакте: num, last_comment и date. Например, передать дату и комментарий пользователя:
Тег Universal Analytics с типом "Событие"
Сохраните изменения. При такой настройке можно проверить корректность передачи данных с помощью отчетов В режиме реального времени.
Событие - Добавление комментария
Как видим, событие об успешном добавлении комментария передалось в Google Analytics. Теперь можно посмотреть в отчете Поведение - События - Лучшие события.
