Интеграция с TravelLine — различия между версиями

Материал из Alytics Wiki
Перейти к: навигация, поиск
 
(не показано 8 промежуточных версий этого же участника)
Строка 5: Строка 5:
 
'''1. Связать TravelLine c вашей CRM'''  
 
'''1. Связать TravelLine c вашей CRM'''  
  
У вас должна быть CRM-система, например, Битрикс24 или amoCRM. Вам необходимо в TravelLine настроить связку с CRM-системой, чтобы в CRM создавались Сделки или Лиды с модуля бронирования. Подробнее о том, как связать TravelLine с CRM, в базе знаний TravelLine: [https://www.travelline.ru/support/knowledge-base/kak-nachat-rabotu-v-lichnom-kabinete-travelline/ https://www.travelline.ru/support/knowledge-base/kak-nachat-rabotu-v-lichnom-kabinete-travelline/].  
+
У вас должна быть CRM-система, например, Битрикс24 или amoCRM. Вам необходимо в TravelLine настроить связку с CRM-системой, чтобы в CRM создавались Сделки или Лиды с модуля бронирования. Как связать TravelLine с CRM можно узнать в базе знаний TravelLine: [https://www.travelline.ru/support/knowledge-base/kak-nachat-rabotu-v-lichnom-kabinete-travelline/ https://www.travelline.ru/support/knowledge-base/kak-nachat-rabotu-v-lichnom-kabinete-travelline/].  
  
  
Строка 12: Строка 12:
 
'''2. Настройте передачу google client id из TravelLine в CRM'''  
 
'''2. Настройте передачу google client id из TravelLine в CRM'''  
  
Вы можете сделать передачу google client id из TravelLine в CRM самостоятельно. Что такое google client id и где его взять описано здесь [https://wiki.alytics.ru/index.php?title=Как_подготовить_CRM_для_подключения_к_Alytics https://wiki.alytics.ru/index.php?title=Как_подготовить_CRM_для_подключения_к_Alytics], либо специалисты Alytics настоят такую интеграцию при оплате сервиса Alytics на пол года и больше.  
+
Вы можете сделать передачу google client id из TravelLine в CRM самостоятельно. Что такое google client id и где его взять описано здесь [https://wiki.alytics.ru/index.php?title=Как_подготовить_CRM_для_подключения_к_Alytics https://wiki.alytics.ru/index.php?title=Как_подготовить_CRM_для_подключения_к_Alytics], либо специалисты Alytics настроят такую интеграцию при оплате сервиса Alytics на пол года и больше.  
 
+
 
+
2.1. Для каждой формы настройте передачу Cookies из Tilda в CRM. Для этого в Tilda зайдите в "Настройки сайта"
+
 
+
[[Файл:Tilda1.png|1000px]]
+
  
 
<br>
 
<br>
  
2.2. Слева выберите меню "Формы", затем у каждой формы нажмите кнопку "Настройки"
+
'''Если настраивают специалисты Alytics, то последовательность такая:'''
  
[[Файл:Tilda2.png|1000px]]
+
2.1. Чтобы виджет бронирования TravelLine отдавал google client id "наружу" необходимо обновить код виджета бронирования TravelLine, который обычно выглядит так,
  
<br>
+
где '''XX-XXX-xxxxxx-xxx''' - идентификатор TravelLine:
  
2.3. В настройках формы поставьте галочку "Посылать Cookies". Внизу не забудьте нажать кнопку "Сохранить"
+
<pre>
 
+
<!-- start TL Booking form script -->
[[Файл:Tilda3.png|600px]]
+
<div id="tl-booking-form">&nbsp;</div>
 +
<script type="text/javascript">// <![CDATA[
 +
    (function (w) {
 +
        var q = [
 +
            ['setContext', 'XX-XXX-xxxxxx-xxx', 'ru'],
 +
            ['embed', 'booking-form', {
 +
                container: 'tl-booking-form',
 +
                onConnect: function connect(app) {
 +
                    ga && ga(function (gaTracker) {
 +
                        app.pushArtifact('GaClientId', gaTracker.get('clientId'));
 +
                    });
 +
                },
 +
            }]
 +
        ];
 +
        var t = w.travelline = (w.travelline || {}), ti = t.integration = (t.integration || {});
 +
        ti.__cq = ti.__cq ? ti.__cq.concat(q) : q;
 +
        if (!ti.__loader) {
 +
            ti.__loader = true;
 +
            var d = w.document, p = d.location.protocol, s = d.createElement('script');
 +
            s.type = 'text/javascript';
 +
            s.async = true;
 +
            s.src = (p == 'https:' ? p : 'http:') + '//ibe.tlintegration.com/integration/loader.js';
 +
            (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(s);
 +
        }
 +
    })(window);
 +
    // ]]></script>
 +
<!-- end TL Booking form script -->
 +
</pre>
  
 
<br>
 
<br>
  
2.4. Не забудьте опубликовать настроенные изменения
+
В него добавить следующий строчки:
  
[[Файл:Tilda4.png|1000px]]
+
<pre>       
 +
        var bookingSuccess = function (data) {
 +
            if (typeof alsTracker !== 'undefined' && alsTracker) {
 +
                alsTracker.setGoogleClientId();
 +
                alsTracker.handleRequestData('', {
 +
                    phone: data.customerPhone,
 +
                    email: data.customerEmail
 +
                }, 'ajax');
 +
            }
 +
        };
  
<br>
+
</pre>
  
2.5. Проверьте, что все верно настроено. Сделайте тестовый заказ через форму заявки. Убедитесь, что в сделку передаются Cookies. К примеру, в Битрикс24 переданные Cookies выглядят так:
+
и
  
[[Файл:Tilda5.png|500px]]
+
<pre>
 +
                onBookingSuccess: bookingSuccess
 +
</pre>
  
<br>
 
 
<br>
 
<br>
  
'''3. Настройте счетчик Google Analytics в Tilda'''
+
Итоговый код должен получиться таким:
  
'''3.1. Если вам не нужны цели в Google Analytics''', которые по умолчанию создает Tilda, то:  
+
<pre>
 
+
<!-- start TL Booking form script -->
3.1.1. Остановите счетчик Google Analytics в Tilda, установленный в разделе "Настройка сайта -> Аналитика"
+
<div id="tl-booking-form">&nbsp;</div>
 
+
<script type="text/javascript">// <![CDATA[
[[Файл:Tilda2-1.png|1000px]]
+
    (function (w) {
 +
        var bookingSuccess = function (data) {
 +
            if (typeof alsTracker !== 'undefined' && alsTracker) {
 +
                alsTracker.setGoogleClientId();
 +
                alsTracker.handleRequestData('', {
 +
                    phone: data.customerPhone,
 +
                    email: data.customerEmail
 +
                }, 'ajax');
 +
            }
 +
        };
 +
        var q = [
 +
            ['setContext', 'XX-XXX-xxxxxx-xxx', 'ru'],
 +
            ['embed', 'booking-form', {
 +
                container: 'tl-booking-form',
 +
                onConnect: function connect(app) {
 +
                    ga && ga(function (gaTracker) {
 +
                        app.pushArtifact('GaClientId', gaTracker.get('clientId'));
 +
                    });
 +
                },
 +
                onBookingSuccess: bookingSuccess
 +
            }]
 +
        ];
 +
        var t = w.travelline = (w.travelline || {}), ti = t.integration = (t.integration || {});
 +
        ti.__cq = ti.__cq ? ti.__cq.concat(q) : q;
 +
        if (!ti.__loader) {
 +
            ti.__loader = true;
 +
            var d = w.document, p = d.location.protocol, s = d.createElement('script');
 +
            s.type = 'text/javascript';
 +
            s.async = true;
 +
            s.src = (p == 'https:' ? p : 'http:') + '//ibe.tlintegration.com/integration/loader.js';
 +
            (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(s);
 +
        }
 +
    })(window);
 +
    // ]]></script>
 +
<!-- end TL Booking form script -->
 +
</pre>
  
 
<br>
 
<br>
  
3.1.2. Установите этот же счетчик Google Analytics через html по инструкции: http://help-ru.tilda.ws/html
+
2.2. В TravelLine нужно включить отправку события "onBookingSuccess". Для этого можно обратиться к поддержке TravelLine.  
 
+
Для этого зайдите в раздел "Настройка сайта -> Ещё", найдите блок "HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD", нажмите кнопку "Редактировать код"
+
 
+
[[Файл:Tilda2-2.png|1000px]]
+
  
 
<br>
 
<br>
  
3.1.3. Вставьте код того же самого Google Analytics в библиотеке gtag.js согласно [https://wiki.alytics.ru/index.php?title=%D0%9A%D0%B0%D0%BA_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B8%D1%82%D1%8C_%D0%BF%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D1%87%D1%83_google_client_id_(cid)_%D0%B2_Google_Analytics#3.2._.D0.94.D0.BB.D1.8F_.D0.B1.D0.B8.D0.B1.D0.BB.D0.B8.D0.BE.D1.82.D0.B5.D0.BA.D0.B8_gtag.js. инструкции]
+
2.3. Теперь google client id будет передавать "наружу" и его сможет подхватить трекер-cid (захватчик форм), который настраивают специалисты по интеграции Alytics.
 
+
[[Файл:Tilda2-3.png|600px]]
+
 
+
<br>
+
 
+
3.1.4. Не забудьте опубликовать настроенные изменения
+
 
+
[[Файл:Tilda4.png|1000px]]
+
 
+
<br>
+
 
+
 
+
'''3.2. Если вам нужно сохранить цели в Google Analytics''', которые по умолчанию создает Tilda, то:
+
 
+
3.2.1. Не выключайте свой счетчик Google Analytics в Tilda, установленный в разделе "Настройка сайта -> Аналитика"
+
 
+
[[Файл:Tilda2-1.png|1000px]]
+
 
+
<br>
+
 
+
3.2.2. Создайте второй счетчик Google Analytics с отдельным кодом и установите новый счетчик Google Analytics через html по инструкции: http://help-ru.tilda.ws/html
+
 
+
Для этого зайдите в раздел "Настройка сайта -> Ещё", найдите блок "HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD", нажмите кнопку "Редактировать код"
+
 
+
[[Файл:Tilda2-2.png|1000px]]
+
 
+
<br>
+
 
+
3.2.3. Вставьте код второго Google Analytcs в библиотеке gtag.js согласно [https://wiki.alytics.ru/index.php?title=%D0%9A%D0%B0%D0%BA_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B8%D1%82%D1%8C_%D0%BF%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D1%87%D1%83_google_client_id_(cid)_%D0%B2_Google_Analytics#3.2._.D0.94.D0.BB.D1.8F_.D0.B1.D0.B8.D0.B1.D0.BB.D0.B8.D0.BE.D1.82.D0.B5.D0.BA.D0.B8_gtag.js. инструкции]
+
 
+
[[Файл:Tilda2-3.png|600px]]
+
 
+
<br>
+
 
+
3.2.4. Не забудьте опубликовать настроенные изменения
+
 
+
[[Файл:Tilda4.png|1000px]]
+
 
+
<br>
+
 
+
3.2.5. Второй счетчик Google Analaytics подключите как основной в проекте в Alytics. Старый счетчик можете подключить как дополнительный в проект, чтобы из него тянуть цели и транзакции в проект в Alytics.
+
 
+
<br>
+
 
+
'''4. Если вы используете коллтрекинг/email-трекинг, то'''
+
 
+
Установите коды коллтрекинга/email-трекина. Вам их вышлет менеджер поддержки. Установить их нужно в разделе "Настройка сайта -> Ещё" в блоке "HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD". Аналогично, как описано выше в п. 3.2.2.
+
 
+
Интеграцию коллтрекинга/email-трекинга с CRM производят специалисты Alytics согласно брифу на интеграцию.
+
 
+
<br>
+
 
+
'''5. Интеграцию CRM с Alytics'''
+
 
+
Интеграцию CRM с Alytics производят специалисты Alytics согласно брифу на интеграцию.  
+
 
+
<br>
+

Текущая версия на 13:22, 29 июля 2021

TravelLine (https://www.travelline.ru/) — это модуль онлайн-бронирования для отелей, гостиниц и пансионатов. Если у вас на сайте стоит модуль бронирования TravelLine, то для внедрения сквозной аналитики вам нужно:


1. Связать TravelLine c вашей CRM

У вас должна быть CRM-система, например, Битрикс24 или amoCRM. Вам необходимо в TravelLine настроить связку с CRM-системой, чтобы в CRM создавались Сделки или Лиды с модуля бронирования. Как связать TravelLine с CRM можно узнать в базе знаний TravelLine: https://www.travelline.ru/support/knowledge-base/kak-nachat-rabotu-v-lichnom-kabinete-travelline/.



2. Настройте передачу google client id из TravelLine в CRM

Вы можете сделать передачу google client id из TravelLine в CRM самостоятельно. Что такое google client id и где его взять описано здесь https://wiki.alytics.ru/index.php?title=Как_подготовить_CRM_для_подключения_к_Alytics, либо специалисты Alytics настроят такую интеграцию при оплате сервиса Alytics на пол года и больше.


Если настраивают специалисты Alytics, то последовательность такая:

2.1. Чтобы виджет бронирования TravelLine отдавал google client id "наружу" необходимо обновить код виджета бронирования TravelLine, который обычно выглядит так,

где XX-XXX-xxxxxx-xxx - идентификатор TravelLine:

<!-- start TL Booking form script -->
<div id="tl-booking-form"> </div>
<script type="text/javascript">// <![CDATA[
    (function (w) {
        var q = [
            ['setContext', 'XX-XXX-xxxxxx-xxx', 'ru'],
            ['embed', 'booking-form', {
                container: 'tl-booking-form',
                onConnect: function connect(app) {
                    ga && ga(function (gaTracker) {
                        app.pushArtifact('GaClientId', gaTracker.get('clientId'));
                    });
                },
            }]
        ];
        var t = w.travelline = (w.travelline || {}), ti = t.integration = (t.integration || {});
        ti.__cq = ti.__cq ? ti.__cq.concat(q) : q;
        if (!ti.__loader) {
            ti.__loader = true;
            var d = w.document, p = d.location.protocol, s = d.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = (p == 'https:' ? p : 'http:') + '//ibe.tlintegration.com/integration/loader.js';
            (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(s);
        }
    })(window);
    // ]]></script>
<!-- end TL Booking form script -->


В него добавить следующий строчки:

        
        var bookingSuccess = function (data) {
            if (typeof alsTracker !== 'undefined' && alsTracker) {
                alsTracker.setGoogleClientId();
                alsTracker.handleRequestData('', {
                    phone: data.customerPhone,
                    email: data.customerEmail
                }, 'ajax');
            }
        };

и

                onBookingSuccess: bookingSuccess


Итоговый код должен получиться таким:

<!-- start TL Booking form script -->
<div id="tl-booking-form"> </div>
<script type="text/javascript">// <![CDATA[
    (function (w) {
        var bookingSuccess = function (data) {
            if (typeof alsTracker !== 'undefined' && alsTracker) {
                alsTracker.setGoogleClientId();
                alsTracker.handleRequestData('', {
                    phone: data.customerPhone,
                    email: data.customerEmail
                }, 'ajax');
            }
        };
        var q = [
            ['setContext', 'XX-XXX-xxxxxx-xxx', 'ru'],
            ['embed', 'booking-form', {
                container: 'tl-booking-form',
                onConnect: function connect(app) {
                    ga && ga(function (gaTracker) {
                        app.pushArtifact('GaClientId', gaTracker.get('clientId'));
                    });
                },
                onBookingSuccess: bookingSuccess
            }]
        ];
        var t = w.travelline = (w.travelline || {}), ti = t.integration = (t.integration || {});
        ti.__cq = ti.__cq ? ti.__cq.concat(q) : q;
        if (!ti.__loader) {
            ti.__loader = true;
            var d = w.document, p = d.location.protocol, s = d.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = (p == 'https:' ? p : 'http:') + '//ibe.tlintegration.com/integration/loader.js';
            (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(s);
        }
    })(window);
    // ]]></script>
<!-- end TL Booking form script -->


2.2. В TravelLine нужно включить отправку события "onBookingSuccess". Для этого можно обратиться к поддержке TravelLine.


2.3. Теперь google client id будет передавать "наружу" и его сможет подхватить трекер-cid (захватчик форм), который настраивают специалисты по интеграции Alytics.