Разместить билеты на своем сайте

Чтобы продавать билеты на своем сайте, нужно завести их в билетной системе и установить на сайте виджет Яндекс Афиши.

Завести в билетной системе

У вас есть билетная система?

Установить виджет

Установите на своем сайте виджет Яндекс Афиши, чтобы продавать через него билеты.

Преимущества виджета:

• устанавливается на любой сайт, на который можно встраивать JavaScript;
• содержит удобные схемы залов и понятен для покупателей;
• можно настроить внешний вид кнопки покупки билетов под дизайн сайта;
• можно отслеживать продажи через Яндекс Метрику или Google Analytics.

Пример виджета

Со схемой зала

Без схемы зала

Мероприятие с разными датами

Площадка с разными мероприятиями

Встроить код виджета на сайт

Для установки виджета необходимо, чтобы вы могли встраивать JavaScript на ваш сайт. При этом неважно, написан ли сайт самостоятельно или создан через конструктор (например, Tilda, Wordpress или Drupal).

Чтобы обеспечить безопасность платежей, виджет работает по протоколу HTTPS. Вы можете установить виджет и на сайт, который работает без HTTPS — в таком случае виджет будет открываться в отдельном окне. Но мы рекомендуем использовать HTTPS, чтобы обезопасить данные пользователей. О том, как перейти на HTTPS, читайте в разделе Инструкция по переходу на HTTPS Помощи Яндекс Вебмастера.

Чтобы установить виджет, добавьте на сайт код, который вам прислал менеджер.

Код виджета делится на три части:

• Настройка содержимого виджета — содержит уникальный код сеанса на Яндекс Афише (sessionid)

  <y:ticket data-session-id="<sessionid>" data-template="yandex-button"></y:ticket>
  

• Настройка внешнего вида кнопки

  <script id="yandex-button" type="text/html">
  <b style="color:#333 !important; font-size:15px !important; font-family:Arial, Helvetica Neue, Helvetica, sans-serif !important; font-weight:normal !important; line-height:36px !important; text-decoration:none !important; white-space:nowrap !important; display:inline-block !important; vertical-align:middle; background:#ffde41 !important; border-radius:2px !important; padding:0 16px !important; cursor:pointer; margin:0">Купить билет</b>
  </script>
  

• Настройка скрипта — прописывается один раз для страницы, содержит клиентский ключ (Client Key), который вам выдаст менеджер после заключения договора

  <script>
  /* Настройка */
  var dealerName = 'YandexTicketsDealer';
  var dealer = window[dealerName] = window[dealerName] || [];
  
  dealer.push(['setDefaultClientKey', 'YOUR_CLIENT_KEY']);
  
  /* Загрузка */
  (function () {
  var rnd = '?' + new Date().getTime() * Math.random();
  var script = document.createElement('script');
  var target = document.getElementsByTagName('script')[0];
  script.async = true;
  script.src = 'https://widget.afisha.yandex.ru/dealer/dealer.js' + rnd;
  target.parentNode.insertBefore(script, target);
  })();
  </script>
  

Изменить кнопку покупки билетов

Чтобы настроить оформление кнопки, которая вызывает виджет, измените часть скрипта:

<script id="yandex-button" type="text/html">
  <b style="color:#333 !important; font-size:15px !important; font-family:Arial, Helvetica Neue, Helvetica, sans-serif !important; font-weight:normal !important; line-height:36px !important; text-decoration:none !important; white-space:nowrap !important; display:inline-block !important; vertical-align:middle; background:#ffde41 !important; border-radius:2px !important; padding:0 16px !important; cursor:pointer; margin:0">Купить билет</b>
</script>

Настроить аналитику

Чтобы увидеть заказы через виджет в системе веб-аналитики, сообщите менеджеру номер счетчика для сайта. Менеджер добавит код счетчика в код виджета. В результате данные о продажах через виджет будут отображаться в Электронной коммерции в Яндекс Метрике или в Электронной торговле в Google Analytics.

Дополнительные настройки систем:

Данные о продажах могут передаваться в Яндекс Метрику или Google Analytics. Если вы работаете с другой системой аналитики, напишите менеджеру.

Настроить перенаправление пользователя после покупки

Вы можете настроить виджет так, чтобы пользователь после покупки автоматически переходил на определенную страницу на вашем сайте, например на страницу отзывов. Для этого в коде настройки виджета подпишитесь на событие успешной покупки salecomplete.

Обязательно установите таймаут перед перенаправлением, чтобы пользователь успел увидеть, что покупка успешно завершена и он получит свои билеты.

Пример кода:

YandexTicketsDealer.push(['addEventListener', 'salecomplete', function() {
    setTimeout(function(){
        /* Разместите здесь код перенаправления на нужную страницу сайта */
        console.log("now we are redirecting you");
    }, 1000);
}])