Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 2427 сообщений
Cообщения с меткой

google chrome - Самое интересное в блогах

Следующие 30  »
rss_rss_hh_new

Трюки в Chrome DevTools

Вторник, 19 Сентября 2017 г. 10:03 (ссылка)




SSul


сегодня в 10:03

Разработка





Трюки в Chrome DevTools






  • Tutorial




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



Верстка.



1. Инспектируем анимацию.



Меню анимаций в DevTools позволит вам замедлить все анимации на странице или подвигать “руками” конкретную анимацию.

image



2. Экспериментируем с цветами



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

image



3. Редактируем любой текст на странице



Допустим у вас есть текстовый блок на страницы и вы хотите узнать, как он будет выглядеть, если текст в нем изменится. Переключите документ в режим дизайна! Наберите в консоле document.designMode = 'on', аналогично работает document.body.contentEditable = true. После этого вы сможете редактировать все элементы имеющие текстовый контент.

image



4. Просмотр отрендеренных шрифтов



Иногда очень сложно сказать, какой шрифт на самом деле был отрендерен. В нижней части Computed вкладки панели инструментов, вы можете увидеть какой шрифт используется, даже если его названия нет в списке font-family.

image



5. Принудительные псевдоклассы для элементов



DevTools имеет функцию, которая имитирует применение псевдоклассов CSS, например такие как :hover и :focus на элементах, что упрощает их стилизацию. Она доступна из редактора CSS.

image



6. Изменение формата цвета



Используйте Shift + Клик на предварительном просмотре цвета, чтобы изменить формат: rgb, hsl и hex.

image



7. Редактор кривых безье для анимации.



Вы можете легко изменить временные функции используя DevTools (например, значение свойства для animation-timing-function CSS свойств).

image



Возможности консоли.



1. Вывести HTML элемент в представлении JS объекта



При чтении HTML, браузер генерирует DOM-модель. Если необходимо вывести элемент именно в виде JS объекта в консоль, проще всего для этого воспользоваться методом console.dir().

image



2. Группировка сообщений



Иногда бывает полезно сгруппировать логи для упрощения работы с ними и меньшего засорения консоли. Для этого существуют методы console.group(), console.groupCollapsed() и console.groupEnd().

function name(obj) {
console.group('name');
console.log('first: ', obj.first);
console.log('middle: ', obj.middle);
console.log('last: ', obj.last);
console.groupEnd();
}
name({"first":"Wile","middle":"E","last":"Coyote"});


image



3.1. Вывод значений переменных в виде таблиц



Иногда намного удобнее и нагляднее работать с массивами или объектами в виде таблицы, а не в виде стандартного иерархического представления. Для вывода данных в виде таблице существует метод console.table().

function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var family = {};
family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");
console.table(family);


image



3.2 keys(object) и values(object)



Keys() — возвращает массив имён свойств объекта.

Values() — возвращает массив, содержащий значения всех свойств указанного объекта.

image



4. Логирование времени выполнения кода



Представьте, что у вас есть две функции которые делают одно и тоже но их реализация различна. Как понять какая из них работает быстрее? Можно воспользоваться методами console.time() и console.timeEnd().

image



5. Профилирование



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

console.profile();
// Some code to execute
console.profileEnd();


image



6.1. $(selector)



