Таргетинг по сегменту Mindbox


Допустим, вам нужно показать или исключить показ формы тем, кого Mindbox определяет и относит к определенному сегменту.

Например:
-показывать разные формы с акциями мужчинам и женщинам;
- выводить показ персональных промокодов тем, кто давно не покупал;
- собирать отзывы после покупки на сайте;
- предлагать обновить емейл у тех, кто давно не открывал письма;
- собирать категории подписки тех, у кого они не заполненны

Схема работы:

Подготовительный этап. Popmechanic: создаем нужную форму, тестируем её отображение на сайте по тестовым ссылкам

1) Mindbox: создаем в аккаунте операцию для проверки сегмента и нужные сегменты
2) Popmechanic: прописываем в настройках JS-сужения кусочек кода с нужными переменными
1) Создание операции в Mindbox для показа по сегменту
Для того, чтобы работал показ по сегментам менеджеру Mindbox нужно создать операцию для проверки вхождения пользователя в сегмент.

Для этого в Mindbox делаем такие действия:
меню "Кампании" - выбираем кампанию - добавить операцию

Параметры операции:
Имя: Проверка сегмента
Системное имя: CheckSegment
Для сервиса: Операция V3
Для точек интеграции - выбираем свои нужные
Создание операции - 1
Создание операции - 2
2) Настройка показа по сегменту в Popmechanic через JS-сужение:

Выберите любую созданную форму, зайдите в настройки таргетинга формы и внизу экрана будет пункт JS-сужение.

Обратите внимание!
JS-сужение не работает на бесплатных тарифах
Куда вставлять код для JS-сужения
Общая схема кода для показа по сегментам Mindbox:
Вам нужны такие переменные:

1) операция Mindbox для проверки сегментации - машинное имя вашей операции, которую создали шагом раннее
Пример:
var operationToRun = 'CheckSegment';

2) внешний ID СЕГМЕНТАЦИИ Mindbox - выбираем ту сегментацию, показ которому хотим исключить или наоборот.
Объектом сегментации должен быть клиент.
Пример:
var externalId = '9cf902ec-b34a-4787-bac5-b23d5876f2b5';

ВАЖНО!!!
Вам нужно найти ID сегментации, а НЕ СЕГМЕНТА, это могут быть разные данные.

Рекомендация
Если вам нужно исключить и включить несколько разных сегментов для показа формы, то лучше создайте такой общую сегментацию со всеми условиями сразу в Mindbox и используйте одну сегментацию в дальнейшем.
Где найти ID сегментации для показа по ней
3) Показывать или НЕ показывать форму при попадании в сегментацию
var showIfInSegment = true; - показывать
var showIfInSegment = false; - не показывать

4) Запоминать ли сегментацию при перезагрузке страницы
var memoSegment = true; - запоминать
var memoSegment = false; - не запоминать

5) Тип формы - нужно выбрать 1 из вариантов
'popup' - просто попап, посреди экрана, сбоку
'button' - управлять кнопкой вызова формы (маленькая сбоку экрана, которая вызывает форму при нажатии)
'embedded-show' - встроенная форма, до загрузки сегмента - скрывать
'embedded-hide' - встроенная форма, до загрузки сегмента - показывать

Пример:
var formType = 'embedded-show';

6) ID формы в Popmechanic - копируем из url при создании формы
Пример:
var formId = '7551';
Где найти ID формы для показа её по сегменту
Скопируйте полностью код ниже в JS-сужение нужной формы, заменив переменные описанными выше значениями:
var operationToRun = 'Название операции';
var externalId = 'ID сегментации';
var showIfInSegment = false;
var memoSegment = false;
var formType = 'embedded-show'; 
var formId = 'ID формы';
var segmentKey = 'popmechanic-mindbox.in-segment.' + externalId;

var inSegmentByDefault = false;

PopMechanic.mbTargetingRun = PopMechanic.mbTargetingRun || {};
PopMechanic.mbTargetingRun[formId] = PopMechanic.mbTargetingRun[formId] ? PopMechanic.mbTargetingRun[formId] + 1 : 1;

PopMechanic.mbSegmentsCode = PopMechanic.mbSegmentsCode || {};
PopMechanic.mbSegmentsRequestRunning = PopMechanic.mbSegmentsRequestRunning || {};
PopMechanic.mbSegmentsMembership = PopMechanic.mbSegmentsMembership || {};
PopMechanic.mbSegmentsHandlers = PopMechanic.mbSegmentsHandlers || {};
PopMechanic.mbSegmentsHandlersForms = PopMechanic.mbSegmentsHandlersForms || {};
PopMechanic.mbSegmentsHandlersForms[externalId] = PopMechanic.mbSegmentsHandlersForms[externalId] || {};

