Как создать popup на основании User Agent в WordPress

В некоторых случаях полезно показывать всплывающие окна (popup) только определённым пользователям, ориентируясь на их устройство или браузер. Например, можно показывать специальные предложения только пользователям мобильных устройств, либо предупреждения, если браузер устарел. В этой статье разберём, как создать popup в WordPress, который появляется на основании User Agent пользователя.

Что такое User Agent и зачем его использовать для popup

User Agent — это строка, которую браузер отправляет серверу, чтобы идентифицировать себя. В ней содержится информация о типе устройства, браузере, версии и ОС. Используя User Agent, можно определить, с какого устройства зашёл пользователь, и показывать контент, соответствующий его окружению.

Пример использования User Agent для popup:

• Показать предложение для пользователей iPhone или Android;
• Отобразить предупреждение для устаревших браузеров;
• Показывать popup только для десктопных пользователей с определённым браузером.

Это повышает релевантность и качество взаимодействия с пользователями.

Как реализовать определение User Agent в WordPress

Для начала мы можем получить User Agent клиента с помощью PHP или JavaScript. PHP позволяет получить строку $_SERVER['HTTP_USER_AGENT'], но в случае с popup удобнее использовать JS для динамического показа без перезагрузки.

Пример функции на JS для проверки User Agent:

function wppopup_checkUserAgent() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('iphone') > -1 || ua.indexOf('android') > -1) {
    return 'mobile';
  } else if (ua.indexOf('chrome') > -1) {
    return 'chrome';
  } else {
    return 'other';
  }
}

Эту функцию можно использовать для условий показа popup.

Создание popup с условием на User Agent с помощью плагина My Popup

Плагин My Popup позволяет легко создавать всплывающие окна с условиями показа. Для реализации показа по User Agent можно добавить кастомный JavaScript, который будет определять устройство и запускать popup.

Пример настройки:

1. Создайте новый popup в My Popup и отключите автоматический показ по времени.
2. В настройках добавьте пользовательский JS:

document.addEventListener('DOMContentLoaded', function() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('iphone') > -1 || ua.indexOf('android') > -1) {
    MyPopup.showPopup('popup-id'); // замените 'popup-id' на ID вашего popup
  }
});

Так popup откроется только на мобильных устройствах.

Реализация кастомного popup на User Agent без плагинов

Если не хочется использовать плагины, можно реализовать popup с нуля. Вот пример простого popup, который показывается только для Chrome:

<div id="wppopup" style="display:none; position:fixed; top:20%; left:50%; transform:translateX(-50%); background:#fff; padding:20px; box-shadow:0 0 10px rgba(0,0,0,0.3); z-index:9999;">
  <button id="wppopup-close" style="float:right;">×</button>
  <h2>Специальное предложение для Chrome</h2>
  <p>Вы используете Chrome, и у нас есть для вас эксклюзив!</p>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('chrome') > -1 && ua.indexOf('edg') === -1) {
    var popup = document.getElementById('wppopup');
    popup.style.display = 'block';
    document.getElementById('wppopup-close').addEventListener('click', function() {
      popup.style.display = 'none';
      document.cookie = 'wppopup_chrome_shown=1; path=/; max-age=' + 60*60*24*7; // на неделю
    });
  }
});
</script>

Этот код проверяет User Agent на наличие слова 'chrome' (исключая Edge, в User Agent которого тоже встречается chrome) и показывает popup. Закрытие сохраняет cookie, чтобы не показывать popup повторно.

Как улучшить и расширить показ popup на User Agent

Для более точных условий можно использовать библиотеку ua-parser-js, которая разбирает User Agent на части: устройство, браузер, ОС.

Пример с подключением библиотеки и условием:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ua-parser-js/1.0.2/ua-parser.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var parser = new UAParser();
  var result = parser.getResult();
  if(result.device.type === 'mobile' && result.browser.name === 'Safari') {
    // показать popup для мобильного Safari
    MyPopup.showPopup('popup-id');
  }
});
</script>

Так можно делать сложные условия, например показывать разные popup для iOS и Android, разных браузеров и т.д.

Заключение по теме popup на User Agent

Использование User Agent для условий показа popup в WordPress позволяет сделать взаимодействие с пользователями более персонализированным и релевантным. Вы можете легко реализовать это как с помощью плагинов типа My Popup, так и собственными скриптами. Важно не забывать про удобство пользователей и не злоупотреблять показом окон.

Для дополнительной оптимизации и контроля можно использовать cookie или sessionStorage, чтобы не показывать popup повторно, а также комбинировать User Agent с другими условиями показа.