Если вы знакомы с jQuery, то знаете о возможности конструкций вроде $(‘.class’) и $(‘#id’). Консоль разработчика обладает похожей функциональностью. Здесь «$» отношения к jQuery не имеет, хотя делает, то же самое. Это – сокращение для функции document.querySelector(), возвращает ссылку на первый элемент DOM с указанным CSS-селектором. При этом, если в документе доступна jQuery, её «$» перекроет функционал консоли.



6.2. $$(selector)



Возвращает массив элементов, содержащих указанный селектор. Эта команда эквивалентна вызову document.querySelectorAll().

image



7. clear(), copy(object) и inspect(object/function)



Clear() — очистка всех записей в консоли.

Copy() — копирование в буфер обмена строкового представления указанного объекта.

Inspect() — открывает и выбирает указанный элемент или объект в соответствующей панели: Elements или Profiles.



Прочее.



1. Продвинутая кнопка перезагрузки



(Работает только при открытом DevTools и только в браузере Google Chrome!)

По долгому нажатию на кнопку «Обновить страницу» (либо по правому клику) мы открываем специальное меню, которое предоставляет нам выбор:


  • Обычная перезагрузка (обновляются просроченные ресурсы).

  • Аппаратная перезагрузка (принудительная загрузка всех ресурсов сайта).

  • Очистка кэша и аппаратная перезагрузка.



image



2. Форматирование минифицированых исходников



Инструменты разработчика Chrome имеют встроенный «прихорашиватель» минимизированных исходных кодов к удобочитаемому виду. Кнопка находится в левом нижнем углу открытого в данный момент файла во вкладке Sources.

image



3. Отображение shadow DOM



Такие элементы как поля ввода и кнопки, браузеры, создают из других базовых элементов которые обычно скрыты. Тем не менее, вы можете перейти Settings -> General и включить Show user agent shadow DOM, для отображения этих базовых элементов во вкладке Elements. Это даст вам возможность оформлять их по отдельности.

image



4. Фильтрация и поиск



При работе с DOM, CSS, списком запросов на вкладке Network и т.д. зачастую мы видим перед собой большой список элементов, селекторов, свойств и так далее, в котором бывает сложно быстро найти интересующее нас значение. В таких случаях не стоит забывать про использование фильтрации и поиска которое присутствует на всех вкладках. Благодаря фильтрации мы будем отсеивать все варианты кроме подходящих под условия, а поиск позволит Вам быстро найти то что нужно, если Вы знаете ключевые «слова» для поиска. Как правило поле поиска скрыто и вызывается комбинацией Ctrl + F.

image



5. Come to the Dark Side



Просто потому что темная сторона круче (:

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

image



Используемые ресурсы:

developers.google.com/web/tools/chrome-devtools

habrahabr.ru


Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/336710/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Web-приложения в Android без Cordova, Phonegap и SMS

Пятница, 15 Сентября 2017 г. 12:45 (ссылка)




musicriffstudio


сегодня в 12:45

Разработка





Web-приложения в Android без Cordova, Phonegap и SMS










    Начиная с 5 версии Android компонент WebView поставляется не как часть системы, а как обычное приложение которое может быть обновлено из Google Play:



    image



    Что это даёт разработчикам? Теперь HTML-приложения можно встраивать в .apk без дополнительных костылей. Все возможности HTML5 будут доступны.



    Рассмотрим пример публикации в Google Play реального HTML5 приложения.



    Готовое приложение можно скачать в Google Play, все исходные файлы (JS/HTML, ресурсы, код Java-оболочки) доступны в справке там же.



    Шаг 1. Создание приложения HTML5 и настройка окружения



    Этот шаг пропустим.



    Если у вас нет готового приложения в HTML5 то и публиковать в Google Play пока нечего.

    Последнюю Android Studio можно самостоятельно скачать тут.

    Регистрация аккаунта в Google Play Console также выходит за рамки примера.



    Шаг 2. Создание приложение Android



    Открываем Студию, создаём новый проект и в минимальный API Level указываем как 21 (т.е. Android 5.0). Студия подсказывает что на данный момент это охватывает более двух третей устройств:



    image



    в ближайшие пару лет более старые устройства канут в Лету, но пока так.



    В приложении нам нужна только одна (одно?) Activity содержащее WebView. Весь код буквально убирается на одной странице:



    image



    если интересно, его можно посмотреть по ссылке в приложении.



    Всё что нам нужно это при старте в onCreate сделать пару настроек и открыть файл HTML-страницей. Примерно так



    WebView webView = (WebView) findViewById(R.id.webview);
    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setDomStorageEnabled(true);
    webView.loadUrl("file:///android_asset/index.html");


    Шаг 3. Добавление файлов HTML



    Добавляем в проект папку Asset:



    image



    и вываливаем туда наши файлы. Это всё.



    Шаг 4. Интеграция с Android



    В приложении есть внешние ссылки (например на исходники в GitHub или на создание сообщения в Twitter). Для этого сделаем свою реализацию shouldOverrideUrlLoading, примерно так:




    @Override
    boolean shouldOverrideUrlLoading(String url) {
    String host = Uri.parse(url).getHost();
    if (host.trim().length() > 0) {
    Uri webpage = Uri.parse(url);
    Intent myIntent = new Intent(Intent.ACTION_VIEW, webpage);
    startActivity(myIntent);
    return true;
    } else {
    return false;
    }
    }


    — всего несколько строк, из них видно, что в случае ссылки на локальную страницу (в host пустая строка) оно не перехватывается и открывается в нашем WebView.



    Если это внешняя страница то ссылка передаётся системе и она сама решит, нужно ли открыть её в Twitter, в выбранном пользователем браузере или ещё как-то.



    Иногда нужно сделать наоборот и указать системе перехватывать некоторые ссылки и открывать их в нашем приложении. Для этого добавим в манифесте для нашего Activity дополнительный фильтр:











    — теперь любые ссылки в почте или веб-страницах будут проверяться на соответствие нашему сервису. Если это ссылка на наш сервис то будет предложено его открыть в нашем приложении:



    image



    Итого



    Файл инсталляции занимает меньше 4Мб, есть полная интеграция с платформой Android, доступны все средства HTML5 (в данном примере это Web Audio).



    В ближайшие пару лет доля старых устройств снизится до нуля и от Cordova можно будет полностью отказаться.


    Original source: habrahabr.ru (comments, light).

    https://habrahabr.ru/post/337990/

    Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
    rss_rss_hh_new

    Обзор всех инструментов разработчика Chrome DevTools

    Понедельник, 04 Сентября 2017 г. 15:40 (ссылка)

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

    Отдельно бы хотелось отметить, что DevTools находится в постоянной активной разработке поэтому название инструментов/панелей/вкладок, как и их наличие в целом или способ доступа к ним со временем может быть изменен. Поэтому не стоит пугаться, если на момент прочтения Вами этой статьи DevTools будет незначительно отличатся от того что указано в описании или на скриншотах в этой статье. Читать дальше ->

    https://habrahabr.ru/post/337116/

    Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
    Оксана_Тарасенко

    Компьютерный ликбез: 15 полезностей от Google Chrome, которые пригодятся каждому

    Понедельник, 04 Сентября 2017 г. 17:12 (ссылка)

    Это цитата сообщения Goodwine Оригинальное сообщение

    Компьютерный ликбез: 15 полезностей от Google Chrome, которые пригодятся каждому..




    Предлагаю Вашему вниманию обзор 15 полезных функций от браузера Google Chrome, которые значительно упростят Вашу работу в интернете. 



    Не забыть пароли



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



    Блокировать отвлекающие сайты



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



    Быстро восстановить текст



    Жизненно необходимое расширение для тех, кто часто заполняет формы или просто много пишет в браузере. Lazarus сохраняет весь текст, и если браузер вдруг вылетит в трубу, то все, что вы написали, можно будет восстановить одним кликом.



    Затемнить лишнее











     










    читать далее
    Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
    rss_rss_hh_new

    [Перевод] Android Oreo откусывает кусочек от PWA

    Вторник, 29 Августа 2017 г. 10:27 (ссылка)





    21 августа, после солнечного затмения, Google анонсировал выход финальной версии Android 8 под названием Android Oreo. Вместе с этим, у прогрессивных веб приложений появились новые проблемы.



    Я установил Android 8 на свой Google Pixel и протестировал несколько вещей, касающихся, веб-сайтов и прогрессивных веб приложений, после чего у меня появились несколько плохих новостей.
    Читать дальше ->

    https://habrahabr.ru/post/336592/

    Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
    rss_rss_hh_new

    «Человек посередине», использующий отозванные сертификаты. Часть 2

    Пятница, 25 Августа 2017 г. 09:06 (ссылка)



    В нашей предыдущей статье были описаны основные механизмы проверки статуса сертификатов (проверки, является ли сертификат отозванным). В этой статье мы ответим на следующие вопросы:



    1. Как механизмы проверки статуса сертификатов реализованы в современных Веб-браузерах?

    2. Кто виноват? Почему они реализованы именно так?

    3. Что делать? Какие есть перспективы?



    Эта статья будет полезна тем, кому интересно разобраться в применяющихся на практике механизмах проверки статуса сертификатов.



    На Хабре уже писали на данную тему (например, тут и тут), мы же в этой статье решили привести ещё более подробное описание проверок, выполняемых современными браузерами, более актуальную информацию об их настройках, и, наконец, описание того, как можно исправить сложившуюся ситуацию в будущем.
    Читать дальше ->

    https://habrahabr.ru/post/334714/

    Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
    TRos

    ПРОГРАММЫ ДЛЯ WINDOWS / Интернет / Хром браузер / Google Chrome 60.0.3112.113

    Четверг, 24 Августа 2017 г. 21:37 (ссылка)


    Windows 7/8/10 32&64-bit, Linux, Mac OS X Русский/Английский 44.4 МБ (инсталлятор)
    Самый известный и популярный браузер от Гугла. Является одним из самых быстрых браузеров на сегодняшний день.
    https://www.bestfree.ru/soft/inet/chrome-browser.php

    Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
    rss_rss_hh_new

    Security Week 33: Flash, давай до свидания, расширения Chrome крадут трафик, выложен ключ от прошивки Apple SEP

    Пятница, 18 Августа 2017 г. 18:35 (ссылка)

    Нет, вы только вдумайтесь в эту цифру: 1033 (тысяча тридцать три) уязвимости в Flash Player законопачено с 2005 года! Это больше, чем в Internet Explorer, больше, чем в Windows XP — в общем, через него «теперь хорошо вермишель отбрасывать», поскольку тема закрыта.



    В свое время Flash Player стал настоящей революцией для веба – благодаря ему на сайтах буйно заколосилась анимация, поперли видосики, свистелки, игры для секретарей на ресепшене, ну и, конечно, убойные баннеры (хотел повесить тут пару примеров, но от воспоминаний глаз задергался). Были даже сайты, полностью сделанные на флеше.



    Больше всех любили Flash «черные шляпы». Благо, его уязвимости – ходовой товар, и недостатка в них никогда не наблюдалось. Особенно урожайным выдался 2015 год, когда в «решете» насчитали еще 329 новеньких дыр. А ведь еще в 2010 году Джобс предупреждал, что Flash пора вынести на помойку. Причем главным аргументом была его закрытость. Ну да, глава Apple признал, что у его компании полно собственных проприетарных стандартов, но не для веба же! При этом, кстати, Adobe всячески препятствует появлению и развитию альтернативных проигрывателей Flash. В результате имеем свободный выгул для эксплойтов, раздолье для крупного и мелкого рогатого зловреда.
    Читать дальше ->

    https://habrahabr.ru/post/335928/

    Комментарии (0)КомментироватьВ цитатник или сообщество
    rss_rss_hh_new

    Как сервис push-уведомлений помог нам сделать более посещаемым портал техподдержки

    Среда, 09 Августа 2017 г. 11:38 (ссылка)

    Всем привет. Инструмент push-уведомлений сегодня активно используется компаниями в разных целях — для рассылки новостей, оповещений о рекламных акциях и т.д. Мы решили использовать этот канал для коммуникации с пользователями нашего портала технической поддержки, с которыми мы общаемся в helpdesk системе. Сейчас я расскажу, как мы внедрили в тестовом режиме систему push-уведомлений для нашего портала ТП, и к чему в итоге это привело. Моя статья может быть полезна как техническим (сервисным) специалистам, так и руководителям.









    Портал техподдержки: что могут пользователи, и как мы с ними контактируем

    Для оказания технической поддержки нашего продукта мы используем сайт на основе Zendesk — облачную систему для регистрации тикетов. Пользователи (наши заказчики и партнёры) используют “Портал технической поддержки” не только как место для создания новых заявок, но и как место для обсуждения специфических проблем и своих вопросов.



    Так выглядят топики:





    Так переписка с пользователями:





    Общаться с нами можно через E-mail и веб-приложение:


    • всего на портале зарегистрировано более 4500 пользователей

    • из них активных больше 1000

    • в среднем создается 70 заявок в неделю

    • постоянно в работе около 200 заявок



    Новые топики на портале создаются не так часто, как заявки — примерно десяток за 2 дня.



    Портал постоянно пополняется новыми материалами, особенно в разделах FAQ, Администрирование Docsvision, База знаний известных ошибок, Объявления, Центр разработчика. Сейчас уведомления о новых материалах приходят пользователям на почту, если они подписаны на соответствующий раздел, и, конечно, отображаются на самом портале. Нам показалось, что этого мало.



    Рассматривая новые способы вовлечения аудитории в активности на портале, мы решили провести эксперимент с инструментом push-уведомлений. Он сейчас популярен, удобен и оперативнее других работает в плане оповещения (что и предстояло подтвердить на практике).



    Пара слов о сервисе push-уведомлений



    Браузерные push-уведомления (далее «push», «пуш») — относительно новый канал коммуникации. Спасибо новостным сайтам, которые активно стали использовать эту технологию у себя, — мы можем перенять их опыт и подстроить под свои задачи.



    Вот ключевые характеристики пушей в 2017 году (вообще технология появилась в 2015) для тех, кто не знаком близко с этим сервисом:

    Как это работает

    • каждый пуш содержит в себе заголовок и текст

    • пуш приходит пользователям даже при закрытом браузере (полноценная поддержка push notification была анонсирована ещё в 2015 году — мгновенные сообщения от веб-сайтов могут выводиться на рабочий стол даже когда браузер закрыт — (в Google Chrome для этого есть специальный режим, и отдельный режим для расширений и приложений)

    • целесообразно вставлять в пуш ссылку, дабы стимулировать пользователя кликнуть — перейти куда-то — и получить контент

    • многим такие сообщения уже интуитивно знакомы и понятны (например, MS Outlook)





    Как подписаться на получение

    1. Пользователь заходит на сайт

    2. Через несколько секунд появляется диалоговое окно с предложением активировать пуш-уведомления с этого сайта

    3. Если получено согласие – при следующей рассылке пользователь получит пуш

    4. Profit!





    Сегодня с момента, как мы используем эту технологию, прошло почти 5 месяцев. Мы видим первые результаты и готовы поделиться опытом — возможно, ваша компания тоже захочет воспользоваться этим инструментом и сможет взять из этого материала что-то полезное.



    Реализация + цена вопроса



    Push (aka web-push) уведомления работают в разных сценариях и платформах. Подписаться и получать уведомления можно из десктопного браузера или браузера мобильной ОС (со смартфона). В данный момент поддержка push-уведомлений реализована более чем на 70% устройств/браузеров.



    Выбор платформы (сторонней реализации) или собственной API реализации зависит от ресурсов и времени, которыми вы располагаете.



    Полная картина совместимости на данный момент (http://caniuse.com/#feat=push-api):





    Вот, как выглядит уведомление в поддерживаемых браузерах (увы, Internet Explorer в пролёте):





    Мы воспользовались готовым решением от SendPulse, чтобы посмотреть на технологию: быстро, с минимальными затратами на развёртывание и введение в эксплуатацию.



    Что нас привлекло в этом сервисе:


    • в бесплатной версии он ограничен количеством подписчиков, которое нас устраивает

    • довольно простой и быстрый



    На реализацию и знакомство с сервисом было потрачено несколько всего человеко-часов вебмастера, PR-менеджера, support-инженера.



    Конкретные шаги по внедрению были стандартными:



    1. Мы создали отдельный поддомен нашего главного домена docsvision.com, разместили на нём HTML-код по инструкции:





    2. Оформили приветственным текстом и запустили в тестовом режиме на группу коллег:





    В момент подписки за пользователем закрепляется шифрованный код — токен, который зависит от типа устройства, браузера и домена сайта (это исключает возможность перенести список подписантов куда-то в другое место/сервис и, например, «спамить» их). С одной стороны, это большой плюс, но есть и минусы (о них ниже).



    Теперь сами «пуши». Удобно, что их можно кастомизировать, добавлять собственную иконку и ссылку. Запрос подписки можно сделать с одного сайта (например, известного подписчику).



    3. В уведомлении нет ничего лишнего, кроме того, что нужно (плюс есть возможность использовать кнопки и Unicode emoji)





    4. Уведомления можно получать (и подписываться на них!) в Windows/MaсOS/Ubuntu/Android



    Так выглядит запрос подписки в Chrome на Android:





    Уведомление в Android 6.0 из браузера:





    В данном случае поддержка версий браузеров нас устраивала (ну а что делать?), основная часть пользователей портала техподдержки сидит на chrome, данные Google Analytics по нашему форуму:





    5. Есть возможность A/B тестирования (на Хабре, кстати, была интересная статья про это)



    Удобная аналитика



    В приложении SendPulse уже есть аналитика из коробки — можно следить за количеством подписчиков по дням/неделям месяцам.



    Каждое отправленное push-уведомление формируется в виде «кампании», по аналогии с кампанией рассылки в MailChimp:





    Можно примерно смотреть на количество показов пуша/кликов/общий процент успеха. Можно привязать отправку пушей к созданию каких-либо постов (например, отправку пуша при появлении нового элемента в RSS), но мы делаем акцент только на действительно интересных новостях и записях, т.е. подходим к контенту выборочно.



    Важен следующий момент: в отличие от почтовых сайтов или сайтов широкой тематики (техноблоги, развлекательные сайты, новостные порталы), мы на 100% знаем, кто наша аудитория (технические специалисты, инженеры) и готовы рассылать только релевантные для них посты.



    Что push'им и когда



    Мы решили рассылать push не чаще 2-3 раз в неделю. Для этого в начале недели собирается инициативная группа, которая накидывает свои варианты для рассылки (посты/+новости), и мы за них голосуем.

    Пуши решили отправлять после 11 часов и до 14 часов — обычно фокус активности в течение недели/дня приходится на это время.



    Разброс по регионам среди посетителей у нас вот такой, данные Google Analytics по нашему форуму на портале ТП:





    Исходя из первых 3-х позиций, рассчитываем удобное время для отправки сообщений этим группам: С 11-00 до 14-00 по МСК.



    Результаты первого push'a



    Оформив все так, как нам нужно, и сделав несколько тестовых рассылок, мы пригласили всех активных пользователей портала ТП воспользоваться нашим сервисом. Как именно пригласили:


    1. Сверстали письмо

    2. Отправили

    3. Посмотрели на CTR (click-through rate)

    4. Отправили письмо тем, кто его не открыл/не перешёл по ссылке, ещё раз



    Результаты первого push на пользователей были следующие:


    • 65% доставка онлайн-пользователям в течение 5 минут (общее время жизни push 24 часа)

    • 50% переходов по ссылкам (клик на push и переход на страницу форума)



    Если взглянуть на средние показатели посещаемости портала до внедрения push и в момент первого push, то картина следующая:



    Посещаемость портала в течение 2 недель июня за 2017 год и в течение 2 недель июня за 2016 год:





    Итого:

    2016 год – Returning Visitor 87% против 93% в 2017 году.

    2016 год – New Visitor 12,3% против 6,1% в 2017 году.



    Мы также проанализировали статистику нашего форума по посещениям, комментариям и просмотрам (к сожалению, статистики за 2016 год нет, т.к. у нашего support сервиса сменился движок, но мы сравнили активность форума в месяц с push'ами и в месяц до них).



    В период использования push-сообщений:





    До внедрения push-сообщений:





    Количество просмотров и комментариев не сказать, что значительно увеличилось, но прирост есть.



    Мы также заметили, что увеличилось время «удержания» пользователей на портале:





    Во-первых, переходы с push-сообщений на портал находятся на 4 месте после прямых заходов и заходов через поисковые системы.



    Во-вторых, время, проведённое пользователем портале при переходе по push-сообщению — от 6 до 15 минут (взяли среднее). Те, кто используют пуши, не уходят сразу с портала.



    Статистика последних рассылок следующая:





    В среднем 30% переходов — это успех для нас, гораздо больше, чем у стандартных почтовых уведомлений с портала, которым ещё надо пробиться через спам фильтры.



    C чем мы столкнулись в процессе



    Во-первых, мы не сразу заметили, что существуют очень «разные» версии браузеров, которые по-разному воспринимают попытку оформить подписку через push API:

    Например, сейчас существует как Opera Stable, так и Developer версия (user agent у них одинаковый) — и у части наших пользователей были проблемы с подпиской на push.



    Во-вторых, мы не сразу стали использовать функции авторассылки — эта функция позволяет всем новым подписчикам получать не realtime пуши, а заранее запланированную цепочку — так можно показать подписчикам свои самые популярные материалы.



    Вот, как она выглядит:





    Были выбраны временные отрезки:

    5 минут, 14 часов, 2 дня, т.к. push мы отправляем 2 раза в неделю, и, если подписка случилась после этих двух раз, дабы не было большой паузы, подписчик получает сразу несколько полезных материалов на ознакомление. Отличная фича!



    Советы



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



    Во-первых: не стоит считать push гарантированным способом доставки информации — увы, пользователь в момент получения push может быть занят и не кликнуть по ссылке (по самому пушу), стоит дублировать все сообщения в других источниках.



    Во-вторых: пользователи, привыкшие к бесконечным push новостных агентств, не очень охотно подписываются, боясь, что их «заспамит». Так что нам пришлось донести до них информацию о том, что пушей будет немного, и это действительно будет полезная, а не рекламная инормация, которая вызывает негатив и которую в большинстве случаев пользователи игнорируют («Подпишитесь на нас, чтобы получить скидку!» ).



    Рекомендации




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

    • Рассылайте push в релевантное время — представляйте себе точно, кто ваша аудитория, и в какое время она активна

    • Не рассылайте push слишком много и часто — это может вызвать недовольство

    • Получайте обратную связь



    Сразу выбирайте правильного поставщика push сервиса

    Этот пункт очень важен. Поставщик push/API/сторонний сервис/приложение для рассылки пушей — в первую очередь, в сервисе/поставщике будет храниться информация обо всех наших пользователях в виде токенов. В этом есть плюсы и минусы:



    Плюсы:

    Список устройств, на которые мы рассылаем пуши, хранится в виде зашифрованного токена. Токены нельзя импортировать/экспортировать в другие системы, следовательно, нельзя будет спамить пушами, рассылать пуши пользователям без их ведома, и никогда не случится ситуации, в которой человек подписывался на новости компании «Рога и Копыта», а стал получать новости «ООО Эдельвейс».



    Минусы:

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

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

    Этот минус неактуален, если вы используете какой-то свой API для рассылки и храните токены у себя.



    Рассылайте в правильное релевантное время



    Рассылать пуши, конечно, лучше в «правильное» время, когда CTR будет самым высоким.

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



    Вообще по пушам в приложениях/сайтах есть небольшая статистика (по Северной Америке).

    На графике (от Leanplum) показано время отправки/открытия пушей в течение дня:





    Скачок в промежуток 15-18 часов. О чём это говорит? Лучше отправлять пуши в разгар рабочего дня, при этом многое зависит, конечно, от того, в каком секторе вы работаете.



    Не рассылайте слишком много и часто



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



    Будьте лаконичны, CTR по количеству слов в push сообщений: Источник.





    CTR по времени дня:





    Получайте обратную связь



    Спустя 2 месяца после внедрения пуш-сообщений – мы озадачились вопросом «а все ли возможные пользователи подписались?» Составили опросник на тему использования сервиса с такими вариантами ответов:


    • Да, классный сервис, спасибо

    • Что это?

    • Нет

    • Да, и хочу чаще новостей

    • Нет, не понимаю, как им пользоваться, и что он даёт

    • Ваш вариант



    Результаты опроса такие: 50% пользователей ответили «классный сервис», 25% из них же сообщили, что хотели бы получать новости чаще. 17% используют более традиционные средства коммуникации и привыкли к ним.



    Можно использовать EMOJI



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

    По статистике компании Leanplum, процент открытия возрастает с 2,5% до 4,5% (мелочь, а приятно):





    Помните, что на Android push более эффективен, чем на IOS:





    Очевидно, это связано с некими ограничениями iOS устройств — браузеры в данной статистике не затрагиваются (просто, чтобы вы знали). Статистика представлена для мобильных операционных систем без привязки к веб-пушам. В целом, запуск пушей на Safari не поддерживается, но можно использовать его в браузере Chrome).



    Анализируйте аудиторию



    По этому графику видно, что молодое поколение более охотно использует новые технологии:





    Люди в возрасте 13-24 лет примерно на 20% больше интересуются пушами, чем люди от 25 до 44 лет. Увы, данные актуальны по Америке — для России крупную аналитику найти не удалось.

    Если смотреть на специфику именно наших рассылок — мы точно знаем, кто наши пользователи, и что им будет интересно. Не будет такого, что маркетолог получает новости техногика, и наоборот. Если вам понадобится рассылать непрофильные новости и сообщения, лучше для этого использовать другие средства коммуникации.



    Что ещё можно улучшить



    Когда наладите пуш-сообщения, подумайте, о том, что вы ещё не использовали в пушах, например:


    • большие картинки (часто делать не советуем, т.к. полезное экранное место теряется, да и это может отпугнуть пользователя)

    • кнопки для опросов (взаимодействие с пользователями) — на каждую можно повесить свой URL и емодзи



    Наши планы



    После получения благоприятных отзывов от наших пользователей мы планируем:


    • Перевести push-рассылки из тестового режима в боевой и предлагать подписку ВСЕМ новым пользователям портала helpdesk

    • Расширять аудиторию, нащупывать наиболее интересные темы, на которые наиболее активно реагируют пользователи







    Буду рад услышать какие-то новые советы от коллег, у которых есть опыт применения (и получения!) push-уведомлений!
    Original source: habrahabr.ru (comments, light).

    https://habrahabr.ru/post/335180/

    Комментарии (0)КомментироватьВ цитатник или сообщество

    Следующие 30  »

    <google chrome - Самое интересное в блогах

    Страницы: [1] 2 3 ..
    .. 10

    LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
    О проекте: помощь|контакты|разместить рекламу|версия для pda