Вы хотите добавить уведомления о вкладках браузера для вашего сайта?
Добавление уведомлений на вкладках браузера может стать отличным способом привлечь внимание пользователя, снизить процент оставленных корзин, увеличить продажи и доход.
В этой статье мы покажем вам, как добавить уведомления о вкладках браузера в WordPress.
- Что такое уведомление вкладки браузера?
- Установка WPCode для добавления уведомлений на вкладках браузера
- Тип 1. Показ новых обновлений в виде уведомления на вкладке браузера
- Тип 2. Изменение фавиконов в качестве уведомления на вкладке браузера
- Тип 3. Изменение названия сайта в качестве уведомления на вкладке браузера
Что такое уведомление вкладки браузера?
Уведомление о вкладке браузера — это когда вы меняете что-то на вкладке вашего сайта, когда пользователь сосредоточен на другом сайте в своем браузере.
Добавив функцию уведомления о вкладках браузера на свой сайт WordPress, вы сможете привлечь внимание пользователя в тот момент, когда он откроет другую вкладку, чтобы покинуть вашу страницу.
Например, вы можете изменить фавикон вашего сайта, анимировать его, написать пользовательское сообщение или просто замигать на вкладке.
Если у вас есть интернет-магазин, уведомления на вкладках браузера могут вам очень помочь. Эти уведомления помогут вернуть отвлеченных клиентов, снизить количество оставленных корзин и повысить вовлеченность покупателей.
Используя эту функцию, вы можете предупредить своих клиентов о том, что они бросили корзину, или даже предложить скидку, если они вернут свое внимание на ваш сайт.
Вот пример уведомления на вкладке браузера.
С учетом сказанного, мы покажем вам, как добавить три различных типа уведомлений браузера в WordPress.
- Установите WPCode для добавления уведомлений о вкладках браузера
- Тип 1. Показ новых обновлений в качестве уведомления на вкладке браузера
- Тип 2. Изменение фавиконов как уведомление о вкладке браузера
- Тип 3. Изменение названия сайта в качестве уведомления на вкладке браузера
Установка WPCode для добавления уведомлений на вкладках браузера
Вы можете легко добавить уведомления о вкладках браузера на свой сайт, добавив пользовательский код в WordPress. Обычно для этого необходимо отредактировать функции вашей темы.php файл, но это может сломать ваш сайт даже при небольшой ошибке.
Вот почему мы рекомендуем использовать WPCode, самый безопасный и популярный плагин для работы с фрагментами кода, который используют более 1 миллиона веб-сайтов.
Сначала вам нужно установить и активировать бесплатный плагин WPCode. Для получения более подробной информации вы можете ознакомиться с нашим пошаговым руководством по установке плагина WordPress.
Как только вы активировали плагин, просто перейдите в раздел Сниппеты кода » Все сниппеты в вашей панели администратора WordPress.
Просто нажмите на кнопку «Добавить новый», которая приведет вас на страницу «Добавить сниппет».
Теперь наведите курсор на опцию ‘Add Your Custom Code (New Snippet)’ и нажмите на кнопку ‘Use Snippet’ под ней.
После этого плагин переведет вас на страницу ‘Create Custom Snippet’.
Независимо от того, какой тип уведомления о вкладке браузера вы используете, вы введете код ниже на этой странице.
Тип 1. Показ новых обновлений в виде уведомления на вкладке браузера
Если вы используете приведенный ниже код, ваши пользователи будут получать уведомления обо всех новых обновлениях, которые публикуются на вашем сайте. На вкладке появится число, указывающее на количество новых элементов, которых не хватает.
Например, если у вас есть интернет-магазин, и вы только что добавили несколько новых товаров в инвентарь, пользователь увидит уведомление на вкладке браузера в виде числа, которое указывает, сколько новых товаров было добавлено.
Вы можете видеть это на изображении ниже:
Как только вы окажетесь на странице «Создать пользовательский сниппет», вам нужно будет назвать ваш сниппет. Вы можете выбрать что угодно, что поможет вам идентифицировать код. Это только для вас.
Затем выберите «Тип кода» из выпадающего меню справа. Это код JavaScript, поэтому просто нажмите на опцию ‘JavaScript Snippet’.
Затем, все, что вам нужно сделать, это скопировать и вставить следующий фрагмент кода в область «Просмотр кода».
let count = 0; const title = document.title; function changeTitle() < count++; var newTitle = '(' + count + ') ' + title; document.title = newTitle; >function newUpdate() < const update = setInterval(changeTitle, 2000); >документ.addEventListener('DOMContentLoaded', newUpdate );
После вставки кода прокрутите вниз до раздела «Вставка». Вы найдете две опции: ‘Auto Insert’ и ‘Shortcode.’
Просто выберите опцию ‘Auto Insert’, и ваш код будет автоматически вставлен и выполнен на вашем сайте.
Вы можете использовать метод ‘Shortcode’, если хотите показывать новые обновления только на определенных страницах, где вы добавили шорткод.
Выбрав нужный вариант, вернитесь в начало страницы.
Нажмите на переключатель с «Неактивного» на «Активный» в правом верхнем углу, а затем просто нажмите кнопку «Сохранить сниппет».
После этого ваш фрагмент кода будет добавлен на сайт и начнет работать.
Тип 2. Изменение фавиконов в качестве уведомления на вкладке браузера
С помощью этого метода вы будете показывать другую фавиконку на вкладке браузера вашего сайта, когда пользователи переходят на другую вкладку.
Фавикон — это небольшое изображение, которое вы видите в веб-браузерах. Большинство компаний используют уменьшенную версию своего логотипа.
Теперь, чтобы изменить фавикон на вкладке браузера, мы будем использовать плагин WPCode.
Сначала перейдите на страницу Сниппеты кода » Все сниппеты в вашей админ-панели WordPress, а затем нажмите на кнопку «Добавить новый».
Далее просто наведите курсор на опцию ‘Добавить свой пользовательский код (новый сниппет)’ и нажмите на кнопку ‘Использовать сниппет’ под ней
Это приведет вас на страницу «Создать пользовательский сниппет». Вы можете начать с ввода заголовка для вашего фрагмента кода.
Теперь просто выберите «Тип кода» из выпадающего меню справа. Для этого сниппета кода вам нужно выбрать опцию ‘HTML Snippet’.
После этого просто скопируйте и вставьте следующий код в поле ‘Просмотр кода.’
var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png'; function changeFavicon() < document.getElementById('favicon').href = iconNew; >function faviconUpdate() < const update = setInterval(changeFavicon, 3000); setTimeout(function() < clearInterval( update ); >, 3100); >
После того, как вы вставили код, просто удалите из кода примеры ссылок favicon и замените их своими собственными изображениями.
Помните, что изображения, которые вы выбираете в качестве избранных, уже должны быть загружены в медиатеку вашего сайта WordPress.
В противном случае код не будет работать, и ваш фавикон будет отображаться как обычно.
После того как вы вставили ссылки на новые избранные изображения, прокрутите страницу вниз до раздела «Вставка». Здесь вы найдете две опции: ‘Auto Insert’ и ‘Shortcode.’
Вы можете выбрать опцию ‘Auto Insert’, если хотите автоматически вставлять код на каждой странице.
Чтобы изменить фавикон только на определенных страницах, выберите опцию ‘Shortcode’ и вставьте его в любую область с поддержкой шорткодов, например, в виджеты боковой панели или в нижнюю часть редактора контента.
Затем просто перейдите в верхнюю часть страницы и переключите переключатель с ‘Inactive’ на ‘Active’ в правом верхнем углу, а затем нажмите кнопку ‘Save Snippet’.
После этого ваш фавикон начнет меняться в виде уведомления на вкладке браузера.
Тип 3. Изменение названия сайта в качестве уведомления на вкладке браузера
Если вы хотите изменить название сайта, чтобы привлечь внимание посетителей, воспользуйтесь этим способом.
Используя этот фрагмент кода, заголовок вашего сайта будет меняться, чтобы показать привлекательное сообщение, когда пользователи переходят на другую вкладку в браузере.
Мы будем использовать плагин WPCode для изменения заголовка вашего сайта в качестве уведомления о вкладке браузера.
Чтобы перейти на страницу «Создать пользовательский сниппет», перейдите по ссылке Сниппеты кода » Все сниппеты и просто нажмите на кнопку «Добавить новую».
Затем просто выберите опцию «Добавить свой пользовательский код», как показано в примерах выше.
Теперь, когда вы находитесь на странице ‘Create Custom Snippet’, начните с ввода названия для вашего фрагмента кода.
Далее вам нужно выбрать «Тип кода» из выпадающего меню справа. Поскольку это код JavaScript, просто нажмите на опцию ‘JavaScript Snippet’.
После этого прокрутите страницу вниз до опции ‘Location’ и нажмите на выпадающее меню рядом с ней.
В выпадающем меню просто нажмите на опцию ‘Site Wide Footer’.
Затем, все, что вам нужно сделать, это скопировать и вставить следующий фрагмент кода в «Предварительный просмотр кода».
function changeTitleOnBlur() < var timer = null; var title = document.title; var altTitle = 'Return to this page!'; window.onblur = function() < timer = window.setInterval( function() < document.title = altTitle === document.title ? title : altTitle; >, 1500 ); > window.onfocus = function() < document.title = title; clearInterval(timer); >> changeTitleOnBlur();
После того, как вы вставили код, теперь вы можете отредактировать его и просто написать в коде любое сообщение, которое вы хотите отобразить на вкладке браузера.
Чтобы написать желаемое сообщение, просто перейдите к переменной altTitle = ‘Вернуться на эту страницу!’; строку и удалить текст-заполнитель с сообщением для уведомления вкладки браузера.
Далее прокрутите вниз до раздела «Вставка», где вы найдете два метода вставки: «Автоматическая вставка» и «Короткий код».’
Если вы нажмете на опцию ‘Автовставка’, уведомление о вкладке браузера будет активно на каждой странице. Однако, если вы хотите, чтобы ваше привлекающее внимание сообщение было только на определенных страницах, вы можете выбрать опцию ‘Shortcode’.
Например, вы можете добавить этот код только на страницу «Добавить в корзину», чтобы снизить количество отказов от корзины на вашем сайте.
В этом случае вы можете выбрать опцию Shortcode.
После этого останется только перейти в верхнюю часть страницы и переключить переключатель с ‘Inactive’ на ‘Active’, а затем нажать кнопку ‘Save Snippet’.
Вот и все! Теперь уведомление на вкладке браузера будет предупреждать пользователей, которые покидают ваш сайт.
Надеемся, что эта статья помогла вам узнать, как добавить уведомления о вкладках браузера в WordPress. Вы также можете посмотреть наш учебник о том, как добавить веб-уведомления на ваш сайт WordPress и ознакомиться с нашими лучшими плагинами WordPress для развития вашего сайта.
Источник: www.wpbeginner.com