/ Scripts & jquery / Скрипты бронирования Travelline

Скрипты бронирования Travelline

HIT

13.03.2019

4400

1

Настраиваем скрипты Трэвел Лайн и интегрируем в них Яндекс цели и прочие инструменты интернет-маркетинга.

Форма поиска TL

Данная форма обычно устанавливается на всех страницах сайта чтобы вести на страницу бронирования

<script type="text/javascript">
	(function(w){
		var q=[
			['setContext', 'TL-INT-undersun-hotels.sanremo', 'ru'],
			['embed', 'search-form', {
				container: 'tl-search-form',
				onsubmit:function(){
					yaCounter88888888.reachGoal('SEARCH_HOTELPAGE');
					ga('send', 'event', 'searchform', 'hotelpage', location.pathname);
				}
			}]
		];
		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>

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

Делаю его изначально невидимым и в процессе он появляется

<div id="tl-booking-form"> </div>

<script type="text/javascript">

	ga('require', 'ecommerce');
	
	function bookingStepChanged(data) {
		switch (data.step) {
			case 'search':
			case 'preview':
			case 'payment':
			case 'complete':
				break;
			default:
				return;
		}
		ga('send', 'pageview', '/' + data.step);
		window.yaCounter88888888.hit('/' + data.step);
	};
	
	function bookingSuccess(data) {
		var label = data.bookingNumber + ' - ' + data.price + ' ' + data.currency;
		ga('send', 'event', 'complete', 'book', label);
		ga('ecommerce:addTransaction', {
			'id': data.bookingNumber,
			'affiliation': data.providerName,
			'currency': data.currency,
			'revenue': data.price
		});
		ga('ecommerce:send');
	};
	
	function noAvailableRooms(data) {
		var label = data.now + ', ' + data.guests + ', ' + data.arrivalDate + ' - ' + data.departureDate;
		ga('send', 'event', 'search', 'no-rooms', label);
		window.yaCounter88888888.reachGoal('Booked_Up', {
			'now': data.now,
			'arriaval': data.arrivalDate,
			'departure': data.departureDate,
			'guests': data.guests
		});
	};
	
	window.onload = function() {(function(w){
		var q=[
			['setContext', 'TL-INT-undersun-hotels.sanremo', 'ru'],
			['embed', 'booking-form', {container: 'tl-booking-form', onBookingStepChanged: bookingStepChanged, onBookingSuccess: bookingSuccess, onNoAvailableRooms: noAvailableRooms}]
		];
		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>

Целями в Метрике для этой страницы традиционно является отслеживание URL, в скрипте прописано псевдо изменение URL при переходе по шагам формы.

В данном скрипте есть вкрапления как Метрики, так и Google Analitics, причем если последний не установлен на сайте, то со строкой ga(‘require’, ‘ecommerce’); — будет конфликт.

Мультиязычность

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

<div id="tl-booking-form" style="display: none;"> </div>
<div id="tl-booking-form-en" style="display: none;"> </div>

А далее скриптом при определении языка (решение основано на
GTranslate) выводить соответствующую форму:


$(window).load(function () {
    var EnVersion = $.cookie('googtrans');

    if (EnVersion != null) {
		jQuery('#tl-search-form-mobile-en').show();
        jQuery('#tl-search-form-en').show();
        jQuery('#tl-booking-form-en').show();
    } else {
		jQuery('#tl-search-form-mobile').show();
        jQuery('#tl-search-form').show();
        jQuery('#tl-booking-form').show();
    }
});

jQuery('#glinks a').click(function () {
    var EnVersion = $.cookie('googtrans');

    if (EnVersion != null) {
		jQuery('#tl-search-form-mobile-en').show();
        jQuery('#tl-search-form-mobile').hide();
        jQuery('#tl-search-form-en').show();
        jQuery('#tl-search-form').hide();
        jQuery('#tl-booking-form-en').show();
        jQuery('#tl-booking-form').hide();
    } else {
		jQuery('#tl-search-form-mobile').show();
        jQuery('#tl-search-form-mobile-en').hide();
        jQuery('#tl-search-form').show();
        jQuery('#tl-search-form-en').hide();
        jQuery('#tl-booking-form').show();
        jQuery('#tl-booking-form-en').hide();
    }
});

Правда в примере выше прописано так много разных форм из-за того что на сайте заводились по сути одни и те же формы но в разных местах. Решение не самое изящное.

[alert]Запрос jQuery(window).load не поддерживается браузером IE, лучше заменить на $(document).ready. Также IE не воспринимает команды jQuery .show() и .hide() нужно заменять их на .css().[/alert]

В итоге оказалось что для Enternet Explorer и это не панацея. Пришлось делать такой скрипт в сотрудничестве с решением по добавлению класса браузера в body:

if($("body").is(".ie")) { 
	//alert ('Данный браузер является устаревшим.'); 
	setTimeout(function () { $( "#glinks a.lang-activ" ).click(); }, 2000);
}

Еще по поводу мультиязычности (более ранние заметки):

В самом скрипте бронирования нужно также делать коррективы. Либо делать две формы (2 скрипта) с разными параметрами:

['setContext', 'TL-INT-undersun-hotels.sanremo', 'ru'],
['setContext', 'TL-INT-undersun-hotels.sanremo', 'en'],

Либо сделать условие:

var lang = 'ru';

if ($.cookie("googtrans") == "/ru/en") {
    lang = 'en';
}

И прописать переменную

['setContext', 'TL-INT-undersun-hotels.sanremo', lang],

Но в последнем случае — не факт, что она будет переключаться «налету».

Возможные ошибки

Не открываются сетки с датами заезда и выезда.

Решил удалением стиля:

iframe, embed {width: 100%;}

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

Добавить комментарий

1 комментарий

  1. Геннадий

    Спасибо, а то api не нахожу у них. А тут и хуки, калбеки. Все наглядно, благодарю

Скрипты бронирования Travelline
Меню для мобильной версии
Рекомендации для васМеню для мобильной версииOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.