Как добавить кнопку подписки на push-уведомления во всплывающие окна

Ищете способ добавить кнопку подписки на push-уведомления в ваши всплывающие окна?

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

По умолчанию push-уведомления также поставляются с модальными окнами. Но вы можете получить гораздо больше возможностей настройки с помощью конструктора всплывающих окон.

Итак, мы собираемся использовать конструктор всплывающих окон для создания всплывающего окна и добавления ссылки для подписки, чтобы собирать подписчиков push-уведомлений.

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

Давайте начнем.

Как создать всплывающее окно для сбора подписчиков push-уведомлений

Давайте начнем с создания всплывающего окна. Мы рекомендуем использовать OptinMonster для создания всех ваших всплывающих окон.

OptinMonster — это лучший набор инструментов для конверсии в мире, и мы сами им пользуемся. OptinMonster очень просто создавать мощные всплывающие окна, которые конвертируют. И вам никогда не придется использовать какой-либо код.

OptinMonster имеет практически все, что вам нужно для начала, роста и масштабирования вашего процесса генерации лидов.

Вот краткий обзор того, что вы можете делать с помощью этого набора инструментов:

• Собирайте подписчиков push-уведомлений с помощью всплывающего окна
• Превращайте посетителей, пришедших впервые, в постоянных читателей
• Снижение брошенных корзин и брошенных просмотров
• Создавайте предложения с ограниченным сроком действия с реальными таймерами обратного отсчета
• Увеличение загрузок электронных книг и продаж цифровых продуктов
• Создайте воронку для живых мероприятий
• Улучшите вовлеченность на сайте с помощью игровых всплывающих окон
• Перенаправляйте трафик на страницы и в сообщения, которые приносят вам доход

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

Шаг № 1: Создайте кампанию всплывающих окон для сбора подписчиков

Перейдите на панель управления OptinMonster и нажмите кнопку Создать:

Выберите опцию Шаблон, чтобы начать создание формы подписки с использованием предварительно разработанного шаблона:

Для этого руководства мы создадим всплывающее окно для Черной пятницы. Выберите тип кампании Всплывающее окно и найдите шаблон кампании

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

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

Кроме того, в зависимости от вашего плана, вы также можете использовать OptinMonster на нескольких сайтах. Поэтому выберите веб-сайт, на котором вы хотите отображать свою кампанию. Нажмите Начать создание после завершения.

Шаг № 2: Отредактируйте всплывающее окно, чтобы настроить внешний вид

С OptinMonster вы получите визуальный конструктор всплывающих окон с перетаскиванием. Как только вы закончите называть свою кампанию, вы сможете редактировать даже мельчайшие детали вашего всплывающего окна.

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

Вы можете редактировать все, что угодно, в своем всплывающем окне, включая изображения. Когда вы будете довольны внешним видом формы подписки, вы можете перейти к более расширенным настройкам.

Эта конкретная тема настроена таким образом, что всплывающее окно состоит из трех частей. У вас есть начальный экран «Да/Нет», где посетитель выбирает купон на Черную пятницу. Это то, что вы видите на изображении выше. По умолчанию это купон на бесплатную доставку. Но вы можете добавить любое предложение или купон, который захотите.

Когда ваши посетители нажимают кнопку «Да» во всплывающем окне, они перенаправляются на экран «Подписка». Здесь вы собираете подписчиков. По умолчанию форма подписки собирает адреса электронной почты. Мы заменим ее кнопкой для сбора подписчиков push-уведомлений.

Наконец, у вас есть экран «Успех», который появляется, когда ваш посетитель подписывается.

Давайте сделаем это шаг за шагом.

Шаг № 3: Удалите форму подписки по электронной почте из всплывающего окна

Вы можете редактировать любой модуль во всплывающем окне по своему усмотрению. Перейдите на экран «Подписка» в нижней панели:

Здесь вы можете навести курсор на модуль подписки по электронной почте и просто нажать кнопку удаления, чтобы удалить его:

Теперь, когда форма подписки по электронной почте удалена, мы добавим в нее кнопку для сбора подписчиков push-уведомлений.

Шаг № 4: Добавьте кнопку «Нажми, чтобы подписаться» в свое всплывающее окно

Сначала добавьте блок HTML в свое всплывающее окно из боковой панели в OptinMonster.

Здесь мы добавим код для сбора подписчиков push-уведомлений. Сначала вставьте следующий код, чтобы создать кликабельную кнопку:

<button class = "btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications Instead</button>

Вставьте код туда, где указано, что вы можете добавить HTML. На данный момент в вашем всплывающем окне должна появиться новая кнопка:

Далее прокрутите вниз и вставьте следующий CSS в контейнер CSS:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

На данный момент в вашем всплывающем окне должна появиться красивая кнопка:

Шаг № 5: Получите код подписки от PushEngage

Push-уведомления помогают автоматически увеличивать трафик вашего веб-сайта и вовлеченность. Веб-push-уведомления — это эффективный способ вернуть пользователей, которые могли покинуть сеанс или уйти с веб-сайта. Это помогает вернуть пользователей, уведомляя их о новом контенте, предложениях или событиях.

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

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

Самое приятное то, что вы можете собирать подписчиков push-уведомлений из вашего всплывающего окна для подписки по электронной почте. Так что, если ваши посетители сайта не хотят указывать свой адрес электронной почты, вы все равно можете заставить их подписаться с помощью веб-push-уведомлений.

Мы рекомендуем использовать PushEngage для отправки веб-push-уведомлений.

Вот краткий обзор того, что вы получаете с PushEngage:

• Высококонверсионные автоматизированные кампании
• Множественное таргетирование и планирование кампаний
• Отслеживание целей и расширенная аналитика
• Умное A/B-тестирование
• Выделенный менеджер по успеху

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

А если у вас интернет-магазин, PushEngage также поможет вам увеличить продажи, создавая автоматические push-уведомления для электронной коммерции.

Вы увидите, что PushEngage — это, без сомнения, лучший выбор, если вы хотите увеличить трафик, вовлеченность и продажи для своего бизнеса. И если у вас ограничен бюджет, вы всегда можете немного проявить креативность с вашими push-уведомлениями.

Перейдите на главную страницу PushEngage и нажмите кнопку Начать:

Затем выберите бесплатный план, чтобы попробовать PushEngage, или выберите платный план, если вы серьезно относитесь к развитию своего бизнеса. Платные планы включают больше опций для кампаний и возможность создавать еще большие списки подписчиков.

В вашей панели управления PushEngage перейдите в раздел Настройки сайта » Детали сайта и нажмите кнопку Нажмите здесь для инструкций по настройке. В разделе Любой сайт вы получите код установки:

ВНИМАНИЕ: Вам нужно скопировать код, который вы получите из вашей панели управления. Код уникален для каждого пользователя PushEngage. Вы не сможете скопировать код из изображения и собирать подписчиков push-уведомлений.

Когда у вас будет код в вашей панели управления PushEngage, возьмите второй скрипт и добавьте к нему дополнительный код. Ваш окончательный код должен выглядеть примерно так:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>

Шаг № 6: Добавьте код подписки в HTML-блок вашего всплывающего окна

Добавьте этот код в блок HTML в OptinMonster, и все готово!

Когда закончите, просто нажмите кнопки Сохранить и Опубликовать.

Шаг № 7: Добавьте отслеживание кликов и закрытие кампании

Последнее, что нам нужно сделать, — это добавить код отслеживания кликов, чтобы считать каждого подписчика конверсией в OptinMonster. Кроме того, когда посетитель подписывается, вы захотите, чтобы он либо перешел на экран Успех, либо вышел из кампании.

Внутри фрагмента Javascript добавьте следующие строки кода:

Чтобы включить отслеживание конверсий, добавьте этот код:

om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster

Чтобы переместить подписчика на экран «Успех», добавьте этот код:

om{{id}}.changeView('success'); // Show Success view on submission

Чтобы закрыть кампанию после подписки, добавьте этот код:

om{{id}}.startClose();// Close campaign on submission

Вы также можете добавить несколько фрагментов кода. Мы рекомендуем перемещать подписчиков на экран «Успех» и отслеживать конверсию. Итак, окончательный фрагмент кода, который мы рекомендуем использовать (включая кнопку и весь Javascript), выглядит так:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.startClose();// Close campaign on submission
}]);
}
</script>
<div>
	<button class="btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Или вы можете использовать этот код вместо него, чтобы закрыть кампанию напрямую:

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.changeView('success'); // Show Success view on submission
}]);
}
</script>
<div>
	<button onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Просто скопируйте и вставьте код в HTML-блок вашего всплывающего окна OptinMonster.

И для любого из фрагментов кода не забудьте добавить следующий CSS в раздел CSS вашего HTML-блока:

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

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

И вот так вы собираете push-подписчиков из своего всплывающего окна. Push-уведомления поставляются со своими собственными модальными окнами. Но их довольно сложно настроить. Поэтому вы можете создавать красивые всплывающие окна с помощью OptinMonster, а затем использовать их в качестве всплывающих окон для push-уведомлений.

Шаг № 8: Опубликуйте ваше всплывающее окно с намерением выхода в WordPress

Когда вы создаете новую кампанию, по умолчанию она приостановлена.

Перейдите на вкладку Опубликовать в верхнем меню, чтобы увидеть Параметры публикации. Затем установите статус Опубликовать и выберите платформу веб-сайта:

Если у вас сайт на WordPress, плагин OptinMonster автоматически выполнит остальную настройку. То же самое касается Shopify и BigCommerce. Для любого другого сайта нажмите Любой сайт и вставьте код вставки в раздел head вашего веб-сайта:

И вы закончили!

Бонусный шаг: Отключите быструю установку в PushEngage

Быстрая установка — это метод добавления подписчиков push-уведомлений на веб-сайт без SSL-сертификата. В наши дни почти все сайты имеют SSL-сертификат, но на всякий случай, если у вас его нет, мы настоятельно рекомендуем установить его как можно скорее. Ознакомьтесь с этой статьей о том, как установить SSL-сертификат в WordPress.

Итак, прежде чем начать собирать подписчиков на вашем сайте, мы рекомендуем отключить «Быструю установку». Перейдите в панель управления PushEngage и выберите Дизайн » Всплывающие окна. Затем отключите Быструю установку:

А теперь вы готовы продвигать свой веб-сайт и собирать больше подписчиков к Черной пятнице!

Что делать после начала сбора подписчиков Push

На этом всё, друзья!

Сообщите нам, помогла ли эта статья. Создание всплывающих окон на вашем сайте может помочь вам превратить трафик в подписчиков Push и реальных бизнес-лидов. И мы настоятельно рекомендуем вам немедленно начать создавать всплывающие окна с намерением ухода.

А если вы ищете доступный способ увеличить трафик, мы рекомендуем использовать push-уведомления. Push-уведомления могут помочь вам привлечь больше повторных посещений и повысить вовлеченность на сайте. Вы также можете создавать автоматизированные кампании push-уведомлений, которые генерируют продажи.

Не убедились? Ознакомьтесь с этими ресурсами:

• 7 умных стратегий для повышения вовлеченности клиентов
• Эффективны ли push-уведомления? 7 статистических данных + 3 совета экспертов
• Как настроить push-уведомления о брошенной корзине (простое руководство)
• Как добавить плагин веб-уведомлений WordPress на ваш сайт

Мы рекомендуем использовать PushEngage для создания ваших кампаний push-уведомлений. PushEngage — это программное обеспечение для push-уведомлений №1 в мире. Так что, если вы еще этого не сделали, начните использовать PushEngage сегодня!