Перейти к содержанию

Интеграция Roistat с TravelLine

Интеграция позволит загружать в ваш проект Roistat:

  • Заявки на бронирование через систему TravelLine.
  • Контактные данные клиента: имя, номер телефона, email.

Как работает интеграция

  1. Клиент заполняет данные в виджете бронирования TravelLine.
  2. После отправления заявки информация передается в Roistat.

Перед началом настройки

Шаг 1. Поиск счетчика TravelLine

Найдите счетчик TravelLine, который содержит следующую часть кода:

['embed', 'booking-form', {
    container: 'tl-booking-form'
 }]
Этот счетчик может находиться в нескольких файлах. В эти файлы нужно будет внести изменения.

Шаг 2. Модификация счетчика TravelLine

У TravelLine есть два события:

  • onBookingSuccess – событие вызывается, когда бронирование успешно завершено. В это событие нужно добавить JS-скрипт, который будет отправлять данные в заявку Roistat.
  • onTrackUserAction – с помощью этого события можно получить контактные данные пользователя.

Изменения в коде

  1. Создайте функцию bookingSuccess. В ней будет отправка данных в заявку Roistat.

    Пример кода
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
    function bookingSuccess(data) {
    var comment = data.customerComment ? data.customerComment + " \n" : "";
    comment += data.bookingNumber ? "Номер брони: " + data.bookingNumber + " \n" : "";
    comment += data.arrivalDate ? "Дата заезда: " + data.arrivalDate + " \n" : "";
    comment += data.departureDate ? "Дата выезда: " + data.departureDate + " \n" : "";
    comment += data.price ? "Стоимость: " + data.price + " \n" : "";

    if (phone || email) {
        roistatGoal.reach({
            name: name,
            phone: phone,
            email: email,
            text: comment,
            leadName: "Заявка с формы 'TravelLine'",
            fields: {}
        });
    }
}

  2. Поправьте счетчик TravelLine:

    • В событии onBookingSuccess вызовите созданную функцию bookingSuccess.
    • В событие onTrackUserAction добавьте функцию для получения контактных данных пользователя.
    Пример кода
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    ['embed', 'booking-form', {
    container: 'tl-booking-form',
    onBookingSuccess: bookingSuccess,
    onTrackUserAction: function(data) {
        if(data.action === "type") {
            if(data.field === "email") {
                email = data.value
            }
            if(data.field === "phone") {
                phone = data.value
            }
            if(data.field === "name") {
                name = data.value
            }
        }
    }
}]

Итоговый пример измененного счетчика TravelLine

Пример кода
 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
35
36
37
38
39
40
41
42
43
44
(function(w) {
    function bookingSuccess(data) {
        var comment = data.customerComment ? data.customerComment + " \n" : "";
        comment += data.bookingNumber ? "Номер брони: " + data.bookingNumber + " \n" : "";
        comment += data.arrivalDate ? "Дата заезда: " + data.arrivalDate + " \n" : "";
        comment += data.departureDate ? "Дата выезда: " + data.departureDate + " \n" : "";
        comment += data.price ? "Стоимость: " + data.price + " \n" : "";

        if(phone || email) {
            roistatGoal.reach({
                name: name,
                phone: phone,
                email: email,
                text: comment,
                leadName: "Заявка с формы 'TravelLine'",
                fields: {}
            });
        }
    }

    var q = [
        ['setContext', 'TL-INT-galapalmira_2022-06-22', 'ru'],
        ['embed', 'booking-form', {
            container: 'tl-booking-form',
            onBookingSuccess: bookingSuccess,
            onTrackUserAction: function(data) {
                if(data.action === "type") {
                    if(data.field === "email") {
                        email = data.value
                    }
                    if(data.field === "phone") {
                        phone = data.value
                    }
                    if(data.field === "name") {
                        name = data.value
                    }
                }
            }
        }]
    ];

     ...

})(window);

Шаг 4. Подключение интеграции

  1. Отправьте запрос в техподдержку TravelLine:

    • В письме приложите ссылки на страницы сайта, где находится виджет бронирования.
    • Попросите включить событие onTrackUserAction.
    • В событие onBookingSuccess попросите включить все поля для передачи данных.

  2. Если вы хотите отправлять заявки на бронирование из Roistat в CRM, настройте передачу заявок в CRM.