Цели Google Analytics, Яндекс.Метрики, Вконтакте и других систем

С февраля 2016 года виджет продажи билетов сам отправляет информацию о действиях пользователей в Google Analytics и Яндекс.Метрику, если они подключены в аккаунте организации. Для отслеживания целей достаточно указать ID счётчиков в настройках организации, после чего данные начнут поступать автоматически (для Яндекс.Метрики нужно произвести дополнительные настройки в аккаунте счетчика, об этом ниже). Кроме того, отслеживание целей будет работать как на страницах TimePad, так и в виджетах покупки билетов на сайтах, приложениях Вконтакте, а так же мобильных приложениях со встроенной продажей билетов через TimePad.

С сентября 2018 года данные также отправляются в системы ретаргетинга в виде Вконтакте. Данные отправляются в тот счетчик, который стоит на странице со встроенным виджетом. В случае страницы события этими счетчиками являются настроенные в личном кабинете в разделе "Интеграция" – "Коды ретаргетинга". Для отправки данных из виджета, установленного на сайте, на странице с виджетом нужно отдельно установить коды ретаргетинга. Если на странице установлено несколько кодов счетчиков, то события будут отправлены в каждый из них.

Список отслеживаемых целей и событий

Действие пользователя GA Event Action, цель Метрики, событие Вконтакте
Загрузил форму регистрации (например, увидел кнопку регистрации) [TimePad] loaded form
Увидел форму регистрации [TimePad] opened form
Заполнил поля анкеты регистрации [TimePad] edited field
Нажал на кнопку "Купить билет" [TimePad] clicked button
Увидел экран выбора способов оплаты [TimePad] show form Payment
Нажал на кнопку способа оплаты [TimePad] clicked button PaymentTypes
Произвел оплату
(Перешел на страницу подтверждения оплаты заказа)		 [TimePad] visited page PaymentConfirm
Произвел регистрацию
(Перешел на экран подтверждения бесплатной регистрации на событие)		 [TimePad] visited page RegisterConfirm
Произвел оплату* [TimePad] made eventPayment

Примечания

Цель "Произвел оплату" отправляется с нашего сервера в момент получения подтверждения оплаты от платежной системы. К сожалению, на данный момент, эта цель отправляется только в Google Analytics 4. Если вы хотите отслеживать успешную оплату на других счетчиках, читайте раздел "Как самостоятельно отслеживать событие оплаты билета" ниже.

В качестве GA Event Category отправляется user. В качестве GA Event Label мы отправляем строку event_id:<ID>;widget_mode:<default|vk|popup|event_list_widget>, где <ID> – id события, а widget_mode указывает на то, как использовался виджет.

  • default — обычный режим виджета
  • vk — виджет-приложение ВКонтакте
  • popup – виджет открывается в попапе ("виджет в режиме кнопки")
  • event_list_widget — виджет отображается внутри виджета списка событий

В Яндекс.Метрику отправляются те же самые данные, но в виде объекта.

Метрика

Для того чтобы отслеживать цели процесса регистрации в Яндекс.Метрике, укажите ID счётчика на странице настроек своей организации. Настройка применится в течение нескольких минут. Подробнее о том, как настроить счетчик для своего аккаунта, написано здесь.

Однако, чтобы Метрика смогла отслеживать цели, их необходимо добавить в интерфейсе Яндекс.Метрики. Для этого вам понадобится добавить в метрику цели из таблицы выше.

Зайдите в Настройки → Цели своего счетчика, добавьте цель типа "JavaScript событие" и в качестве идентификатора укажите текст из колонки "GA Event Action, ID цели Метрики". Название цели можно указать любое.

image

Вы также можете добавить все цели в виде гигантской составной цели. В этом случае в качестве условий шагов нужно выбирать "событие: идентификатор цели" и опять же указывать туда тексты из колонки "GA Event Action, ID цели Метрики".

image

Имейте в виду, что для Яндекс.Метрики отслеживание цели "Произвел оплату" пока работать не будет.