if (localStorage.getItem(segmentKey) !== null && memoSegment) {
  return !!parseInt(localStorage.getItem(segmentKey)) === showIfInSegment;
}

PopMechanic.mbSegmentsHandlers[externalId] = PopMechanic.mbSegmentsHandlers[externalId] || [];

var successHandler = function() {
    var showForm = PopMechanic.mbSegmentsMembership[externalId] === showIfInSegment;

    if (!showForm) {
      if (formType === 'button') {
        PopMechanic.$("#popmechanic-button").remove();
      }
      if (formType === 'embedded-hide') {
        PopMechanic.$('[data-popmechanic-embed="' + formId + '"]').hide();
      }
    }
    if (showForm) {
      if (formType === 'embedded-show') {
        PopMechanic.$('[data-popmechanic-embed="' + formId + '"]').show();
      }
    }
};

if (PopMechanic.mbSegmentsCode[externalId] && !PopMechanic.mbSegmentsRequestRunning[externalId]) {
    if (!PopMechanic.mbSegmentsHandlersForms[externalId][formId]) {
        PopMechanic.mbSegmentsHandlersForms[externalId][formId] = true;
        successHandler();
    }
} else if (!PopMechanic.mbSegmentsHandlersForms[externalId][formId]) {
    PopMechanic.mbSegmentsHandlers[externalId].push(successHandler);
}

if (!PopMechanic.mbSegmentsCode[externalId]) {
    PopMechanic.mbSegmentsMembership[externalId] = false;
    PopMechanic.mbSegmentsRequestRunning[externalId] = 1;
    PopMechanic.mbSegmentsCode[externalId] = 1;
    
    mindbox("sync", {
      operation: operationToRun,
      data: {
        segmentations: [
          {
            ids: {
              externalId: externalId
            }
          }
        ]
      },
      onSuccess: function(response) {
        PopMechanic.mbSegmentsRequestRunning[externalId] = 0;
        PopMechanic.mbResponse = response;
        PopMechanic.mbSegmentsMembership[externalId] = !!(response.customerSegmentations && response.customerSegmentations[0].segment);
        localStorage.setItem(segmentKey, +PopMechanic.mbSegmentsMembership[externalId]);

        PopMechanic.mbSegmentsHandlers[externalId].forEach(function(handler) {
            handler();
        })
      },
      onError: function() {
        PopMechanic.mbSegmentsRequestRunning[externalId] = 0;
        PopMechanic.mbSegmentsMembership[externalId] = inSegmentByDefault;
        
        PopMechanic.mbSegmentsHandlers[externalId].forEach(function(handler) {
            handler();
        });
      }
    });
}

if (formType === 'embedded-show' && PopMechanic.mbSegmentsRequestRunning[externalId]) {
  PopMechanic.$('[data-popmechanic-embed="' + formId + '"]').hide();
}

if (!PopMechanic.customs.mindboxDeviceUUID) {
    return inSegmentByDefault === showIfInSegment;
}

return (PopMechanic.mbSegmentsRequestRunning[externalId] === 1 && PopMechanic.mbTargetingRun[formId] === 1) || (PopMechanic.mbSegmentsMembership[externalId] === showIfInSegment);
ВАЖНО!!!

При использовании таргетинга по сегменту рекомендуем использовать в условиях показа ставить не менее 5 секунд на странице, чтобы мы успевали точно определить сегмент.
Для некоторых сайтов это значение даже может быть больше, рекомендуем протестировать, рекомендуем провести тест.
Условия показа. Можно ставить больше.
Не рекомендуем ставить меньше при показе по сегментам Mindbox.
КАК ПРОТЕСТИРОВАТЬ ПОКАЗ ПО СЕГМЕНТАМ?

Допустим, вы настроили сегмент, но не уверены:
- что нигде не ошиблись
- что форма будет показа именно этим людям
- сколько будет показов такой формы

Шаги для теста показа формы по сегментам:

1) Создайте форму, настройте нужный сегмент по инструкции выше

2) Настройте передачу данных о ПОКАЗЕ формы в Mindbox через JS-интеграцию
У вас будут "помечены" в mindbox те клиенты, которые увидели форму.
Вы сможете создать сегмент тех, кто форму видел.

3) Уберите в настройках дизайна саму форму в рамках теста
Мы будем показывать "прозрачный" поп-ап и передавать данные об этого показе, чтобы убедится в корректности настройки.
Для этого или создайте копию формы или в текущей форме откройте редактор HTML и внесите такие строки:

Вставляем этот кусок в CSS
В класс #popmechanic-form {
   display: none!important;
    visibility: hidden!important;
    opacity: 0!important;
    height: 0!important;
    width: 0!important;
    pointer-events: none!important;
После этого запустите форму и посмотрите, кому приходят действия о просмотре
Вам была полезна эта статья?