Статистика действий с турами и в бронировании

В конструкторе сайтов АтомсТревел Коннект настроены триггеры, которые срабатывают при выполнении определенных действий пользователя. Ниже представлен список этих действий:

• Переход в карточку тура.
• Нажмите на кнопку «Узнать расписание».
• Нажмите на кнопку «Забронировать» в регулярном туре.
• Нажмите на кнопку «Заказать» в групповом туре.
• Выбор количества туристов по категориям.
• Выбор отеля по страницам поиска.
• Заполнение данных о туристах по страницам поиска.
• Успешное оформление заказа на тур.
• Успешное оформление заявок на групповой тур.

Установка системы аналитики на сайт

Предварительно необходимо установить метрическую систему на сайт.

Вы можете установить на сайт следующие метрические системы: Яндекс.Метрика или Google.Analytics.

Инструкция по установке Яндекс.Метрики — https://yandex.ru/support/metrica/ru/general/creating-counter.html

Инструкция по установке Google Analytics — https://support.google.com/analytics/answer/1008080?hl=ru

Инструкция по установке метрики на сайт — https://atomstravel.com/help/konstruktor-sajtov-konnekt/nastrojki-sajta/dobavlenie-schetchika-yandeks-metriki-na-sajt 

Настройка целей

Для создания целей необходимо создать цель типа JS-событие: в реализации счётчиков.

Идентификаторы событий вы можете прописывать любые, на свое усмотрение.

Инструкция по реализации целей в Яндекс.Метрике — https://yandex.ru/support/metrica/ru/general/goals.html

Инструкция по голосовым целям в Google.Analytics — https://support.google.com/analytics/answer/1032415

Выбрать действия

Список триггеров:

jatoms_tour_click — клики по ссылке на тур (переход в карточку тура). Срабатывает при клике из любого места (календарь, список туров в витрине, список туров в модуле).

jatoms_tour_booking_click — нажмите «Забронировать» в расписании.

jatoms_tour_availability_click — кнопка «Узнать расписание» в карточке тура.

jatoms_tour_order_click — нажмите «Заказать» в групповом туре.

atoms_booking_tourists_save — выбор количества туристов на странице бронирования.

atoms_booking_accommodation_option_choose — выбор варианта размещения на странице бронирования.

atoms_booking_tourists_data_save — заполнение данных туристов на странице бронирования.

atoms_booking_place_order — успешное оформление и отправка заказа.

Список классов на кастомизированных элементах:

• atoms-booking-tour-date — дата тура;
• atoms-booking-meeting-point — место встречи с группой;
• atoms-booking-tourists — туристы;
• atoms-booking-accommodation — выбор размещения;
• atoms-booking-services — услуги;
• atoms-booking-tourists-data — данные туристов;
• atoms-booking-package-ready — заказ готов к оформлению;
• atoms-booking-order-consists-of — в заказ включено;
• atoms-booking-order-formation — заказ в процессе формирования;
• atoms-booking-start-price-from —класс у span, в котором «От» для цен;
• atoms-booking-min-price — класс на div, в котором цена «От»;
• atoms-booking-open-hotel-button —класс на button «Открыть».

Отправка событий

Для того чтобы отправить событие при обнаружении триггера, необходим следующий JS-код:

document.addEventListener("AtomSTrigger", function (event) {
    // Слушаем событие документа
    if (event.detail && event.detail.action) {
        // Проверяем что есть действие
        let action = event.detail.action; // Действие в переменную

        if (action === "jatoms_tour_click") {
            console.log("Клик по туру");

            ym(123456, "reachGoal", "нажмите-открыть-тур"); // отправка событий в Яндекс.Метрику
            gtag("event", "click-open-tour", {
                // отправка событий в Google.Analytics
                event_category: "tours",
                event_label: "click-open-tour-tag",
                значение: "10",
            });
        } else if (action === "jatoms_tour_availability_click") {
            ym(123456, "reachGoal", "jatoms_tour_availability_click"); // отправка событий в Яндекс.Метрику
            console.log("Клик по программе Естественный");
        } else if (action === "jatoms_tour_booking_click") {
            ym(123456, "reachGoal", "jatoms_tour_booking_click"); // отправка событий в Яндекс.Метрику
            console.log("Клик по Забронировать в расписании");
        } else if (action === "jatoms_tour_order_click") {
            ym(123456, "reachGoal", "jatoms_tour_order_click"); // отправка событий в Яндекс.Метрику
            console.log("Клик по Заказать");
        }
    }

    // и далее через else if прописываем каждый триггер, который нужно отслеживать.
});

Проверка отправки событий

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

Как добавлять цели в метрике для отслеживания бронирования туров

Такой код будет отслеживать отправку конкретного тура и вызывать событие в зависимости от его ID:

document.addEventListener('AtomSTrigger', function (event) {
    if (event.detail && event.detail.action) {
        let action = event.detail.action;

        if (action === 'atoms_booking_place_order') {
            let tour_id = event.detail.tour_id;

            if (tour_id === 20265) {
                ym(12345678,'reachGoal','event1');
            } else if (tour_id === 20581) {
                ym(12345678,'reachGoal','event2');
            } else if (tour_id === 20597) {
                ym(12345678,'reachGoal','event3');
            } else if (tour_id === ID_НОВОГО_ТУРА) {
                ym(НОМЕР_СЧЁТЧИКА,'reachGoal','ИДЕНТИФИКАТОР');
            }

            ym(12345678,'reachGoal','order');
        }
    }
});

Для того чтобы добавить сюда новый тур, для которого будет вызваться событие метрики, необходимо добавить условие:

else if (tour_id === ID_НОВОГО_ТУРА) {
    ym(НОМЕР СЧЁТЧИКА,'reachGoal','ИДЕНТИФИКАТОР');
 }

Вместо ID_НОВОГО_ТУРА нужно подставить id тура, вместе НОМЕР_СЧЕТЧИКА — номер счетчика Яндекс Метрики, вместо ИДЕНТИФИКАТОР — идентификатор события.

Добавление скрипта на сайт

В панели администрирования сайта перейдите в раздел «YOOtheme»

В открывшемся меню конструктора перейдите в раздел «Настройки»:

Далее — «Пользовательский код»:

Добавьте скрипт в соответствующий раздел:

Важно:
Если в поле «Скрипт» уже есть какой-то код, то новый код можно вставить выше или ниже его. Обратите внимание, если старый код был обрамлен в теги <script></script>, то новый код также нужно обернуть в эту пару тегов.