Отслеживание комментариев ВК в Google Analytics с помощью GTM

Апрель 30, 2020

В этой статье я покажу вам, как отслеживать добавление и удаление комментариев виджета ВКонтакте, встроенного на сайт, с помощью Google Tag Manager и автоматически отправлять эти данные в Google Analytics.

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

Отслеживание комментариев ВК с помощью GTM

Виджет комментариев на сайте graphanalytics.ru

И хотим отслеживать в аналитике комментарии, которые пользователи оставляют в этом виджете и которые удаляют. Это можно сделать благодаря Open API и встроенным событиям ВКонтакте.

Примечание: я целенаправленно опущу настройку виджета комментариев, потому как добавить его на сайт очень просто, если следовать этой инструкции.

Разберем два способа передачи данных в Google Analytics:

  1. в отчеты Источники трафика — Социальные сети — Социальные модули;
  2. в отчеты Поведение — События — Лучшие события.

Большая часть действий в обеих настройках будет одинакова.

Способ №1

Переходим в Google Tag Manager и создаем тег типа Пользовательский HTML тег. Вставляем в него следующий код:

В Google Tag Manager это будет выглядеть так:

Отслеживание комментариев ВК с помощью GTM

Отслеживание комментариев ВК

Давайте разберем все строчки кода по отдельности. Первая часть достаточно простая:

Это код виджета комментариев ВК, который предоставляется после создания на странице https://vk.com/dev/Comments и который нужно разместить в теге <head> на тех страницах, где будет размещен виджет.

  • apiId: 7440570 — это уникальный идентификатор приложения (у каждого он свой);
Отслеживание комментариев ВК с помощью GTM

Настройки виджета комментариев ВК

Затем идет строчка:

Она тоже является частью настроек виджета, отображает максимальное число комментариев на странице (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 параметра:

  1. num (integer, число) — количество комментариев;
  2. last_comment (string, строка) — текст последнего комментария;
  3. date (string, строка) — текущая дата в формате ISO 8601 (например, 2004-02-12T15:19:21+00:00);
  4. sign (string, строка) — контрольная сумма md5 от конкатенации четырех строк: api_secret, date, num, last_comment.

В большинстве случаев, можно игнорировать последние два параметра и обрабатывать только первые два. Подробнее читайте в официальной документации ВКонтакте.

В этом примере я добавил только 3 параметра, без sign:

где function addCommentVK — название функции добавления комментария (function deleteCommentVKдля удаления);

Далее идет всем известная конструкция с уровнем данных (dataLayer):

где event — socialInteraction. Это важно, поскольку мы хотим, чтобы данные передавались в отчеты Источники трафика — Социальные сети — Социальные модули. Для отслеживания социальных взаимодействий в Google Analytics предусмотрен специальный тип обращения social, в котором есть 3 обязательных поля: socialNetwork, socialAction и socialTarget.

Отслеживание комментариев ВК с помощью GTM

Поля типа обращения «социальное взаимодействие»

Подробнее читайте в официальной справке 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, чтобы посмотреть, как отрабатывают наши события.

Отслеживание комментариев ВК с помощью GTM

Добавление комментария ВК

Как видим, при добавлении комментария срабатывает события socialInteraction и формируется уровень данных со всеми необходимыми переменными. В num передалось значение 1, поскольку в виджете всего 1 комментарий, в last_comment отобразился текст этого комментария, а в date — точная дата добавленного комментария.

Тоже самое и с удалением комментария — срабатывает событие, но немного с другим dataLayer:

Отслеживание комментариев ВК с помощью GTM

Удаление комментария

Теперь мы можем создать переменные типа Переменная уровня данных, чтобы извлечь все эти значения.

Отслеживание комментариев ВК с помощью GTM

Переменная уровня данных socialNetwork

Аналогично со всеми остальными переменными: socialAction, socialTarget, num, last_comment и date. После этого создайте триггер типа Пользовательское событие с названием нашего события socialInteraction:

Отслеживание комментариев ВК с помощью GTM

Пользовательское событие socialInteraction

В завершении необходимо создать тег типа Universal Analytics с типом Социальные сети. Добавьте в поле Сеть переменную socialNetwork, в Действие — socialAction, а в Целевое действие — socialTarget.

Отслеживание комментариев ВК с помощью GTM

Тег Universal Analytics с типом «Социальные сети»

Триггер активации — пользовательское событие socialIntercation. Сохраните настройки.

Теперь при каждом добавлении или удалении будет срабатывать триггер socialIntercation и данные будут отправляться в Google Analytics. Посмотреть их можно в отчете Источники трафика — Социальные сети — Социальные модули. Данные отобразятся в течение 24 часов после совершения событий.

Отслеживание комментариев ВК с помощью GTM

Источники трафика — Социальные сети — Социальные модули

Примечание: эти события в режиме реального времени в Google Analytics отображаться не будут.

Способ №2

Теперь мы хотим, чтобы наши данные отправлялись не в специальные отчеты типа Социальные сети — Социальные модули, а в обычные События — Лучшие события. Все, что нужно сделать — это изменить тег Universal Analytics с типа Социальные сети на Событие. В качестве дополнительных метрик вы можете передать оставшиеся 3 параметра, которые заложены в функцию-обработчик ВКонтакте: num, last_comment и date. Например, передать дату и комментарий пользователя:

Отслеживание комментариев ВК с помощью GTM

Тег Universal Analytics с типом «Событие»

Сохраните изменения. При такой настройке можно проверить корректность передачи данных с помощью отчетов В режиме реального времени.

Отслеживание комментариев ВК с помощью GTM

Событие — Добавление комментария

Как видим, событие об успешном добавлении комментария передалось в Google Analytics. Теперь можно посмотреть в отчете Поведение — События — Лучшие события.

Отслеживание комментариев ВК в Google Analytics с помощью GTM

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике