ПРИМЕРЫ JS-КОДА ДЛЯ ТАРГЕТИНГА ФОРМ В POPMECHANIC

В Popmechanic помимо готовых вариантов показа формы можно добавлять специальное - JS-сужение.
Это может использоваться, когда вам нужно показать или скрыть показ формы определенным пользователям или на определенных страницах.
Ниже мы подготовили самые популярные примеры. Если вы не нашли подходящего варианта - напишите нам.

Где находится JS-сужение?
Выберите любую форму, зайдите в настройки таргетинга и внизу экрана будет пункт JS-сужение. Используйте аккуратно и только в том случае, когда стандартный таргетинг не решает задачу.
Обратите внимание! JS-сужение не работает на бесплатных тарифах
Куда вставлять код для JS-сужения
Примеры кода для разных задач
1
ТАРГЕТИНГ ПО UTM-МЕТКАМ

Вам нужно показать определенную форму только тем, у кого в начале сессии было значение в метках.
Например, исключить показ форм при переходе с рассылок или наоборот показывать формы с промокодами при переходе с определенного типа рассылок (utm-campaign=promo)
Пример 1. Исключить показ формы при utm_medium=email:
return false - исключить показ, return true - включить
if (location.href.indexOf('utm_medium=email') > -1 || localStorage.getItem('popmechanic-source-email')) {
	localStorage.setItem('popmechanic-source-email', 1);
	return false;
}
Пример 2. Показывать форму только при utm_medium=email:
return false - исключить показ, return true - включить
if (location.href.indexOf('utm_medium=email') > -1 || localStorage.getItem('popmechanic-source-email')) {
	localStorage.setItem('popmechanic-source-email', 1);
	return false;
}
2
ТАРГЕТИНГ ПО ОПЕРАЦИОННЫМ СИСТЕМАМ

Вам нужно показать определенную форму только тем, у кого OS = Android
Пример 2. Показывать форму только при utm_medium=email:
return false - исключить показ, return true - включить
if (location.href.indexOf('utm_medium=email') > -1 || localStorage.getItem('popmechanic-source-email')) {
	localStorage.setItem('popmechanic-source-email', 1);
	return false;
}
3
ТАРГЕТИНГ ПО СЕГМЕНТУ В MINDBOX

Вам нужно показать или исключить показ формы тем, кого Mindbox определяет и относит к определенному сегменту.
Например:
- показывать разные формы с акциями мужчинам и женщинам;
- выводить показ персональных промокодов тем, кто давно не покупал;
- собирать отзывы после покупки на сайте;
Общая схема для показа по сегментам Mindbox:
// операция MB для проверки сегмента
var operationToRun = 'CheckSegment';
// внешний ид сегмента MB
var externalId = '9cf902ec-b34a-4787-bac5-b23d5876f2b5';
// true - показывать при попадании в сегмент, false - наоборот
var showIfInSegment = true;
// true - запоминать сегмент при перезагрузке страницы, false - нет
var memoSegment = false;
var segmentKey = 'popmechanic-mindbox.in-segment.' + externalId;

var operationToRun = 'Название операции';
var externalId = 'ID сегмента';
// true - показывать при попадании в сегмент, false - наоборот
var showIfInSegment = false;
// true - запоминать сегмент при перезагрузке страницы, false - нет
var memoSegment = false;

// 'popup' - просто попап
// 'button' - управлять кнопкой
// 'embedded-show' - встроенная форма, до загрузки сегмента - скрывать
// 'embedded-hide' - встроенная форма, до загрузки сегмента - показывать
var formType = 'embedded-show'; // 'embedded-hide'; // 'popup';
var formId = 'ID формы';

var segmentKey = 'popmechanic-mindbox.in-segment.' + externalId;


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] = true;
    PopMechanic.mbSegmentsCode[externalId] = 1;
    
    mindbox("sync", {
      operation: operationToRun,
      data: {
        segmentations: [
          {
            ids: {
              externalId: externalId
            }
          }
        ]
      },
      onSuccess: function(response) {
        PopMechanic.mbSegmentsRequestRunning[externalId] = false;
        PopMechanic.mbSegmentsMembership[externalId] = !!(response.customerSegmentations && response.customerSegmentations[0].segment);
        localStorage.setItem(segmentKey, +PopMechanic.mbSegmentsMembership[externalId]);

        PopMechanic.mbSegmentsHandlers[externalId].forEach(function(handler) {
            handler();
        })
      }
    });
}

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

return PopMechanic.mbSegmentsRequestRunning[externalId] || (PopMechanic.mbSegmentsMembership[externalId] === showIfInSegment);
Пример 1. Показывать форму только сегменту с id