HTML5 Notifications — это просто: делаем уведомления одной строкой, как в GMail
Наверняка все, кто пользовался почтой от Google, хоть раз видели уведомления вроде этого:
Уведомления почты gmail
Эти уведомления называются HTML5 Notifications, и они видны, даже если перейти в другую вкладку или вообще свернуть браузер.
После прочтения этой статьи вы сможете сделать такие же уведомления и для своего сайта. Код простой, кроссплатформенный, и непосредственно отправка уведомления занимает всего 1 строку на любимом JavaScript.
Также в конце статьи есть готовая функция, с помощью которой можно начать отправлять уведомления, не вникая в подробности.
Согласно сайту caniuse.com, сейчас такие уведомления (HTML5 Notifications) работают в браузерах Chrome, Firefox (35+), Opera (27+), Safari (7.1+). Internet Explorer поддержки интернета уведомлений не имеет. Если рассматривать мобильные платформы, то частичная поддержка HTML5 Notifications есть только у Android Browser.
АльфаСтрахование-Жизнь , Москва, можно удалённо , По итогам собеседования
Перед тем, как непосредственно отправлять уведомления, нам нужно получить права (permission) на это.
Сделать это можно методом Notification.requestPermission() :
После выполнения метода, результат запроса на права будет лежать в переменной permission .
Вот её разные значения с пояснениями:
- default — запрос на получение прав не отправлялся;
- granted — пользователь разрешил показывать уведомления;
- denied — пользователь запретил показывать уведомления.
Получив права, можем приступать непосредственно к отправке уведомлений.
Делается это очень просто, одной строкой:
title — заголовок уведомления,
options (опционально) имеет следующие параметры:
- body — тело уведомления (основной текст), в разных браузерах и ОС обрезается по-разному (например, в Chrome под Win 8.1 максимальная длинна — 200 символов);
- dir — направление отображения уведомления, может быть auto, ltr (слева направо) или rtl (справа налево);
- lang — язык уведомления;
- tag — уникальный идентификатор уведомления, с помощь которого можно заменить его другим уведомлением или удалить;
- icon — URL изображения, которое будет показано в уведомлении (рекомендуем разрешение 40×40 px).
Попробуем установить параметры и отправить уведомление:
Результат выполнения кода выше
Также у notification есть методы-обработчики событий onclick , onshow , onerror , onclose :
Одна функция для всего
Теперь соберем всё в единую функцию и добавим несколько проверок на ошибки:
Теперь у нас есть красивая функция, с помощью которой можно просто отправлять уведомления, не отвлекаясь на запрос прав или поддержку браузера:
Как сделать Push-уведомление и форму подписки на сайте
Посетители сайта играют важную роль в ведении блога или иного сайта. Ведь посетители, – это обратная связь, и не только в виде комментариев и отзывов, но и в виде поведенческого фактора, что влияет на позиции сайта в поисковиках, ИКС (индекс качества сайта) и т.п. Рост подписчиков сайта говорит о качестве контента и его пользе.
Для чего вообще нужны подписчики? У всех своя цель, одни пытаются охватить своим контентом максимальное количество читателей, другие для монетизации. То есть, чем больше посетителей, тем больше кликов по размещенной контекстной рекламе на сайте или можно сделать рассылку по подписчикам на какой-либо продаваемый продукт и заработать на этом.
Ну ладно, не будем забегать в СЕО, все что касается сайтов, это большая рутина, в котором всё со всем взаимосвязано. Сегодня я расскажу о том, как сделать Push уведомления на сайте, создать и разместить красивую форму для сбора подписчиков с помощью сервиса SendPulse.
В связи с отсутствием свободного времени, как бы не старался, ну не успеваю быть в ногу со временем по отношению к блогу. До сегодняшнего дня сбор подписчиков и рассылка происходила через сервис гугла – FeedBurner. Считаю, что данный метод уже устарел, ведь оформление Email-рассылок в FeedBurner по сравнению с другими сервисами просто небо и земля.
Протестировать возможности SendPulse до конца еще не успел, но почитав отзывы и посмотрев функционал, меня он полностью устроил. Пишу ни рекламы ради, сам пользуюсь бесплатным тарифом: сбор до 2500 Email подписчиков и рассылка до 3000 писем в месяц (хотя в тарифе указано до 15000), а также возможность абсолютно бесплатно работать с push-уведомлениями. Пока хватает.
Как сделать Push-уведомления на сайте
Для начала нужно зарегистрироваться на сайте SendPulse.com. Электронную почту лучше сразу вводить с доменом вашего сайта, если у вас его нет, то создайте в личном кабинете вашего хостинга. Дело в том, что если вы планируете рассылать новости вашим подписчикам, то с такой почтой как @yandex.ru, @mail.ru и тд, ваша письма уйдут в СПАМ, поэтому сервис их не пропускает. Впрочем, можете указать свою личную почту, она будет использоваться как логин, а потом для рассылки писем сможете добавить еще одну с доменом вашего сайта.
Кликаете на верхнюю вкладку PUSH , регистрируете ваш сайт нажав Добавить новый сайт .
Выберете необходимый протокол безопасности — HTTP или HTTPS и введите ваше доменное имя.
Далее все интуитивно понятно, описывать не вижу смысла. Для тех, кому все же тяжело настроить push-уведомление на сайте, снял видео с пошаговым показом, смотрите в конце статьи. Полученный код вставляете к себе на сайт перед закрывающимся тегом </head>.
Как отправить Push уведомление в SendPulse
Чтобы отправить push-уведомление, в левом столбце нажмите кнопку Отправить PUSH . Далее все также просто и понятно, смотрите в картинке, а ниже еще более подробно с описанием.
В списке получателей выберите Push-подписчиков с адресом вашего сайта. Чтобы CTR был как можно выше, заголовок и текст уведомления нужно стараться сделать продающим, манящим кликнуть, но в тоже время чтобы контент соответствовал описанию. Придется потрудиться, так как есть ограничение количества ввода символов. В графу Ссылка на уведомление вставьте адрес вашей статьи (новости). Вы можете заменить стандартную картинку сайта, выбрав и загрузив другую. Если кликнуть Дополнительные опции, в раскрывшемся окне можно добавить большое изображение, на мой взгляд уведомление становится более презентабельным. Если планируете отправить в другое время, то справа от кнопки Отправить можете кликнуть по часам, выбрать Отложенная отправка — указав дату и время. Теперь жмите Отправить .
Как сделать форму подписки на сайте через SendPulse
Сегодня мы говорим о сервисе SendPulse, поэтому в рамках данной темы мы не будем рассматривать другие возможности создания форм подписок. Выберите в верхнем меню Рассылки . Кликните на Новая адресная книга , дайте ему название. В эту адресную книгу будут собираться все подписчики вашего сайта.
В левом столбце выберете Формы подписки – Создать новую форму . Тут уже играетесь на свой вкус. Вы можете выбрать форму для размещений в тело статьи, сайдбар, в виде всплывающего окна и тд. В конце сохранившись в редакторе, у вас появится код в виде скрипта для вставки на ваш сайт, выберите соседнюю вкладку HTML. Да, код в отличии от скрипта огромный, но в самом низу есть возможность удаления прямой ссылки на SendPulse, возможно для кого-то это не важно, для меня – критично, так как ссылка получается практически сквозная. Проще всего отредактировать полученный код в редакторе Notepad++.
Разместить отредактированный HTML-код вы можете в наиболее удобное место вашей темы. Я использую плагин New Adman, он также прекрасно служит для размещения рекламных блоков Google AdSense.
Email-рассылка подписчикам сайта в SendPulse
Чтобы разослать письма подписчикам, нужно всего лишь выбрать Создать рассылку в левом вертикальном меню. Далее подгрузится страница с вашими данными, вводите тему сообщения, выбираете шаблон, вводите текст и отправляете рассылку всем вашим подписчикам.
PS: Образец push-уведомления вы можете увидеть при первом открытии страницы моего сайта, посмотреть на форму подписки можете под статьей.
Видео о создании push-уведомлений и формы подписчиков в SendPulse
Лучшее «Спасибо» — ваш репост
Вячеслав. Специалист по ремонту ноутбуков и компьютеров, настройке сетей и оргтехники, установке программного обеспечения и его наладке. Опыт работы в профессиональной сфере 9 лет.
Вам также может понравиться
Как ускорить загрузку своего сайта
Просто и безболезненно переводим сайт с HTTP на HTTPS
Как упростить работу интернет-магазина: Автоматическая выгрузка и синхронизация товаров
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Подписка на комментарии или подписаться не комментируя. Ставя галочку, вы соглашаетесь с Политикой конфиденциальности.
Создаём уведомления на jQuery
Довольно часто происходит ситуация, когда нужно поделиться новостью со всеми пользователями на сайте. Подавляющее большинство администраторов используют модули для этих целей, ставят их, как правило, в верхней части сайта. Но установив на определённую позицию, они находятся там всё время неподвижно. Такой способ имеет право на существование, но он не очень красиво смотрится, к тому же анимации нет. Я предлагаю создать область уведомления на jQuery. При открытии страницы уведомление будет показано в шапке сайта, а кликнув по нему, плавно скроется. Там же будет располагаться кнопка, для того чтобы можно было вернуть уведомление назад. Такой вариант вполне устроит онлайн магазины, предлагающие всевозможные акции или скидки, но и для рядового администратора будет полезен. Перед тем как приступать, для начала создадим два уведомления на HTML, рассмотрим работу кода. После на основе этого примера, напишем новый код для шаблона Joomla. Почему новый напишем, а не внедрим? Потому что в примере с HTML мы будем использовать цельный вариант (два уведомления — Success! и Warning!), для того чтобы любой желающий мог его изменить и использовать по собственному желанию. А вот для Joomla будет всего одно уведомление — это скорее информер на том же скрипте. Для работы я использую стандартный шаблон protostar и Joomla 3.6 (скрипт без проблем запуститься и на поздних версиях движка, начиная с Joomla 3.2 и выше).
Уведомление на HTML
Открываем NotePad++ и создаём два файла — index.html и style.css. Оба файла размещаем в папке под названием notification.
В index.html вставляем это:
Здесь мы подключаем jquery библиотеку и таблицу стилей, так же прописали две кнопки. Обратите внимание на текст уведомления внутри id=»wrap» и сам скрипт, внутри него находиться точно такой же текст, обёрнутый в те же стили. Когда посетитель открывает страницу, уведомление показывается из id=»wrap», если нажать на кнопку, то покажет написанное в скрипте. В моём варианте я вывожу то же самое сообщение, но вы можете изменить по своему усмотрению.
Эта функция отвечает за скрытие:
Значение 350 — скорость исчезновения области уведомления после нажатия мышкой.
Теперь пишем стили для нашей страницы. В style.css необходимо вставить следующее:
После всех проделанных действий нам остаётся открыть index.html в браузере и проверить результат. Вы должны увидеть два сообщения Success! и Warning!. Кнопка «NEW SUCCESS» добавляет сообщение зелёного цвета, а «NEW ERROR» красного. Для просмотра уведомлений вот ДЕМО.
Уведомление в шаблоне protostar от Joomla
Переместить полученный код в шаблон сразу не получиться. Во-первых, скрипт работать не будет из-за конфликта с переменными, а во-вторых, стоит отредактировать стили под внешний вид шаблона. Для начала займёмся стилями. Подгоним по размеру экрана, кнопку установим с правой стороны и расширим область с текстом.
1. Установка стилей
Используя FileZilla, находим на сервере файл template.css шаблона protostar (путь по умолчанию …/templates/protostar/css/template.css). Скачиваем на компьютер и запускаем через NotePad++. Далее переходим в самую нижнюю часть файла, делаем отступ и вставляем это:
Сохраняем, возвращаем назад в папку css с заменой.
2. Вставляем уведомление в index.php
При помощи всё тех же программ, находим и открываем index.php (путь по умолчанию …/templates/protostar/index.php). Сразу после класса body (строчка 141) пишем код:
Если не понятно, вот картинка как ориентир:
Интересно тут то, что при использовании Joomla 3.6 подключение библиотеки jQuery не обязательно. Но если вы используете версию от 3.2 и выше, то библиотека необходима. У меня версия 3.6, я всё равно оставил jQuery подключённой. В любом случае многим из вас она не помешает, а если что удалите. В скрипте знак $ заменён на идентификатор jQuery, так не будет происходить конфликт. Если у вас свой шаблон, а не protostar, то убедитель что запускается «jQuery.noConflict()» в шапке сайта в противном случае работать не будет.
Здесь мы оставили всего одно сообщение и одну кнопку, остальное удалено. Сохраните изменения в index.php и положите файл обратно в папку protostar на сервере, проверяем результат.
Заключение
В принципе можно использовать этот код для чего угодно, не только в качестве уведомлений для сайта, но и как подсказку или предупреждения, если посетитель нажал на что-то не то. Конечно, многое здесь ещё предстоит поправить, если хотите подогнать под свой шаблон и свои нужды. Но благодаря этому небольшому скрипту вариантов для создания интересных объектов на сайте очень много.
Push уведомления на сайт — как сделать, зачем они и как заработать
Привет! Сегодня речь пойдет об интеграции в сайт системы Push уведомлений. Мы рассмотрим выбранный нами вариант, узнаем для чего нужны Push подписки, поговорим об альтернативах и узнаем как можно заработать перепродавая пуши.
Сервис для интеграции Push подписок в сайт — Sendpulse
Среди сервисов push-уведомлений, мы выбрали для своего сайта именно этот, за ряд преимуществ, о которых Вы узнаете из этой статьи. Здесь мы представляем небольшой мануал по настройке этого сервиса и установке кода на свой сайт.
Первым преимуществом, является удобство интеграции, вставив небольшой код и подтвердив (проверив) его установку — Вы можете сразу приступить к сбору пуш подписок на своем сайте. Второе — сервис Sendpulse работает с протоколами HTTTP и HTTPS — такая возможность присутствует не у всех сервисов.
Интеграция сервиса Пуш подписок на сайт
Интегрировать сервис пуш рассылок можно абсолютно в любой сайт. Для наглядности, мы проведем установку кода пушей на нашем сайте antitube.ru — который по какой-то причине не имел еще этого замечательного инструмента взаимодействия с пользователями.
После регистрации на сервисе, переходим в верхнем меню в раздел «Push» — после чего, нажимаем кнопку «Добавить новый сайт» как показано на скрине:
Далее, вставляем наш домен и выбираем протокол — у нас HTTP, поэтому Сендпульс поможет нам и будет взаимодействовать через собственный домен HTTPS для того, чтобы подписки работали на всех устройствах и браузерах — и это еще одно преимущество, выгодно отличающееся от других сервисов или ручной настройки через Google сервисы.
- Добавляем адрес сайта (домен)
- Добавляем картинку 128х128 — это не обязательно, но не плохо. Если Вы хотите чтобы призыв к подписке срабатывал при клике на элемент (напр. ненавязчивая кнопка), то нужно будет привязать к элементу специальное значение обрабатываемое скриптом.
- Вид запроса подписки — мы выбрали всплывающее окно (лучше конвертит) но тестируйте
- Составьте призыв к действию, приглашение к подписке
- Сохраните и перейдите к следующему шагу.
На этом настройка закончена, как видите здесь все просто и интуитивно понятно. Дальше нам нужно будет вставить код в наш сайт, для этого копируем этот код и переходим в менеджер файлов хостинга для редактирования.
Если Ваш сайт — это html страница, находим файл index.html на хостинге и редактируем, как это указано, вставляем код перед закрывающим тегом </head> и сохраняем страницу. В нашем случае сайт на php и мы ищем файл header.html (php) и делаем тоже самое.
Сохранили? Проверяем! Нажимаем на кнопку «Проверить настройки», у Вас должно отобразиться «код успешно добавлен»
Нажимаем «завершить», готово! Как видите нет ничего сложного. Можно было обойтись и без этого мануала. Теперь вы можете посмотреть, как это выглядит на Вашем сайте, а затем, если необходимо поправить настройки, например изменить текст призыва, время, через которое будет показан виджет и прочее.
На всю эту операцию ушло около получаса времени, вместе с написанием этого мануала и редактированием картинок. А сколько это займет у Вас? Думаю минут пять.
Зачем вообще нужны Пуш уведомления на сайте?
Способов применения пуш уведомлений довольно много и Вот некоторые из них:
- Вернуть посетителя на сайт — если человек подписался, то ему интересно то, что происходит на Вашем сайте, значит это неплохой способ вернуть его, уведомив о новых публикациях и это основная задача
- Увеличение целевой посещаемости и показателей для ранжирования в поисковиках — исходит из первого
- Дополнительный заработок — если Вы публикуете рекламу на сайте
- Перенаправление на продукты и услуги, офферы, партнерские программы
Как заработать на пуш уведомлениях?
Есть несколько способов заработка на пушах. Давайте немного углубимся в эту тему. К примеру, Вы можете создать статью на своем сайте, о товаре или услуге, оффере, о каком-то гаджете или чем-то еще. При помощи пушей — Вы можете пригласить пользователя читать эту статью (карточку товара) через уведомление.
Сторонние сайты. В пуш рассылке, Вы можете вставлять ссылку на любой сайт, тем самым Вы можете также перенаправлять на товары и услуги, партнерские программы и прочее — находящееся на сторонних ресурсах.
Рекламировать свои новые ресурсы, группы, каналы и прочее, что связано с Вашей деятельностью.
Как заработать на Push уведомлениях на своем сайте или без своего сайта
Здесь мы погружаемся в тему арбитража трафика и заметим, что это не плохой способ. Гипотеза такова: мы собираем пуш подписки и перепродаем их через специальные сервисы получая вознаграждение. Также не имея собственного сайта, мы можем на сервисах получать готовые домены, направлять туда трафик, собирать подписки и сразуже получать за это деньги. Суть гипотезы такова — берем более дешевый трафик, собираем подписки, продаем дороже, чем затраты на трафик. Если Вам интересна эта тема, сервисы, которые выкупают пуш трафик — указаны в этой статье
Сбор базы Push уведомлений
Использовать пуши можно и в обратном направлении, не продавая их, а наоборот выкупая. Зачем? Ну опять же для всех те хже целей, которые описаны Выше. Вот такой пример сбора: Вы создаете лендинг, с какой-нибудь захватывающей информацией не имеющей продолжения, встраиваете код пуш рассылки «под кнопку» — рекламируете в попандере или другим способом, заинтересовавшийся пользователь подписывается и Вы накапливаете базу, которую будете использовать далее в своих интересах.
Еще Вы можете выкупать пуши, договорившись с владельцем посещаемой площадки и установив туда свой код, за определенную плату. Это довольно неплохой способ, Вы будете знать целевую аудиторию сайта и сможете потом выгодно монетизировать эту базу.
Смежный сбор базы. На пуш рассылки, люди подписываются охотнее, чем на имэйл рассылки и к тому же, эффективнее реагируют, поэтому рекламируя товары или услуги, установите пушик для сбора базы. Кроме того, можно тестировать на прелендах которые используются в арбитраже трафика, при помощи пушей, пользователя можно вернуть к уже знакомой ему теме.
Сервисы пуш уведомлений для сайта — сравнение
Вы можете выбрать любой из этих сервисов, какой Вам удобнее и больше подходят для Вас. Все они имеют бесплатный тестовый период, а становятся платными только при наборе определенного количества подписчиков. Сравнивайте: скорость загрузки, возможности, тарифы, дизайн оформления окон и прочий функционал, проголосуйте чуть ниже за тот сервис, который Вам больше понравился.