Это старая версия документа!
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"
}
]
}
}
}