Добавление дополнительных целей

Если штатных событий вам недостаточно, вы можете использовать новый механизм и для отправки своих собственных целей. Обращаем внимание, что этот метод работает только для виджетов, установленных на вашем сайте. Для отслеживания поведения пользователей на страницах TimePad данный метод работать не будет.

Для настройки вам потребуется повеситься на какие-либо события внутри виджета и использовать предоставляемую виджетом функцию notifyTrackers, которая отправит событие на все подключенные счётчики. В примере кода ниже показывается как добавить отправку цели на событие нажатия на ввод промокода:

<script type="text/javascript">
  var handleTWFRenderReady = function (e) { // обработчик switchedToNewRenderTarget вызывается при инициализации iframe виджета
    // this — объект виджета
    var w = this; // сохраним его, чтобы не потерять в дальнейших коллбэках

    // this.$currentDocumentNode — document айфрейма виджета
    // $element.on() — способ в JQuery повесить обработчик на события элементов, которые могут еще не существовать. Это очень кстати, потому что на момент отработки этого коллбэка в айфрейме еще ничего не отображается
    w.$currentDocumentNode.on('submit', '.js-section-promocodeBlock', function() {
      w.notifyTrackers("entered promocodes"); // событие "[TimePad] entered promocodes" будет отправлено на подключенные счётчики  
    });

    // а если вы хотите, чтобы цель отправлялась только один раз за сессию работы с виджетом, то можете использовать специальную функцию–обертку once
    var U = TWF2.Util; // сохраним в переменную чтобы покороче было

    w.$currentDocumentNode.on('submit', '.js-section-promocodeBlock', U.once(function() {
      w.notifyTrackers("entered promocodes"); // событие "[TimePad] entered promocodes" будет отправлено на подключенные счётчики только один раз
    }));    
  }
</script>

<a href="https://АДРЕС_ВАШЕГО_СОБЫТИЯ" data-twf-placeholder="yes">Перейти к заказу билетов</a>

<script type="text/javascript" defer="defer" data-data-timepad-customized="АЙДИ_ИЗ_ВАШЕГО_КОДА" data-twf2s-event--id="АЙДИ_СОБЫТИЯ" data-timepad-widget-v2="event_register" src="https://timepad.ru/js/tpwf/loader/min/loader.js">
  (function() {
    return {
      "bindEvents": {
        "switchedToNewRenderTarget": "handleTWFRenderReady"
      }
    };
  })();
</script>

Не забудьте заменить АЙДИ_ИЗ_ВАШЕГО_КОДА, АЙДИ_СОБЫТИЯ, АДРЕС_ВАШЕГО_СОБЫТИЯ и счётчики на свои. Также обратите внимание, что в примере все объекты из window проверяются на существование перед взаимодействием.

Получить дополнительную информацию из заказа

Внутри handleTWFRenderReady переменная this будет указывать на объект виджета, так что из this.model можно выловить практически любую желаемую информацию.

Например, сумму заказа можно получить, просуммировав sum у элементов массива this.model.order.regevents — например, так:

var orderTotal = 0;
TWF2.Collections.A.each(this.model.order.regevents, function(re) {
  orderTotal += +re.sum;
});

Для отладки вы можете в любой момент написать в консоли браузера TWF2.getWidget().model, чтобы посмотреть, что в ней содержится. Но в коде TWF2.getWidget() использовать не советуем: этот метод небезопасен из-за асинхронной работы виджета.

Альтернативные способы отслеживать события

С новыми возможностями системы эти способы вам скорее всего не понадобятся, но на всякий случай мы приводим и их.

Как работать со своими счётчиками

Точно так же, только вместо нашей функции notifyTrackers используйте свои счётчики напрямую. Только с одной оговоркой – обязательно проверяйте, что они уже загружены.

