Настраиваем скрипты Трэвел Лайн и интегрируем в них Яндекс цели и прочие инструменты интернет-маркетинга.
Форма поиска 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%;}
[site-socialshare]
Спасибо, а то api не нахожу у них. А тут и хуки, калбеки. Все наглядно, благодарю