Веб-аналитика: различия между версиями

Материал из Центр поддержки системы бронировании
Перейти к навигации Перейти к поиску
Строка 1: Строка 1:
−
Для отслеживания событий, которые происходят в системе {{NameSystem}} и передачи их в системы вебаналитики нужно разместить в разделе '''Управление сайтом → Настройка внешнего вида''' код, который будет отправлять данные о взаимодействии с элементами интерфейса
+
Для отслеживания действий пользователя во время процесса поиска и бронирования авиабилетов,
 +
в Nemo используется система событий, позволяющая передавать данные в различные сервисы веб-аналитики,
 +
такие как '''Яндекс.Метрика''', '''Google Analytics''' и в теории, в любые другие сервисы.
  
−
== События ==
+
= Механизм работы событий =
−
Для облегчения интеграции с сервисами веб-аналитики в Немо заданы специальные события, которые срабатывают в зависимости от действий пользователя на сайте.
 
−
В системе Немо реализованы следующие события:
 
−
<pre>
 
−
analyticsStartSearch      - запуск поиска
 
−
analyticsScheduleSearch    - запуск поиска по расписанию
 
−
analyticsSelectFlight      - выбор перелета на странице с результатами поиска
 
−
analyticsSelectFareFamily  - выбор семейства тарифов в всплывающем окне
 
−
analyticsServicesPage      - переход к странице с дополнительными услугами
 
−
analyticsBooking          - успешное завершение бронирования
 
−
analyticsPaymentAttempt    - переход к оплате
 
−
analyticsReturnComplete    - выполненный возврат
 
−
analyticsCancellation      - нажатие на кнопку аннуляции заказа
 
−
</pre>
 
  
−
== Пример использования ==
+
При совершении пользователем определённых действий, в системе вызываются определённые javascript-события на объекте <code>document</code>.
 +
В объект события также передаются дополнительные данные (если имеются), которые характезируют действия пользователя.
 +
Например, при смене типа маршрута на форме поиска, срабатывает событие <code>analytics.searchForm.tripType.value</code>
 +
и в объект события передаётся javascript-объект со свойством <code>value</code>, содержащим тип выбранного маршрута (''OW'', ''RT'' или ''CR'').
  
−
Пример кода для интеграции с сервисом Яндекс.Метрика
+
= Отслеживание событий =
  
−
<syntaxhighlight lang="javascript" line enclose="div" style="font-size:9pt;background: #F9F9F9; border: 1px dashed #2F6FAB; padding: 10px 5px; margin: 10px 0;">
+
[[Файл:Идентификатор_цели.jpeg|thumb|300px|Идентификатор цели]]
  