<script type="text/javascript">
  var handleTWFRenderReady = function (e) { // обработчик switchedToNewRenderTarget вызывается при инициализации iframe виджета
    // this — объект виджета
    var w = this; // сохраним его, чтобы не потерять в дальнейших коллбэках

    // this.$currentDocumentNode — document айфрейма виджета
    // $element.on() — способ в JQuery повесить обработчик на события элементов, которые могут еще не существовать. Это очень кстати, потому что на момент отработки этого коллбэка в айфрейме еще ничего не отображается
    w.$currentDocumentNode.on('submit', '.js-section-promocodeBlock', function() {
      window.ga && window.ga('myTracker.send', {
          hitType: 'event',
          eventCategory: 'my_category',
          eventAction: "PROMOCODE_ENTERED",
          eventLabel: "my_label"
      });

      window.yaCounter123 && window.yaCounter123.reachGoal("GOOOOAL", "your_label");

      window.magicPonyCounterPlus && window.magicPonyCounterPlus.trackMuchProfit(1000, "euro");
    });
  }
</script>

<!-- > сам код вставки тот же самый что и выше < -->

Как самостоятельно отслеживать событие оплаты билета

Процесс покупки билета устроен так, что пользователь не всегда попадает на какую-то конкретную страницу после оплаты билета, а это накладывает существенные ограничение на отслеживание конверсий. Переход по success_url (то есть адресу, который должен быть показан после совершения пользователем оплаты в платежной системе) — это опциональная, а не обязательная возможность для всех платежных систем. По нашей статистике не более половины покупателей в итоге переходят по этому адресу после покупки билета - большинство остаются на стороне платежной системы и просто закрывают страницу. И в этом случае отследить конверсию достаточно проблематично.

Есть два способа со стороны внешнего сайта узнать о том, что пользователь совершил оплату - простой, но не очень надежный и более сложный, но крайне надежный.

Простой, но не очень надежный способ

Если к аккаунту на TimePad подключен код счетчика Google Analytics, организатору известны все передвижения пользователей как по своему сайту, так и по аккаунту на TimePad. То есть, даже если вы продаете билеты со своего сайта при помощи виджета, вы видите весь путь пользователя при покупке билета (даже если он оканчивается на домене timepad.ru).

Страница, на которую пользователь попадает после оплаты, имеет адрес вида https://<org_domain>.timepad.ru/event/payment_ok/<order_id> и может быть отслежена с помощью регулярного выражения ga:pagePath=~^[a-z\d-]+.timepad.ru/event/payment_ok/\d+/.* То есть, цель для заказа можно поставить именно на эту регулярку. Это не решит проблему с отсутствием переходов на страницу подтверждения оплаты, но будет абсолютно равносильно отслеживанию посещения страницы на стороне своего сайта.

Для того, чтобы реализовать этот способ никакого дополнительного программирования не требуется — нужно только настроить учет конверсий, используя регулярное выражение, приведенное выше.

Более сложный, но надежный способ

У Google Analytics есть возможность получать данные не только из браузера пользователя, но и со стороны сервера. Для этого существует специальное API — Server-side event tracking. Вместе с нашей возможностью оповещения об оплаченных билетах можно сделать такую схему работы:

  1. В код вставки виджета через параметр aux (инструкция находится здесь) передается Google Analytics ClientID (о том, что это такое и как его взять написано здесь)
  2. После покупки билета TimePad через WebHook передает на сайт информацию о том, что билет был куплен. О том, как настроить адрес для отправки вебхука написано здесь. Помимо всего прочего он возвращает и значение переданного в виджет поля aux с ClientId
  3. Сайт принимает вебхук и отправляет на стороне сервера событие о купленном билете в Google Analytics по этой инструкции. При этом событие может быть произвольное, но для его записи нужно знать ga ClientId — его-то мы и передали через WebHook
  4. Дальше уже это событие можно использвоать для подсчета конверсий

Для того, чтобы реализовать этот способ, со стороны вашего сайта нужно настроить прием WebHook об изменении статуса билета и проксировать эту информацию в Google Analytics или Яндекс.Метрику.