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

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

  1. Завести в билетной системе
  2. Установить виджет

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

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

Многие билетные системы уже интегрированы с Яндекс.Афишей. Если вы продаете билеты через одну из них, для размещения событий на Афише достаточно предоставить менеджеру ключи доступа к API этой системы.

Билетные системы, интегрированные с Афишей
Билетная система Сайт
Заказ билетов zakazbiletov.kz
Городские зрелищные кассы kassy.kz

Ваша билетная система есть в таблице?

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

После этого мы пришлем вам код для установки виджета Яндекс.Афиши, в котором будет ваш уникальный клиентский ключ.

Напишите нам об этом через форму обратной связи внизу страницы.

Вы можете использовать билетную систему Яндекс.Билеты. Менеджеры билетной системы помогут вам ее настроить.

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

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

Преимущества виджета:
  • устанавливается на любой сайт, на который можно встраивать JavaScript;
  • содержит удобные схемы залов и понятен для покупателей;
  • можно настроить внешний вид кнопки покупки билетов под дизайн сайта;
  • можно отслеживать продажи через Яндекс.Метрику или Google Analytics.
  1. Примеры виджета
  2. Установить виджет
  3. Изменить кнопку покупки билетов
  4. Настроить аналитику
  5. Настроить перенаправление пользователя после покупки

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



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

Для установки виджета необходимо, чтобы вы могли встраивать 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>
    Скопировано
  • Настройка скрипта — прописывается один раз для страницы, содержит клиентский ключ (clid), который вам выдаст менеджер после заключения договора
    <script>
      /* Настройка */
      var dealerName = 'YandexTicketsDealer';
      var dealer = window[dealerName] = window[dealerName] || [];
    
     dealer.push(['setDefaultClientKey', '<clid>']);
    
      /* Загрузка */
      (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.

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

Если на сайте несколько кнопок покупки билетов на разные мероприятия и для каждой нужно передавать данные о продажах в отдельный счетчик Яндекс.Метрики:
  1. Cообщите менеджеру номера счетчиков для сайта.
  2. Добавьте в код каждой кнопки dealer.push([‘setYandexMetrika’, COUNTER_ID]);, где COUNTER_ID — номер счетчика Яндекс.Метрики, куда должны передаваться данные о продажах.
Ограничение. В счетчик не передаются данные о достижении каких-либо целей (например, выбора мест или перехода к экрану с контактными данными).

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

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

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

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

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