Кейсы In-App

Кейсы In-App — это практические сценарии маркетинговых механик, которые настраиваются через In-App-канал. Каждый кейс описан по одной схеме: в какой момент показывается In-App, что видит пользователь, что происходит после действия и какой результат получает бизнес. Как собрать механику из In-App-шаблона и размещения — в шагах каждого кейса.

к сведению

In-App-контент запускается только через размещения. Он не используется в броадкастах, регулярных, триггерных рассылках и A/B/n-тестах.

Онбординг и welcome-цепочка

Сценарий: новый пользователь впервые открывает приложение. Последовательно показываются 4–5 коротких экранов: избранное, персональные рекомендации, бонусная программа, отслеживание заказа. На последнем экране — «Промокод для приятных покупок» и кнопка «Получить промокод».

Задача: познакомить нового пользователя с функциями приложения и вручить первый промокод.

Как собрать:

Создайте ресурс с In-App-каналом и подготовьте экраны приложения, на которых будет показываться контент.
В шаблоне соберите цепочку из нескольких страниц: каждый экран знакомит с одной функцией приложения, последний содержит кнопку с промокодом. Рекомендуемые типы отображения: Fullscreen или Modal.
Создайте размещение с триггером старт приложения. Триггер срабатывает при каждом запуске приложения, поэтому задайте лимит на количество показов — 1 показ на пользователя: цепочка покажется при первом запуске и больше не повторится.

подсказка

Если список функций не помещается на одном экране, используйте несколько страниц шаблона — пользователь переключается между ними внутри приложения.

Схема: Fullscreen или Modal → 4–5 страниц шаблона → старт приложения → лимит на 1 показ.

Сбор разрешений на push

Сценарий: пользователь оформил первый заказ, и сверху появляется Slideup: «Не пропустите доставку» — «Включите уведомления, и мы сообщим, когда курьер будет в пути». После нажатия кнопки приложение открывает системный запрос разрешения на push. Тем, кто запрос отклонил, позже показывается отдельный In-App с кнопкой перехода в настройки уведомлений.

In-App с запросом разрешения на push-уведомления

Задача: получить согласие на push-уведомления в момент, когда они нужны пользователю.

Как собрать:

В шаблоне (тип Slideup или Modal) объясните, о чём приложение будет уведомлять и как это связано с текущим действием: например, сообщить о статусе доставки после оформления заказа.
Создайте размещение с триггером пользовательское событие из приложения — разработчик запускает показ методом trigger по имени в подходящий момент: например, после оформления заказа или первых завершённых действий. Другой вариант — триггер переход на экран из ресурса: окно покажется при входе на выбранный экран, например в раздел «Новинки».
По нажатию кнопки приложение инициирует системный запрос разрешения на push — эту логику реализует разработчик приложения.
Для пользователей, отклонивших системный запрос, подготовьте отдельное размещение: In-App с кнопкой, которая ведёт на экран настроек уведомлений приложения, — конкретную страницу задаёт разработчик.

подсказка

Момент запроса влияет на согласие: окно, показанное сразу при первом запуске, может показаться навязчивым. Триггер по имени даёт приложению контроль над таймингом.

Схема: Slideup → событие после первого заказа → системный запрос разрешения; для отклонивших — кнопка на экран настроек уведомлений.

Сценарий: пользователь второй раз за неделю открывает категорию «Кроссовки». При входе в каталог появляется Modal: «−15% на то, что вы присматриваете», промокод SNEAKERS15 и срок действия — до 23:59. Кнопка «Перейти в каталог» ведёт в раздел с активной акцией.

Задача: показать пользователю персональный промокод и довести его до покупки.

Как собрать:

В тексте шаблона вставьте переменную — например, {profile.Data.Custom["promo_code"]} или любую другую в зависимости от того, где в профиле хранится промокод. Каждому подписчику подставится его значение.
Соберите сегмент по интересам: просмотры категории, добавления в избранное, прошлые покупки.
Кнопке «Перейти в каталог» задайте ссылку на раздел каталога с активной акцией.
Создайте размещение с триггером переход на экран из ресурса и аудиторией из сегмента — промокод покажется, когда пользователь зайдёт в каталог.
Чтобы промокод не показывался при каждом входе в каталог, ограничьте показы: либо абсолютно — лимитом на количество показов одному пользователю, либо с помощью политики отправки. Если акция ограничена по времени, задайте расписание показов.

Ещё один вариант — промокоды, созданные в платформе. С SDK они не интегрируются: промокоды создаются и хранятся в платформе, а в In-App подставляются в шаблон переменной вида {loyalty.name.promocode}, где name — имя программы лояльности. Как создать и хранить промокоды — в статье Промокоды.

Схема: Modal → переменная промокода → сегмент по интересам → переход на экран каталога → ограничение показов.

Персональные офферы

Сценарий: пользователь открыл карточку товара, и поверх появляется Slideup: «У вас 1 840 бонусов. Оплатите ими до 30% этой покупки». Профиль с другим уровнем лояльности увидит другой оффер: имя, статус, балльный счёт и цена подставляются из данных профиля.

Slideup с персональным оффером по бонусной программе

Задача: показать оффер, собранный из данных профиля: имя, уровень лояльности, балльный счёт, персональная цена.

Как собрать:

Соберите оффер в шаблоне из переменных профиля: имя в приветствии, статус или уровень лояльности, текущий балльный счёт, персональная цена товара. Источник данных — поля профиля, подставляемые переменными.
Используйте тип Modal или Slideup: оффер заметен, но не перекрывает весь экран.
Создайте размещение с триггером переход на экран из ресурса — например, экран профиля, карточки товара или корзины.
Если оффер ограничен по времени, задайте расписание показов.

Схема: Modal или Slideup → переменные профиля → переход на экран (карточка товара, корзина) → расписание показов.

Геймификация

Сценарий: заказ оформлен, и на экране «Спасибо за заказ» появляется In-App со скретч-картой: «Сотрите слой и узнайте бонус на следующую покупку». Под слоем — «+500 бонусов».

warning

Скретч-карту и колесо фортуны нельзя собрать в блочном редакторе шаблона — игровые механики создаются только кодом. Ниже — пример реализации колеса фортуны на HTML, CSS и JS.

HTML

<div class="fortune-app">

  <div class="fortune-header">
    <h2>Колесо фортуны</h2>
    <p>Крутите колесо и получите подарок</p>
  </div>

  <div class="fortune-container">

    <!-- Неподвижный указатель -->
    <div class="fortune-pointer"></div>

    <!-- Вращающееся колесо -->
    <div class="fortune-wheel" id="fortuneWheel">

      <!-- Сектор 1 -->
      <div class="fortune-prize prize-1">
        <strong>+500</strong>
        <span>бонусов</span>
      </div>

      <!-- Сектор 2 -->
      <div class="fortune-prize prize-2">
        <strong>+300</strong>
        <span>бонусов</span>
      </div>

      <!-- Сектор 3 -->
      <div class="fortune-prize prize-3">
        <strong>−10%</strong>
        <span>скидка</span>
      </div>

      <!-- Сектор 4 -->
      <div class="fortune-prize prize-4">
        <strong>Подарок</strong>
      </div>

      <!-- Сектор 5 -->
      <div class="fortune-prize prize-5">
        <strong>+200</strong>
        <span>бонусов</span>
      </div>

      <!-- Сектор 6 -->
      <div class="fortune-prize prize-6">
        <strong>+100</strong>
        <span>бонусов</span>
      </div>

    </div>

    <!-- Неподвижный центр -->
    <div class="fortune-center">★</div>

  </div>

  <button
    id="fortuneSpin"
    class="fortune-button"
    type="button"
  >
    Крутить колесо
  </button>

</div>

CSS

/* Основной контейнер */

