Push-уведомления — это мощный инструмент для повышения вовлечённости пользователей вашего сайта на WordPress и возвращения посетителей. Особенно актуально, если вы ведёте новостной блог, магазин или образовательный портал. В этой статье подробно разберём, как установить и грамотно настроить push-уведомления с помощью популярных плагинов и собственных решений.
Что такое push-уведомления и зачем они нужны в WordPress
Push-уведомления — это сообщения, которые браузер отправляет пользователю, даже если тот не находится на сайте. Они появляются в виде всплывающих окон или баннеров на рабочем столе или мобильном устройстве. Это позволяет мгновенно донести информацию о новостях, акциях или обновлениях контента.
Для WordPress это значит возможность увеличить количество возвращающихся посетителей и повысить конверсию. Вместо того чтобы ждать, пока пользователь сам зайдёт на сайт, вы уведомляете его напрямую.
Реализация push-уведомлений требует интеграции с сервисами, которые управляют подписками и отправкой сообщений. В WordPress это можно сделать через плагины или самостоятельно настроить через API браузеров.
Выбор плагина для push-уведомлений в WordPress
Рассмотрим несколько популярных плагинов, которые позволяют быстро и без сложного программирования добавить push-уведомления на сайт:
- OneSignal — один из самых популярных и бесплатных сервисов с удобной интеграцией и поддержкой мобильных и десктопных уведомлений.
- PushEngage — платный сервис с расширенными возможностями сегментации и аналитики, также имеет бесплатный тариф с ограничениями.
- Webpushr — поддерживает все современные браузеры, позволяет отправлять уведомления по расписанию и настраивать таргетинг.
Для примера возьмём OneSignal — он отлично подходит для большинства проектов и имеет понятный интерфейс.
Как установить и настроить push-уведомления с помощью OneSignal
Шаг 1. Регистрация и создание приложения в OneSignal
Перейдите на сайт OneSignal и зарегистрируйтесь. Создайте новое приложение, укажите название и выберите платформы (Web Push).
Шаг 2. Установка плагина OneSignal в WordPress
В админке WordPress перейдите в раздел «Плагины» → «Добавить новый», найдите OneSignal Push Notifications и установите его. Активируйте плагин.
Шаг 3. Настройка плагина
В настройках плагина укажите App ID и API Key, которые вы получили в кабинете OneSignal. Настройте внешний вид уведомлений, время показа и прочие параметры.
Реализация кастомных push-уведомлений через Service Worker и JavaScript
Если вам нужна более гибкая настройка, можно реализовать push-уведомления самостоятельно. Для этого потребуется создать Service Worker и настроить взаимодействие с Push API.
Пример простого Service Worker (wptavern-sw.js)
self.addEventListener('push', function(event) {
var data = {};
if (event.data) {
data = event.data.json();
}
var title = data.title || 'Новое уведомление';
var options = {
body: data.body || 'Вы получили новое уведомление',
icon: data.icon || '/wp-content/uploads/icon.png'
};
event.waitUntil(self.registration.showNotification(title, options));
});Этот код позволяет браузеру отображать уведомления, когда приходит push-сообщение. Чтобы зарегистрировать Service Worker на стороне клиента, добавьте в тему WordPress следующий JavaScript:
function wptavern_registerServiceWorker() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/wptavern-sw.js')
.then(function(reg) {
console.log('Service Worker зарегистрирован', reg);
})
.catch(function(err) {
console.error('Ошибка регистрации Service Worker:', err);
});
}
}
wptavern_registerServiceWorker();Подписка пользователя на push-уведомления
Далее необходимо запросить разрешение и подписать пользователя на push-сообщения. Пример кода:
function wptavern_subscribeUser() {
return navigator.serviceWorker.ready
.then(function(registration) {
return registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: '<ВАШ_PUBLIC_VAPID_KEY>'
});
})
.then(function(subscription) {
console.log('Подписка получена:', JSON.stringify(subscription));
// Отправьте подписку на сервер для дальнейшей отправки уведомлений
});
}Для генерации ключей VAPID можно использовать готовые библиотеки, например web-push для Node.js.
Отправка push-уведомлений из WordPress с помощью PHP
Чтобы отправить уведомления, нужно интегрировать серверную часть с push-сервисом. Пример отправки с использованием библиотеки web-push-php:
require 'vendor/autoload.php';
use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;
function wptavern_sendPushNotification($subscription, $payload) {
$auth = [
'VAPID' => [
'subject' => 'mailto:admin@wptavern.ru',
'publicKey' => '<ВАШ_PUBLIC_VAPID_KEY>',
'privateKey' => '<ВАШ_PRIVATE_VAPID_KEY>',
],
];
$webPush = new WebPush($auth);
$sub = Subscription::create(json_decode($subscription, true));
$webPush->queueNotification($sub, $payload);
foreach ($webPush->flush() as $report) {
if ($report->isSuccess()) {
error_log('Уведомление успешно отправлено');
} else {
error_log('Ошибка отправки: ' . $report->getReason());
}
}
}Этот пример демонстрирует, как отправлять уведомления подписчикам напрямую из WordPress, например, при публикации новой записи или запуске акции.
Особенности и рекомендации по работе с push-уведомлениями
Чтобы push-уведомления приносили пользу, а не раздражали пользователей, придерживайтесь нескольких правил:
- Запрашивайте разрешение на отправку уведомлений не сразу при заходе на сайт, а после того, как пользователь ознакомится с содержимым и проявит интерес.
- Настраивайте частоту отправки и сегментируйте аудиторию для релевантных сообщений.
- Предоставляйте пользователям возможность легко отписаться от уведомлений.
- Используйте информативные заголовки и тексты, чтобы повысить кликабельность.
Если вы хотите автоматизировать работу с push-уведомлениями и получать подробную аналитику, обратите внимание на сервис My Popup от WPSHOP, который поддерживает отправку уведомлений и гибкие настройки показа.
Заключение
Push-уведомления — отличный способ повысить вовлечённость и вернуть пользователей на сайт. Для WordPress существует множество готовых решений от плагинов до собственных реализаций на JavaScript и PHP. Выбор зависит от ваших задач и ресурсов. Начните с простого плагина, а затем при необходимости расширяйте функционал кастомным кодом.