Инструменты пользователя
Боковая панель
Это старая версия документа!
Ticketland iframe
Что такое Iframe
Iframe - специальная выделенная область на странице вашего сайта, в которой отображается часть сайта ticketland.ru. Благодаря этому пользователи могут выбрать и оплатить билет в нашей системе, оставаясь на вашем сайте. Также можно использовать отдельные страницы (например, схема зала и корзина) в случае интеграции в ваш сайт.
Ticketland предоставляет скрипт, автоматически отображающий iframe, настроенный на заданную страницу сайта www.ticketland.ru. Навигация и покупка билетов будет происходить в рамках iframe без взаимодействия со страницей, в которой он встроен.
Регистрация Iframe
В backstage.ticketland.ru вы получите доступ к странице http://backstage.ticketland.ru/frame#/ (на начальной странице кнопка «Настроить продажу билетов на сайте театра»)
Домен указывается согласно используемому протоколу ( http/https ), на главную страницу, например https://site.ru
На той же странице генерируется скрипт для вставки на страницу вашего сайта. Пример такого скрипта:
<div id=«tlFrameContainer»></div>
<script type="text/javascript"></script>
var TLConf = {
accessHash: '1111112223334444555',
start: '/teatry/building',
containerId: 'tlFrameContainer',
baseDomain: 'https://www.ticketland.ru'
};
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = TLConf.baseDomain + '/site/getLiteFrameJS/';
document.body.appendChild(script);
</script>
- start – это относительная ссылка (без https://www.ticketland.ru), указывающая на страницу, которая будет открыта внутри фрейма
- accessHash – уникальный ключ фрейма, полученный при регистрации
Установка фрейма
Для установки фрейма нужно разместить код на вашем сайте. Можно изменить параметр start чтобы открывать в фрейме нужную страницу с сайта ticketland.ru.
Возможные места для установки фрейма:
- По кнопке купить билет открывается новая страница, содержащая фрейм Ticketland. Может содержать header/footer сайта
- Фрейм загружается на имеющейся странице
Важные моменты:
- Фрейм и родительские элементы не должны иметь жесткие ограничения по ширине и высоте (по умолчанию фрейм занимает 100% ширины страницы).
- Рекомендуется вставлять фрейм ближе к началу страницы, по возможности не загромождая пространство ненужными блоками т.к. после открытия страницы, посетитель должен сразу увидеть фрейм и приступить к заказу.
- Сторонние скрипты не должны влиять на работу фрейма Ticketland.
- Над контейнером фрейма (tlFrameContainer) не должно быть сторонних блоков, перекрывающих его.
- Чтобы фрейм отображался в мобильной версии, ваш сайт также должен быть адаптивным. (стили для мобильной версии фрейма Ticketland применяется с 575px ).
- Не рекомендуется открывать фрейм в нестандартных контейнерах вида: Lightbox, Fancybox, Carousel и др. Фрейм, размещенный в таких контейнерах может работать нестабильно.
- Для Москвы используется www, для других регионов есть свои поддомены. Для настройки фрейма в других городах нужно указывать в ссылке поддомен
Расширенный Iframe
Навигация пользователя может начинаться не со страницы площадки, а сразу со страницы мероприятия. Это подходит тем организаторам, у которых на сайте уже есть афиша со списком мероприятий. Для этого необходимо подставлять параметр start в скрипте. Можно жестко привязать этот параметр в коде страниц или записать необходимый url в базе вашего сайта. Для полной автоматизации можно воспользоваться нашим API, по которому можно получить информацию о мероприятиях.
Адрес API: http://backstage.ticketland.ru/frame/api/shows
Пример данных API:
{
"hall_id": "2244567",
"hall_name": "Зал",
"performance_id": 9999,
"reveal_dt": "2001-01-01 00:00:00",
"script": "<script> var TLConf = {
accessHash: '1111112223334444555',
start: '/teatry/building/show/20170303_1900-11112222/',
containerId: 'tlFrameContainer',
baseDomain: 'https://www.ticketland.ru'
};
var script = document.createElement('script');script.type = 'text/javascript';
script.src = TLConf.baseDomain + '/site/getLiteFrameJS/';
document.body.appendChild(script);
</script>",
"show_full_url": "https://www.ticketland.ru/teatry/building/show/",
"show_id": 111222,
"show_name": "Название шоу",
"start_date": "2017-03-03 19:00:00",
"total_ticket_count": 20
}
- script – готовый код для разворачивания фрейма Ticketland. В нем указана ссылка на схему зала мероприятия по заданной дате.
- show_full_url – прямая ссылка на страницу «Шоу» сайта Ticketland.ru. Подставлять в параметр start если необходима ссылка на страницу шоу со списком мероприятий по дате.
- reveal_dt - дата и время открытия продаж, если такой настройки для данного мероприятия в билетной системе нет, то ставится «2001-01-01 00:00:00»
- start_date - дата и время начала мероприятия
Пример PHP – кода для обращения к API – Ticketland:
if (!ini_get('allow_url_fopen')) {
error_log("set allow_url_fopen to true or change script to use curl" . PHP_EOL);
die();
}
$url = 'https://backstage.ticketland.ru/login';
$api = 'https://backstage.ticketland.ru/frame/api/shows';
$params = array(
'username' => '', // указать логин
'password' => '', // указать пароль
'remember' => 'True',
);
$result = file_get_contents($url, false, stream_context_create(array(
'http' => array(
'method' => 'POST',
'header' => 'Content-type: application/x-www-form-urlencoded',
'content' => http_build_query($params)
)
)));
$session;
foreach ($http_response_header as $string) {
if (preg_match('/^Set\-Cookie: .*?session=([^;]+)/', $string, $matches)) {
$session = $matches[1];
break;
}
}
$result = file_get_contents($api, false, stream_context_create(array(
'http' => array(
'method' => 'GET',
'header' => 'Cookie: session=' . $session,
)
)));
print $result . PHP_EOL;
- username – логин от сервиса backstage.ticketland.ru
- password – пароль от сервиса backstage.ticketland.ru
- $result – JSON – объект содержащий всю информацию из API – Ticketland
Параметры TLConf
- googleAnalytics
идентификатор счетчика, если на сайте используется несколько счетчиков google аналитики значение по умолчанию '' (пустая строка)
- useEcommerceGa
использовать для передачи данных функцию ga значение по умолчанию true
- useEcommerceGtag
использовать для передачи данных функцию gtag значение по умолчанию false,
- ecommerceCallback
указать callback функцию в которую будет передан объект ecommerce по умолчанию function(ecommerce){ window.dataLayer = window.dataLayer || []; window.dataLayer.push(ecommerce); }
Данные для ecommerce
Для получения данных электронной торговли есть два способа
- подписаться на событие передаваемое из «фрейма» через механизм postMessage. Пример window.addEventListener('message', function(event){try{var json = JSON.parse(event.data)} catch(){}}, false); Документация https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener
- в конфиге переопределить функцию. TLConf.ecommerceCallback = function(ecommerce){}; ecommerce это объект с данными в формате расширенной электронной торговли https://developers.google.com/tag-manager/enhanced-ecommerce
Покупка
{«ecommerce»:{«purchase»:{«actionField»:{«id»:«52346890»,«revenue»:«600»},«products»:[{«id»:«1353580»,«name»:«Юные таланты Бразилии, 2020-10-31 19:00:00»,«brand»:«Театр имени»,«category»:«Юные таланты Бразилии»,«variant»:«eticket»,«quantity»:1,«price»:«600»}]}}}