−
function CMSScripts($) {
+
Для передачи информации в сервисы веб-аналитики, вызванные действиями пользователя javascript-события необходимо “отследить”,
−
     $(document).on('analyticsStartSearch', function () {
+
получить из них желаемую информацию и сделать соответствующие обращения к сервисам аналитики.
−
         yaCounterXXXXXX.reachGoal('TARGET_NAME1');
+
 
 +
Пример достижения целей в сервисе '''Яндекс.Метрика''':
 +
 
 +
<source lang="javascript" style="width: 40%">
 +
$(document).on('analytics.checkout.booking.book', function (event, data) {
 +
    yaCounterXXXXXX.reachGoal('ИДЕНТИФИКАТОР_ЦЕЛИ_X');
 +
});
 +
   
 +
$(document).on('analytics.checkout.booking.buy', function (event, data) {
 +
    yaCounterXXXXXX.reachGoal('ИДЕНТИФИКАТОР_ЦЕЛИ_Y', data);
 +
});
 +
</source>
 +
 
 +
Где ''XXXXXX'' — номер счетчика Яндекс.Метрики, ''ИДЕНТИФИКАТОР_ЦЕЛИ_X'' и ''ИДЕНТИФИКАТОР_ЦЕЛИ_Y'' —
 +
идентификаторы двух разных целей в метрике, а <code>data</code> — дополнительные параметры, которые в данном случае передаются
 +
как [https://yandex.ru/support/metrika/data/visit-params.xml Параметры визита].
 +
 
 +
= Полный список событий =
 +
 
 +
{| class="wikitable" style="width:60%"
 +
!width="17%" style="padding: 10px;"| Событие
 +
!width="18%" style="padding: 10px;"| Параметры
 +
!width="11%" style="padding: 10px;"| Описание
 +
|-
 +
| analytics.searchForm.directFlights.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Чекбокс “Только прямые” / “Без пересадок”
 +
|-
 +
| analytics.searchForm.tripType.value
 +
| <code>value</code>: <code>OW</code>, <code>RT</code>, <code>CR</code>
 +
| Селект выбора типа маршрута
 +
|-
 +
| analytics.searchForm.additionalParameters.fastFlights.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Чекбокс “Только короткие (до 2 часов)”, в блоке “Еще параметры”
 +
|-
 +
| analytics.searchForm.additionalParameters.maxRouteTime.value
 +
| <code>value</code>: число, количество часов
 +
| Селект “Время в пути”, в блоке “Еще параметры”
 +
|-
 +
| analytics.searchForm.additionalParameters.maxPrice.value
 +
| <code>value</code>: число, максимальная стоимость перелёта
 +
| Поле “Цена билетов”, в блоке “Еще параметры”
 +
|-
 +
| analytics.searchForm.additionalParameters.carriers.value
 +
| <code>value</code>: массив, список авиакомпаний
 +
| Поле “Авиакомпании”, в блоке “Еще параметры”
 +
|-
 +
| analytics.searchForm.serviceClass.value
 +
| <code>value</code>: строка, класс обслуживания
 +
| Селект выбора класса обслуживания
 +
|-
 +
| analytics.searchForm.vicinityDates.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Чекбокс “Искать ±3 дня” (окружные даты)
 +
|-
 +
| analytics.searchForm.search.validationError
 +
| -
 +
| Ошибка валидации формы поиска
 +
|-
 +
| analytics.searchForm.search
 +
| -
 +
| Запуск поиска
 +
|-
 +
| analytics.searchForm.scheduleSearch
 +
| -
 +
| Запуск поиска по расписанию
 +
|-
 +
| analytics.searchResults.compareTable.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Открытие / закрытие блока со сравнительной таблицей перелётов
 +
|-
 +
| analytics.searchResults.fastSearchForm.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Открытие / закрытие блока с формой поиска на результатах поиска
 +
|-
 +
| analytics.searchResults.fastSearchForm.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Открытие / закрытие блока с формой поиска на результатах поиска
 +
|-
 +
| analytics.searchResults.sort.value
 +
| <code>value</code>: строка, тип сортировки
 +
| Селект с выбором типа сортировки перелётов
 +
|-
 +
| analytics.searchResults.displayType.value
 +
| <code>value</code>: <code>list</code>, <code>tile</code>
 +
| Переключатель формата отображения перелётов (список/карточки)
 +
|-
 +
| analytics.searchResults.flight.select
 +
| -
 +
| Кнопка покупки перелёта на результатах поиска
 +
|-
 +
| analytics.searchResults.showAllFlights
 +
| -
 +
| Кнопка показа всех перелётов (под поисковой выдачей)
 +
|-
 +
| analytics.searchResults.fareFamilies.load
 +
| -
 +
| Кнопка “Выбрать другой тариф”, процесс поиска семейств тарифов на результатах поиска
 +
|-
 +
| analytics.searchResults.fareFamilies.select
 +
| -
 +
| Кнопка покупки перелёта в попапе выбора семейства тарифов на результатах поиска
 +
|-
 +
| analytics.searchResults.filter.value
 +
| <code>name</code>: название фильтра, <code>value</code>: значение фильтра
 +
| Фильтры поисковой выдаче
 +
|-
 +
| analytics.checkout.customer.needNewAccount.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Чекбокс создания нового аккаунта
 +
|-
 +
| analytics.checkout.customer.visa.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Чекбокс внесения данных о визе
 +
|-
 +
| analytics.checkout.customer.meal.value
 +
| <code>value</code>: строка, код типа питания
 +
| Выбор типа питания
 +
|-
 +
| analytics.checkout.customer.loyaltyCard.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Чекбокс внесения карты лояльности
 +
|-
 +
| analytics.checkout.promocode.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Попап с внесением промокода
 +
|-
 +
| analytics.checkout.promocode.apply
 +
| -
 +
| Внесение промокода
 +
|-
 +
| analytics.checkout.fareRules.load
 +
| -
 +
| Загрузка тарифных правил
 +
|-
 +
| analytics.checkout.booking.book
 +
| -
 +
| Бронирование успешно завершено
 +
|-
 +
| analytics.checkout.payment.gateway.value
 +
| <code>value</code>: число, ID платежного шлюза в Nemo
 +
| Выбор платежного шлюза
 +
|-
 +
| analytics.checkout.booking.cancel
 +
| -
 +
| Аннуляция заказа
 +
|-
 +
| analytics.checkout.booking.buy
 +
| -
 +
| Переход к оплате заказа
 +
|-
 +
| analytics.checkout.services.disableExtservices.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Чекбокс отказа от дополнительных услуг
 +
|-
 +
| analytics.checkout.services.alphaInsurance.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Чекбокс активации АльфаСтрахования
 +
|-
 +
| analytics.checkout.services.alphaInsurance.value
 +
| <code>value</code>: строка или массив, коды выбранных продуктов
 +
| Выбор продукта (-ов) АльфаСтрахования
 +
|-
 +
| analytics.checkout.services.ervInsurance.active
 +
| <code>value</code>: <code>true</code> или <code>false</code>
 +
| Чекбокс активации ERV Страхования
 +
|-
 +
| analytics.checkout.services.ervInsurance.value
 +
| <code>value</code>: строка или массив, коды выбранных продуктов
 +
| Выбор продукта (-ов) ERV Страхования
 +
|-
 +
| analytics.checkout.services.ervInsurance.supplementary.value
 +
| <code>value</code>: строка или массив, коды выбранных продуктов
 +
| Выбор дополнительного (-ых) продукта (-ов) ERV Страхования
 +
|-
 +
| analytics.checkout.services.servicePack.value
 +
| <code>value</code>: число, ID выбранного сервисного пакета в Nemo
 +
| Выбор сервисного пакета
 +
|-
 +
| analytics.checkout.booking.returnComplete
 +
| -
 +
| Завершение процесса возврата
 +
|-
 +
| analytics.checkout.booking.exchangeComplete
 +
| -
 +
| Завершение процесса обмена
 +
|}
 +
 
 +
= Пример интеграции с Яндекс.Метрикой =
 +
 
 +
[[Файл:Код_счетчика_метрики.jpeg|thumb|300px|Код счетчика]]
 +
 
 +
Для отслеживания действий пользователей на сайте с помощью Яндекс.Метрики, необходимо:
 +
* Зарегистрироваться в сервисе и получить код счетчика метрики
 +
* Полученный код необходимо поместить в код страницы между тегами <code><body></body></code>
 +
* В настройках счетчика добавить необходимые цели, указав произвольное название цели, в качестве значения "Тип условия"
 +
выбрать "JavaScript-событие" и указать произвольный "Идентификатор цели", который в дальнейшем будет использован в коде
 +
отслеживания событий
 +
* Добавить на страницу код отслеживания нужных событий (код должен располагаться ниже кода счетчика):
 +
<source lang="javascript" style="width: 40%">
 +
function yandexScripts($) {
 +
     $(document).on('analytics.searchForm.tripType.value', function (event, data) {
 +
         yaCounterXXXXXXXX.reachGoal('идентификатор_цели_смены_типа_маршрута', data);
 
     });
 
     });
−
     $(document).on('analyticsScheduleSearch', function () {
+
 
−
         yaCounterXXXXXX.reachGoal('TARGET_NAME2');
+
     $(document).on('analytics.checkout.booking.book', function (event, data) {
 +
         yaCounterXXXXXXXX.reachGoal('идентификатор_цели_бронирования', data);
 
     });
 
     });
−
...
+
 
−
     $(document).on('analyticsCancellation', function () {
+
     $(document).on('analytics.checkout.booking.buy', function (event, data) {
−
         yaCounterXXXXXX.reachGoal('TARGET_NAME3');
+
         yaCounterXXXXXXXX.reachGoal('aидентификатор_цели_оплаты', data);
 
     });
 
     });
 
};
 
};
−
 
+
 
if (typeof require == 'function') {
 
if (typeof require == 'function') {
−
     require(['jquery'], CMSScripts);
+
     require(['jquery'], yandexScripts);
 
}
 
}
 
else {
 
else {
−
     CMSScripts($);
+
     yandexScripts($);
 
}
 
}
−
</syntaxhighlight>
+
</source>
−
 
 
−
 
 
−
где XXXXXX - это номер вашего счетчика заведенного, а TARGET_NAME1 - идентификатор цели в сервисе Яндекс.Метрика.
 
−
 
 
−
{{Attention|Замените '''XXXXXX''' на номер счетчика в Яндекс Метрике!}}
 
−
 
 
−
Подробнее про метод reachGoal() можно узнать в [http://yandex.ru/support/metrika/objects/reachgoal.xml документации Яндекс.Метрики]
 

Версия 17:09, 31 марта 2017

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

Механизм работы событий

При совершении пользователем определённых действий, в системе вызываются определённые javascript-события на объекте document. В объект события также передаются дополнительные данные (если имеются), которые характезируют действия пользователя. Например, при смене типа маршрута на форме поиска, срабатывает событие analytics.searchForm.tripType.value и в объект события передаётся javascript-объект со свойством value, содержащим тип выбранного маршрута (OW, RT или CR).

Отслеживание событий

Идентификатор цели

Для передачи информации в сервисы веб-аналитики, вызванные действиями пользователя javascript-события необходимо “отследить”, получить из них желаемую информацию и сделать соответствующие обращения к сервисам аналитики.

Пример достижения целей в сервисе Яндекс.Метрика: 

$(document).on('analytics.checkout.booking.book', function (event, data) {
    yaCounterXXXXXX.reachGoal('ИДЕНТИФИКАТОР_ЦЕЛИ_X');
});
    
$(document).on('analytics.checkout.booking.buy', function (event, data) {
    yaCounterXXXXXX.reachGoal('ИДЕНТИФИКАТОР_ЦЕЛИ_Y', data);
});

Где XXXXXX — номер счетчика Яндекс.Метрики, ИДЕНТИФИКАТОР_ЦЕЛИ_X и ИДЕНТИФИКАТОР_ЦЕЛИ_Y — идентификаторы двух разных целей в метрике, а data — дополнительные параметры, которые в данном случае передаются как Параметры визита.

Полный список событий

Событие Параметры Описание
analytics.searchForm.directFlights.active value: true или false Чекбокс “Только прямые” / “Без пересадок”
analytics.searchForm.tripType.value value: OW, RT, CR Селект выбора типа маршрута
analytics.searchForm.additionalParameters.fastFlights.active value: true или false Чекбокс “Только короткие (до 2 часов)”, в блоке “Еще параметры”
analytics.searchForm.additionalParameters.maxRouteTime.value value: число, количество часов Селект “Время в пути”, в блоке “Еще параметры”
analytics.searchForm.additionalParameters.maxPrice.value value: число, максимальная стоимость перелёта Поле “Цена билетов”, в блоке “Еще параметры”
analytics.searchForm.additionalParameters.carriers.value value: массив, список авиакомпаний Поле “Авиакомпании”, в блоке “Еще параметры”
analytics.searchForm.serviceClass.value value: строка, класс обслуживания Селект выбора класса обслуживания
analytics.searchForm.vicinityDates.active value: true или false Чекбокс “Искать ±3 дня” (окружные даты)
analytics.searchForm.search.validationError - Ошибка валидации формы поиска
analytics.searchForm.search - Запуск поиска
analytics.searchForm.scheduleSearch - Запуск поиска по расписанию
analytics.searchResults.compareTable.active value: true или false Открытие / закрытие блока со сравнительной таблицей перелётов
analytics.searchResults.fastSearchForm.active value: true или false Открытие / закрытие блока с формой поиска на результатах поиска
analytics.searchResults.fastSearchForm.active value: true или false Открытие / закрытие блока с формой поиска на результатах поиска
analytics.searchResults.sort.value value: строка, тип сортировки Селект с выбором типа сортировки перелётов
analytics.searchResults.displayType.value value: list, tile Переключатель формата отображения перелётов (список/карточки)
analytics.searchResults.flight.select - Кнопка покупки перелёта на результатах поиска
analytics.searchResults.showAllFlights - Кнопка показа всех перелётов (под поисковой выдачей)
analytics.searchResults.fareFamilies.load - Кнопка “Выбрать другой тариф”, процесс поиска семейств тарифов на результатах поиска
analytics.searchResults.fareFamilies.select - Кнопка покупки перелёта в попапе выбора семейства тарифов на результатах поиска
analytics.searchResults.filter.value name: название фильтра, value: значение фильтра Фильтры поисковой выдаче
analytics.checkout.customer.needNewAccount.active value: true или false Чекбокс создания нового аккаунта
analytics.checkout.customer.visa.active value: true или false Чекбокс внесения данных о визе
analytics.checkout.customer.meal.value value: строка, код типа питания Выбор типа питания
analytics.checkout.customer.loyaltyCard.active value: true или false Чекбокс внесения карты лояльности
analytics.checkout.promocode.active value: true или false Попап с внесением промокода
analytics.checkout.promocode.apply - Внесение промокода
analytics.checkout.fareRules.load - Загрузка тарифных правил
analytics.checkout.booking.book - Бронирование успешно завершено
analytics.checkout.payment.gateway.value value: число, ID платежного шлюза в Nemo Выбор платежного шлюза
analytics.checkout.booking.cancel - Аннуляция заказа
analytics.checkout.booking.buy - Переход к оплате заказа
analytics.checkout.services.disableExtservices.active value: true или false Чекбокс отказа от дополнительных услуг
analytics.checkout.services.alphaInsurance.active value: true или false Чекбокс активации АльфаСтрахования
analytics.checkout.services.alphaInsurance.value value: строка или массив, коды выбранных продуктов Выбор продукта (-ов) АльфаСтрахования
analytics.checkout.services.ervInsurance.active value: true или false Чекбокс активации ERV Страхования
analytics.checkout.services.ervInsurance.value value: строка или массив, коды выбранных продуктов Выбор продукта (-ов) ERV Страхования
analytics.checkout.services.ervInsurance.supplementary.value value: строка или массив, коды выбранных продуктов Выбор дополнительного (-ых) продукта (-ов) ERV Страхования
analytics.checkout.services.servicePack.value value: число, ID выбранного сервисного пакета в Nemo Выбор сервисного пакета
analytics.checkout.booking.returnComplete - Завершение процесса возврата
analytics.checkout.booking.exchangeComplete - Завершение процесса обмена

Пример интеграции с Яндекс.Метрикой

Код счетчика

Для отслеживания действий пользователей на сайте с помощью Яндекс.Метрики, необходимо:

  • Зарегистрироваться в сервисе и получить код счетчика метрики
  • Полученный код необходимо поместить в код страницы между тегами <body></body>
  • В настройках счетчика добавить необходимые цели, указав произвольное название цели, в качестве значения "Тип условия"

выбрать "JavaScript-событие" и указать произвольный "Идентификатор цели", который в дальнейшем будет использован в коде отслеживания событий

  • Добавить на страницу код отслеживания нужных событий (код должен располагаться ниже кода счетчика):
function yandexScripts($) {
    $(document).on('analytics.searchForm.tripType.value', function (event, data) {
        yaCounterXXXXXXXX.reachGoal('идентификатор_цели_смены_типа_маршрута', data);
    });

    $(document).on('analytics.checkout.booking.book', function (event, data) {
        yaCounterXXXXXXXX.reachGoal('идентификатор_цели_бронирования', data);
    });

    $(document).on('analytics.checkout.booking.buy', function (event, data) {
        yaCounterXXXXXXXX.reachGoal('aидентификатор_цели_оплаты', data);
    });
};
 
if (typeof require == 'function') {
    require(['jquery'], yandexScripts);
}
else {
    yandexScripts($);
}
Источник — https://support.nemo.travel/index.php?title=Веб-аналитика&oldid=12717