.fortune-app {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 20px;

  border-radius: 28px;

  background: linear-gradient(
    135deg,
    #d9e2ff 0%,
    #bdd9ff 55%,
    #d9d0ff 100%
  );

  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: #111d3f;
}

.fortune-app * {
  box-sizing: border-box;
}

/* Заголовок */

.fortune-header h2 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
}

.fortune-header p {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: #526184;
}

/* Область колеса */

.fortune-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 32px auto 28px;
}

/* Колесо */

.fortune-wheel {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;

  border-radius: 50%;
  border: 6px solid #a9c4ff;

  background: conic-gradient(
    from -30deg,
    #086fff 0deg 60deg,
    #d9e5ff 60deg 120deg,
    #bcd5ff 120deg 180deg,
    #e0e5ff 180deg 240deg,
    #c5d9ff 240deg 300deg,
    #dce7ff 300deg 360deg
  );

  box-shadow:
    0 6px 16px rgba(40, 90, 190, 0.12);

  overflow: hidden;

  transition:
    transform 4s cubic-bezier(
      0.12, 0.68, 0.12, 1
    );
}

/* Разделители секторов */

.fortune-wheel::after {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: 50%;

  background: repeating-conic-gradient(
    from -30deg,
    rgba(255, 255, 255, 0.9) 0deg 0.7deg,
    transparent 0.7deg 60deg
  );

  pointer-events: none;
}

/* Подписи призов */

.fortune-prize {
  position: absolute;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 30%;

  transform: translate(-50%, -50%);

  color: #214b8a;
}

.fortune-prize strong {
  font-size: clamp(12px, 4vw, 18px);
  line-height: 1.1;
  font-weight: 700;
}

.fortune-prize span {
  margin-top: 4px;
  font-size: clamp(9px, 2.5vw, 12px);
}

/* Расположение подписей */

.prize-1 {
  top: 19%;
  left: 50%;
  color: #ffffff;
}

.prize-2 {
  top: 35%;
  left: 77%;
}

.prize-3 {
  top: 65%;
  left: 77%;
}

.prize-4 {
  top: 81%;
  left: 50%;
}

.prize-5 {
  top: 65%;
  left: 23%;
}

.prize-6 {
  top: 35%;
  left: 23%;
}

/* Указатель */

.fortune-pointer {
  position: absolute;
  z-index: 5;

  top: -15px;
  left: 50%;

  transform: translateX(-50%);

  width: 32px;
  height: 44px;

  background: linear-gradient(
    180deg,
    #c5d7ff,
    #477cff
  );

  clip-path: polygon(
    0 0,
    100% 0,
    50% 100%
  );
}

/* Центр колеса */

.fortune-center {
  position: absolute;
  z-index: 4;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;

  border-radius: 50%;
  border: 4px solid #dce8ff;

  background: linear-gradient(
    135deg,
    #58adff,
    #075bfa
  );

  color: #ffffff;
  font-size: 28px;

  box-shadow:
    0 3px 10px rgba(0, 91, 250, 0.2);
}

/* Кнопка */

.fortune-button {
  display: block;
  width: 100%;
  min-height: 52px;

  padding: 14px 20px;

  border: none;
  border-radius: 18px;

  background: linear-gradient(
    135deg,
    #078bff,
    #075bfa
  );

  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;

  color: #ffffff;

  cursor: pointer;
}

.fortune-button:disabled {
  opacity: 0.7;
  cursor: default;
}

.fortune-button:focus-visible {
  outline: 3px solid #111d3f;
  outline-offset: 3px;
}

JavaScript

// Инициализация колеса

const initFortune = () => (
  (() => (
    startFortune(
      document.getElementById("fortuneWheel"),
      document.getElementById("fortuneSpin")
    )
  ))()
);

// Настройка вращения

const startFortune = (wheel, button) =>
  !wheel || !button || button.dataset.ready
    ? null
    : (
      button.dataset.ready = "true",

      (() => (
        setupFortune(wheel, button)
      ))()
    );

// Обработка нажатий

