Cбор подписок на push-уведомления

Суть форм подписки на push-уведомления
Для предложения подписаться на push-уведомления с помощью Popmechanic чаще всего используется такая схема:
Шаг 1: Посетителю сайта при определенных условиях показывается форма с предложением Подписаться, чтобы получить бонус, скидку, промокод. Такая форма может быть любого формата (посредине экрана, сбоку) и с любым внешним видом.
Шаг 2: Если посетитель заинтересован, то при нажатии на кнопку форма вызывает стандартное браузерное окно подписки на web-push уведомления. Где посетителю для подписки нужно нажать "Разрешить":

При нажатии на Основную кнопку открывается стандартное окно подписки на пуши. При нажатии на кнопку "Нет, спасибо" форма закрывается. При этом на 2 шаге дополнительно может показываться форма-подсказка с тем, где написано, что нужно нажать и где в стандартном браузерном окне подписки


Как настроить подписку на push в связке с Mindbox?
1) Выбрать шаблон из каталога и адаптировать его внешний вид под сайт
2) Настроить для него JS-интеграцию для вызова стандартного окна подписки в момент клика по кнопке формы.
3) В Mindbox настроить сегмент пользователей с активным push-токеном, чтобы исключить им показ формы подписки
4) В Popmechanic добавить JS-сужение в настройки таргетинга, чтобы исключить показ:
- в тех браузерах, которые технически не поддерживают подписки на пуши
- по сегменту Mindbox тех, кто уже подписался
5) Запустить форму


1) Выбрать шаблон из каталога и адаптировать его внешний вид под сайт
Вы можете использовать любые шаблоны, где есть клик по кнопке.
Или же специализированные, созданные для подписки на пуши.
Используйте при выборе шаблона фильтр сбоку для быстрого поиска подходящего варианта.
Фильтр в каталоге Элементы формы - для push-подписки


2) Настроить для него JS-интеграцию для вызова стандартного окна подписки в момент клика по кнопке формы
Чтобы всплывающая форма Popmechanic при клике на кнопку вызывала браузерное окно подписки вам необходимо в этой форме настроить интеграцию.
Зайдите для данной созданной формы в раздел Интеграции - Разное - JS-код:
Куда вставлять код для вызова подписки на пуши
Скопируйте в 2 поля в настройки интеграции код ниже.
Замените в #popmechanic-form-11111 цифру на ваше id формы, которое можно посмотреть в url созданной формы
Например, если url формы https://app.popmechanic.io/forms/13317/integrations/5485/, то ID формы = 13317 и его нужно поставить в коде вместо 11111
var $form = PopMechanic.$("#popmechanic-form-11111");
$form.on("click", ".popmechanic-submit", function() {
   $form.remove();
   setTimeout(function() {
       mindbox(
         "webpush.subscribe", {
           getSubscriptionOperation: "GetWebPushSubscription",
           subscribeOperation: "SubscribeToWebpush",
           onGranted: function() {
               form.close();
           },
           onDenied: function() {
               form.close();
           }
         }
       );
   }, 500);
});


3) В Mindbox настроить сегмент пользователей с активным push-токеном, чтобы исключить им показ формы подписки
Самый простой способ - сегмент Подписка - Подписан - В канале WebPush.
Сохраните сегмент.
После создания такого сегмента скопируйте ID сегментации (не сегмента) для настроек таргетинга, которые исключают показ пользователям этого сегмента.
Детальнее о показе формы по сегментам


4) В Popmechanic добавить JS-сужение в настройки таргетинга, чтобы исключить показ:
- в тех браузерах, которые технически не поддерживают подписки на пуши
- по сегменту Mindbox тех, кто уже подписался

Для исключения показа в браузерах, где не поддерживаются пуши добавьте код ниже в Таргетинг - JS-сужение:

if (!window.PushManager) 
return false;
Ниже пример кода для js-сужения, который и проверяет возможность подписки на пуши и сегмент mindbox.
Показ по сегменту настраивается инструкции в этой статье
if (!window.PushManager) return false;
var operationToRun = 'CheckSegment';
var externalId = '23f02e32-abfa-403b-9ae5-777f71fd66ac';
var showIfInSegment = false;
var memoSegment = false;
var formType = 'popup'; 
var formId = '13317';
var segmentKey = 'popmechanic-mindbox.in-segment.' + externalId;

var inSegmentByDefault = true;

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) Протестируйте и запустите форму
По тестовой ссылке уже должен работать вызов стандартной подписки на пуши, проверьте это.


Вам была полезна эта статья?