const setupFortune = (wheel, button) => (
  (() => (
    (() => (
      attachSpin(wheel, button)
    ))()
  ))()
);

// Логика вращения

const attachSpin = (wheel, button) => (
  (() => (
    wheel.dataset.rotation = "0",

    button.addEventListener(
      "click",
      () => (
        button.disabled
          ? null
          : spinWheel(wheel, button)
      )
    )
  ))()
);

// Запуск анимации

const spinWheel = (wheel, button) => (
  (() => (
    button.disabled = true,

    rotateWheel(wheel),

    setTimeout(
      () => button.disabled = false,
      4000
    )
  ))()
);

// Расчёт угла

const rotateWheel = wheel => (
  (() => (
    wheel.dataset.rotation = String(
      Number(wheel.dataset.rotation || 0) +
      360 * (5 + Math.floor(Math.random() * 3)) +
      60 * (1 + Math.floor(Math.random() * 6)) -
      Number(wheel.dataset.rotation || 0) % 360
    ),

    wheel.style.transform =
      "rotate(" + wheel.dataset.rotation + "deg)"
  ))()
);

// Запуск после загрузки HTML

document.readyState === "loading"
  ? document.addEventListener(
      "DOMContentLoaded",
      initFortune
    )
  : initFortune();

Задача: вовлечь пользователя интерактивной механикой — скретч-карта, колесо фортуны, таймер акции.

Как собрать:

Включите в размещении опцию показа через X секунд после триггера — задержка подготавливает пользователя к появлению игры.
Нестандартную интерактивную механику соберите в редакторе кода шаблона — доступны HTML, CSS и JS.
Игровую механику можно реализовать прямо в HTML/CSS/JS шаблона. Если игра должна обращаться к функциям приложения или менять данные профиля, потребуется соответствующая интеграция.
Приз выдаётся по вашей логике: в коде шаблона или на стороне приложения. Если приз нужно записать в профиль, используйте интеграцию с API платформы.
Создайте размещение с триггером пользовательское событие из приложения — например, событие после оформления заказа, — и задайте лимит на количество показов — 1 показ на пользователя.

Схема: редактор кода (HTML/CSS/JS) → событие после покупки → задержка показа → лимит на 1 показ.

Повторная покупка и возврат пользователей

Сценарий: пользователь покупал корм для питомца 28 дней назад. При следующем запуске приложения появляется Slideup: «Похоже, корм скоро закончится» с кнопкой «Добавить в корзину». Тем, кто давно не заходил, показывается In-App: «Ваши 2 400 бонусов всё ещё с вами. Используйте их до 15 ноября».

Задача: вернуть к покупке того, кто скоро её повторит, и реактивировать того, кто давно не покупал.

Как собрать:

Соберите сегмент по событию или полю профиля: дата последней покупки больше N дней назад, конкретная категория или товар в прошлых заказах.
В шаблоне (тип Modal или Slideup) вставьте переменные: имя, накопленные баллы, срок действия бонусов.
Создайте размещение с аудиторией из сегмента и триггером старт приложения — вернувшийся пользователь увидит предложение при запуске.
Ограничьте частоту отображения политикой отправки.

подсказка

Повторную покупку и возврат давно неактивных соберите как два отдельных размещения: у них разные сегменты, шаблоны и ритм показов.

Схема: сегмент по последней покупке → Modal или Slideup → старт приложения → ограничение частоты показов.

Системные и сервисные уведомления

Сценарий: приложение обновилось — сверху появляется Floating bar: «Приложение обновлено до версии 5.2 — посмотреть новое». Заказ передан курьеру — по событию из приложения показывается Slideup: «Курьер уже в пути».

Задача: сообщить пользователям о выходе обновления приложения, статусе заказа или напоминании.

Как собрать:

В шаблоне опишите обновление, статус или напоминание. Для ненавязчивых уведомлений используйте Floating bar, для статусных — Slideup или Modal.
Для уведомления об обновлении создайте размещение с триггером старт приложения и задайте расписание показов — например, на неделю после выхода обновления.
Для статусных уведомлений удобнее триггер по имени: приложение вызывает событие в момент смены статуса заказа, и пользователь получает уведомление в нужный момент.
Ограничьте показы лимитом, чтобы уведомление не показывалось при каждом запуске.

Схема: Floating bar → старт приложения → расписание на неделю; для статусов — Slideup → событие по имени (например, order_out_for_delivery) → лимит на 1 показ.

Конвертация анонимных пользователей

Сценарий: пользователь без авторизации посмотрел несколько товаров и добавил два в избранное. Появляется In-App: «Сохраните избранное» — «Войдите или зарегистрируйтесь, чтобы товары не потерялись» и кнопка «Создать аккаунт». После регистрации SDK связывает устройство с профилем, и общие In-App сменяются персонализированными.

In-App с предложением сохранить избранное

Задача: довести анонимного пользователя до регистрации и включить персонализацию.

Как собрать:

Анонимные пользователи не имеют подписки на In-App-канал, поэтому требование подписки на них не распространяется: In-App можно показывать всем пользователям без авторизации.
В шаблоне не используйте переменные профиля — контент должен быть общим: призыв сохранить избранное, бонус за регистрацию.
Кнопке задайте ссылку на экран регистрации приложения.
Создайте размещение с триггером старт приложения или переход на экран из ресурса и ограничьте частоту и лимит показов, чтобы механика не стала навязчивой.

примечание

Анонимные пользователи отслеживаются без привязки к профилю. После аутентификации и подписки на In-App-канал SDK связывает устройство с профилем, и становятся доступны персонализированные In-App.

Схема: общий In-App без переменных → старт приложения или переход на экран → кнопка на экран регистрации → после аутентификации — персонализированные показы.

Микроопрос после действия

Сценарий: пользователь пообщался с оператором поддержки, приложение вызывает событие, и на экране появляется Modal: «Уделите нам пару минут» — «Расскажите, как прошло общение с нашим оператором» с кнопкой «Оставить отзыв». Кнопка ведёт на форму, настроенную и опубликованную в платформе: пользователь отвечает на вопросы, а ответы импортируются в его профиль.

Задача: собрать обратную связь сразу после действия и сохранить ответы в профиле клиента.

Как собрать:

Создайте форму с вопросами опроса — например, с оценкой и полем для комментария. На вкладке «Действия» настройте импорт ответов в базу данных.
Опубликуйте форму и скопируйте её URL на вкладке «Поделиться».
В шаблоне (тип Modal или Slideup) напишите приглашение пройти опрос и задайте кнопке ссылку на скопированный URL.
Создайте размещение с триггером пользовательское событие из приложения — например, событие после закрытия чата с оператором или доставки заказа.

Схема: Modal с кнопкой → событие из приложения → переход на опубликованную форму → импорт ответов в профиль.

Как оценить результат

In-App фиксирует показы, закрытия, клики и CTR — по ним видно, сколько пользователей увидели размещение и сколько отреагировали. Показы и CTR — опережающие показатели: они отражают интерес, а бизнес-результат измеряется конверсией в целевое действие: покупку, регистрацию, включение уведомлений.

Чтобы сравнить варианты контента, добавьте в размещение до 8 шаблонов: аудитория разделится между ними в равных пропорциях случайно.

Онбординг и welcome-цепочка​

Сбор разрешений на push​

Промо-акции и промокоды​

Персональные офферы​

Геймификация​

Повторная покупка и возврат пользователей​

Системные и сервисные уведомления​

Конвертация анонимных пользователей​

Микроопрос после действия​

Как оценить результат​

Онбординг и welcome-цепочка

Сбор разрешений на push

Промо-акции и промокоды

Персональные офферы

Геймификация

Повторная покупка и возврат пользователей

Системные и сервисные уведомления

Конвертация анонимных пользователей

Микроопрос после действия

Как оценить результат