Progressive Web App шагают по планете, теперь Google Drive стал PWA

PWA (Progressive Web App) — это технология, которая позволяет веб-сайтам становиться приложениями практически в любой операционной системе (Windows, Mac, Android) со всеми вытекающими функциями, как то:

  • Работа приложения в отдельном окне
  • Установка в один клик в браузере
  • Работа в режиме оффлайн, то есть, без интернета
  • Высокая скорость работы

Несмотря на то, что PWA появились уже достаточно давно, с весны 2018 года, и их существует уже достаточно много, в общей массе своей пользователи о них ничего не знают.

Тем не менее, Google активно переводит свои сервисы в режим работы PWA-приложений, и вот сейчас режим PWA получил Google Drive.

PWA приложения Google

Чтобы установить PWA Google Drive достаточно зайти на сайт https://drive.google.com и просто щелкнуть плюсик справа в адресной строке:

Установка PWA приложения

Всё, приложение установлено! Теперь его можно найти в меню Пуск и запустить в отдельном окне:

PWA приложение Google Drive и оффлайн режим

Обратите внимание на значок работы в оффлайне. Приложение переходит в режим оффлайна автоматически или принудительно, если включить этот переключатель.

Точно также PWA Google Drive можно установить и на мобильный телефон, только зачем? Там есть свое приложение с дополнительными функциями, например, сканирования документов в PDF, которые отсутствуют у сайта.

Но радует то, что технология PWA активно развивается и появляется все больше и больше таких приложений.

По материалам https://9to5google.com/

Правильная фильтрация трафика сотрудников в Google Analytics

Как не учитывать в статистике посещений работу сотрудников с сайтом? Эта задача часто возникает, особенно на сайтах с низкой посещаемостью. Ведь на сайтах со среднесуточным трафиком в 15 — 20 тысяч сессий работа 20 сотрудников теряется где-то в статистической погрешности.

Люди-хипстеры в такой ситуации обычно рекомендуют, или сразу делают, фильтр по IP-адресам на представление и кропотливо вбивают в него один или несколько адресов офиса (хорошо если так).

Хипстер в естественной среде обитания

Однако такое решение обладает рядом существенных недостатков, которые для хипстеров неочевидны, а именно:

  • IP адреса могут меняться, то есть этот список приходится постоянно держать в актуальном состоянии
  • Могут быть подключения на динамических IP, например, через 4G/LTE соединения, при каждом подключении будет выдаваться новый IP
  • Сотрудники могут работать (и работают) не из офисной сети, опять же на непредсказуемых IP-адресах
  • Обилие фильтров в GA может приводить к ряду проблем (об этом позже)
  • Отсутствует ретроспектива, то есть, изменения фильтров отслеживается с момента изменения и нет возможности посмотреть в прошлое

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

Роли пользователей

Роли пользователей — это группировка авторизованных пользователей по их типу, например, Клиент, Подписчик, Сотрудник, Администратор и т.п. Понятно, для того, чтобы узнать роль пользователя, система управления контентом сайта должна авторизовать пользователя, то есть, он должен в явном виде ввести логин и пароль. Подавляющее большинство CMS E-commerce сайтов обладают этой функцией. Это может быть авторизация, личный кабинет на сайте и т.п. Не все системы помимо авторизации определяют роль пользователя, но авторизовать пользователя могут практически все.

Итак, первая доработка сайта заключается в том, чтобы для авторизованных пользователей передать в dataLayer информацию о пользователе и его роли.

Рассмотрим это на примере сайта WordPress / WooCommerce. Мы используем плагин
Google Tag Manager for WordPress для работы с dataLayer, и в нем это решается буквально парой кликов:

Включение передачи ролей в GTM4WP

Но у вас не WordPress, придется попросить разработчиков сделать достаточно простую штуку — при регистрации и/или авторизации пользователя в личном кабинете или в админке сайта явно передать в dataLayer информацию о пользователе.

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

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  visitorId : '123',
  visitorType : 'employee'
});

Настроим эту передачу в GTM. Создадим две переменные:

Переменные уровня данных

Вот настройка переменной роли:

Настройка переменной visitorType

Далее в Google Analytics настроим два параметра:

Специальные параметры Google Analytics

Обратите внимание, у обоих параметров область действия — пользователь. Это важно.

Ну и сделаем передачу наших переменных в эти параметры:

Настройка передачи переменных в специальные параметры Google Analytics

Собственно, всё!

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

Создание расширенного сегмента

Теперь идем в Google Analytics и создаем вот такой сегмент:

Настройка расширенного сегмента Google Analytics

Все готово!

Фильтрация пользователей по роли

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

Если остались вопросы — пишите их в комментариях.

PageSpeed в Google Data Studio — метрики производительности сайта в отчетах SEO

Google Data Studio — отличный инструмент BI-аналитики. Мы с его помощью строим большое число отчетов и дашбордов, в том числе и операционных отчетов о работе сайтов, отчетов по SEO оптимизации и многое другое. Обычно такие отчеты включают в себя:

  • Диаграммы трафика на сайт и распределение по маркетинговым каналам
  • Показатели эффективности трафика
  • Воронки заказов на сайте
  • Позиции в поисковых системах
  • Видимость сайта в поисковых системах
  • Пропущенные и рекомендованные запросы в поисковых системах

Однако сейчас общая скорость сайта является весьма важным фактором, и наши специалисты и клиенты хотели бы видеть метрики производительности, тот же PageSpeed в операционных отчетах. Это несложно сделать.

Как вывести PageSpeed в отчеты Google Data Studio

Google Data Studio очень выгодно отличается от других инструментов BI наличием большого числа готовых коннекторов, то есть, компонентов, которые позволяют получить доступ к тем или иных системам или данным. Даже если коннектора нет, они достаточно несложно создаются самостоятельно. Но это немного другая история.

Так вот, хорошая новость: есть готовый коннектор PageSpeed! Давайте его используем.

Подключение PageSpeed к отчету

Создайте новый отчет или откройте существующий. Выберите Ресурс → Добавленные источники данных.

Добавление источника данных к отчету

И далее нажмем Добавить источник данныхИсточники данных в отчетеКоннекторов много, поэтому удобно в поиске написать “PageSpeed” и выбрать вот этот коннектор:

Коннектор PageSpeed

Далее просто укажите адрес вашего сайта и нажмите кнопку [Связать] в правом верхнем углу

Настойка коннектора PageSpeed

Это очень простой коннектор, у него все два поля

  • weburlName — собственно URL, который измеряется
  • Page Speed Insights Score — и само измерение PageSpeed

Ничего добавлять сюда не будем, просто нажмите кнопку [Добавить к отчету].

Вывод показателя PageSpeed в отчете

Ну теперь осталось его красиво показать. Можно, конечно же, использовать стандартные элементы визуализации, например, шкалку с целями, но куда нагляднее будет спидометр Gauge:

Добавление спидометра в отчет Google DataStudio

Разместите его в нужном месте отчета и давайте его настроим.

Для начала подключим его к нужному источнику данных:

Щелкните по источнику данных и выберите PageSpeed. Должно получиться вот так:

Настройка данных спидометра

Теперь переключитесь на вкладку “Стиль” и сделайте следующие изменения:

  1. Green Section — выберите цвет “красный” и укажите числа min 25, max 70

Красная зона

  1. Yellow Section — укажите числа min 70, max 85
  2. Red Section — выберите цвет зеленый и укажите числа min 85, max 100

Далее переключитесь на вкладку “Данные” и нажмите на карандашик напротив названия метрики:

Выбор источника данных

Введите в качестве названия, например, символ %.

Всё! Смотрите на свой отчет!

Спидометр PageSpeed в отчете Google Data Studio

Как видите, всё достаточно просто.

Кстати, этот и подобные трюки будут подробно рассмотрены на моем первом очном официальном курсе по BI-аналитике. Успейте записаться!

Google Data Studio и WordPress

Некоторое время назад появился невероятно мощный инструмент Google Data Studio, который объединяет самые разнородные данные и на основе этих данных строит наглядные интерактивные отчёты. К чести Google этот инструмент оказался намного более простым и, самое главное, не настолько замороченным идиотскими ограничениями, как его ближайший конкурент от некрофильной компании Microsoft, к которому я, например, так и не смог подключится. Но при этой простоте Google Data Studio не теряет самого главного — визуализации любых данных, своего основного назначения. Кстати, правильное название этого инструмента по-русски — Google Центр данных.

Зачем нужен Центр Данных

Google DataStudio позволяет получать любые данные из практически любого источника, для которого существует коннектор. Комбинируя полученные данные, мы можем с легкостью создавать отчеты, сводки, дашборды с KPI для оперативного контроля практически любой задачи.

Коннекторы Data Studio

Коннекторы Google Data StudioКоннектор — это программный модуль, который производит загрузку данных в отчет в виде плоской таблицы или набора таких таблиц. С помощью коннектора в Центре Данных создается так называемый Источник данных, то есть, набор параметров подключения, которые определяют какие данные и откуда следует взять. Например, корректор Google Analytics создает источник данных, получающий данные именно вашего аккаунта и ресурса GA, то есть, именно вашего сайта.

Стандартно Google дает коннекторы для:

  • Google Analytics
  • Google Search Console
  • AdWords
  • BigQuery
  • CloudSQL
  • MySQL
  • Многие другие

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

Поэтому Google предоставляет готовый набор инструментов — Google Apps Script, с помощью которых разработчики могут достаточно несложно создавать свои собственные коннекторы. Для интересующихся могу порекомендовать изучение следующих материалов (англ.):

Мы в нашей компании пошли именно по этому пути — мы сейчас пытаемся создавать (пока только для внутреннего использования) корректоры к REST API наших внутренних систем — CRM, CPM и кое-что другое.

Использование отчетов Data Studio в WordPress

Любые отчеты Центра данных изначально могут быть встроены в любые страницы сайта, но мне кажется наиболее востребованной функцией создание дашбордов (сводок с основными KPI сайта) для зарегистрированных пользователей — администраторов, менеджеров магазина или клиентов компании.

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

Но в качестве первого прообраза мы нашли и использовали решение от Ezond, за что им огромное спасибо!

Отображение отчетов Data Studio в WordPress

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

Но те возможности, которые дает нам Центр данных, реально вдохновляют нас на активное использование этого подхода для бизнес-сайтов. Смотрите также услугу «Создание аналитического отчета Google Data Studio«.

Ускоряем браузер Google Chrome до скорости света

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

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

Данный совет поможет вам, если у вашего компьютера есть память от 4 — 8 GB. При меньших объемах лучше то, что здесь описано, не делать.

Ну-с приступим…

Установка диска в память

Для работы нам понадобится так называемый RAM Disk, то есть, специальная программа, которая часть оперативной памяти вашего компьютера сделает очень-очень быстрым диском. Рекомендую вот эту программу:

http://memory.dataram.com/products-and-services/software/ramdisk

Скачиваем и устанавливаем от имени Администратора компьютера.

После установки запускайте программу RAMDisk Configuration Utility и сразу в меню View включайте пункт Advanced.

Далее устанавливайте параметры:

Disk Size: 1024 Mb

FAT Partition

RAMDrive

На вкладке Load/Save устанавливайте

ImageFile: C:\RAMDisk.img

Load Disk at Startup

Save Disk Image at Shutdown

RAMDrive

 

Нажимайте кнопку [Start RAMDisk] и далее [Save Disk Image Now]

Если вы сейчас откроете проводник, то увидите, что у вас появился новый диск объемом 1 GB. Например, с буквой D: или E:. Найдите его и создайте в нем папку Google.

Установка очень важной утилиты

Прежде чем продолжить работу нам понадобится очень важная утилита Link Shell Extension, которая позволяет работать с Windows с так называемыми символьными ссылками. Именно символьные ссылки нам понадобятся, чтобы «обмануть» браузер Google Chrome. Но для начала выясните, какая у вас система 32-битная или 64-битная. Это можно сделать, если нажать кнопки [Win]+[X] и выбрать пункт Система.

Версия ОС

Скачиваем нужную версию и устанавливаем. Чтобы проверить установку, просто щелкнине в проводнике по любому файлу или папке правой кнопкой и вы должны увидеть вот такой пункт меню. Пока нажимать его НЕ НАДО!

Link Shell Extention

Если такого пункта у вас нет, то вызывайте ближайшего знакомого «ты_же_программиста» и покажите ему статью, пусть то, что здесь написано, сделает он.

Перенос рабочей папки Chrome на новый диск

Для начала нужно ЗАКРЫТЬ браузер Хром, все окна. Более того, посмотреть в область уведомлений (где часы) и поискать, нет ли там, значка Chrome. Если есть, закрываем!

Закрыть Google Chrome

Теперь открываете ДВА проводника и расположите их рядом друг с другом. В первом откройте свой новый диск, тот самый, который вы установили ранее, и открывайте созданную вами папку Google (если ее нет, создайте). А во втором наберите (или скопируйте и вставьте) вот такой адрес (проценты обязательны):

%localappdata%\Google\Chrome\User Data

Найдите там папку Default и СКОПИРУЙТЕ ее на новый диск, в папку Google.

Теперь ПЕРЕИМЕНЙТЕ СТАРУЮ ПАПКУ в Default.old (это которая в User Data).

А дальше начинается магия. Щёлкните по папке Default на новом диске правой кнопкой мышки и выберите пункт «Запомнить источник ссылки». Если такого пункта нет, верните все взад и срочно зовите ты_же_программиста!

Далее, в СТАРОЙ ПАПКЕ щелкайте по любому свободному месту правой кнопкой мышки и выбирайте пункт

Поместить как -> Junction связь:

junction

Должно получится вот так:

default-link

Если вы щелкните по этой ссылке, то должны увидеть список разных папок и файлов.

Получилось? Отлично! Запускайте Google Chrome и открывайте любой сайт. Только сначала пристегните ремни, а то от такой скорости работы может закружится голова!

Удачи вам!

«РИФ-Воронеж 2015» — инновации и новые предложения. Мы будем там!

В сентябре этого года в Воронеже состоится Интернет-конференция «РИФ-Воронеж 2015», объединяющая  ведущих профессионалов Интернет-сферы.  Иван Никитин  выступит с докладом «Методы анализа эффективности продвижения» в секции «Продвижение и веб — аналитика – одно без другого   — «деньги на ветер»», также слово возьмут: Екатерина Шукалова, Мария Питерская, Роман Тихонов и другие.

В целом, предлагаются: нужные инновации для стартапов, варианты по развитию информационных технологий в России.

 

Реферальный спам в Google Analytics

В последнее время мы все чаще стали замечать резкое ухудшение канала «Referral» в Google Analytics:

Канал referral

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

Домены реферальный спам

При попытке перейти на эти сайты, понятное дело, мы не обнаруживаем никаких ссылок на себя, а видим откровенную рекламу или предложение поставить некий скрипт у себя на сайте, чего делать, конечно же, ни в коем случае, не следует!

Мы столкнулись с реферальным спамом (referral spam) — явлением не столько опасным, сколько назойливым. И в этой заметке я покажу, как его легко убрать.

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

Вот пример такой ахинеи, в котором предлагается вычислять спамеров по IP
http://blog.seolib.ru/marketing/master-klass-po-udaleniyu-refspama/

Я тебя вычислю по IP

Чтобы понять как бороться со реферальным спамом, нужно четко себе представлять, как работает Google Analytics, с чем обычно бывает туго у таких «экспертов».

Откуда берется реферальный спам

Итак, у Google Analytics есть несколько способов передачи данных. Точнее, способ то один — Measurement Protocol, а вот реализаций у него масса. Важно понимать, что передачу данных в Google Analytics через Measurement Protocol можно выполнить из любого приложения, из любого скрипта. То есть, чтобы зафиксировать, например, посещение страницы на вашем сайте, не обязательно заходить к вам на сайт! Достаточно просто сделать обращение к Google Analytics из любой программы, чем и пользуются спамеры. Единственное, что им нужно знать, так это Ваш Google Analytics ID.
Это образная сторона той мощи, которую дает нам Measurement Protocol, и, к сожалению, однозначного решения этой проблемы нет.

Таким образом, важно понимать, что никаких заходов на ваш сайт не было и в помине, спамеры просто записали данные об этих заходах напрямую в Google Analytics. Хотите в этом убедиться? Попробуйте найти заходы на сайт с указанных ресурсов, например, в Метрике. Там их нет! Потому что и заходов не было. Понятно, что все эти дурацкие советы SEOLib с блокировкой спамеров НА ВАШЕМ СЕРВЕРЕ просто не имеют смысла!

Рефералы в Метрике

Возникает резонный вопрос: а зачем спамеры это делают? Ответ прост: вы увидите неслабый трафик на сайт, перейдете на сайты-источники (якобы источники), где вас будет ждать или реклама услуг для маркетологов/вебмастеров или вредоносный скрипт, который вы добровольно разместите на своем сайте (те самые социальные кнопки). Вот и все.

Как убрать реферальный спам

Несмотря на утверждения «экспертов» SEOLib, есть дополняющих два способа убрать реферальный спам:

  • Фильтр Google Analytics
  • Расширенный сегмент

Регулярное выражение для реферального спама

Оба способа используют регулярное выражение, которое будет отфильтровывать строку с доменом спамера. Имеет смысл построить его заранее, протестировать и только потом использовать. К тому же, его желательно делать расширяемым на будущее.

Давайте внимательно посмотрим на список спамеров на примере одного из наших сайтов. Очень рекомендую взять временной интервал 2 — 3 месяца.

Домены спамеров

Мы хорошо видим, что очень часто используются слова «buttons», «-seo», «tracking», «traffic», «4web», «-for» и другие. Здесь просто приведены фрагменты спамерских доменов. Давайте выпишем их в строку регулярного выражения

buttons|-seo|tracking|traffic|4web|-for|monetizer

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

Фильтр по источнику
Исключение источников

Смотрим список внимательно, есть ли там еще спамерские домены? Вроде нет.

Создаем фильтр реферального спама

Перейдите в раздел Администрирования и в колонке аккаунта выберите «Фильтры».
Добавляем новый фильтр на все представления, называя его «Реферальный спам»

Фильтр реферального спама

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

Однако фильтр не уберет уже накопленные данные, а лишь в будущем не даст им накапливаться. Чтобы убрать накопленные данные можно сделать сегмент:

Создаем расширенный сегмент «Без реферального спама»

Вообще-то таких сегментов полно в галерее, но мы сделаем свой

Сегмент фильтрации спама в галерее

Откройте сегменты и нажмите [+Сегмент]. Заполните следующие поля:

Расширенный сегмент Без реферального спама

Собственно, все.

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

Ну и в завершение отмечу, что все эти темы подробно рассматриваются на курсе «Профессиональная Веб-аналитика«, который рекомендуется всем, кто работает с Google Analytics.

Отслеживание с помощью Google Analytics внимания к материалам сайта и времени прочтения до конца

Недавно на аналитику к нам пришел очень интересный проект. Это контентно-информационный сайт с большим количеством материалов и достаточно большим входящим трафиком. Перед нами были поставлены задачи вычисления вовлеченности аудитории, сегментация пользователей на лояльных и не лояльных, читающих, пролистывающих и не-читающих статьи вообще (около 10 сегментов). Бо́льшая часть задач решается стандартными средствами Google Analytics, но вот как определить читающих, пролистывающих и не-читающих? Но и это реализуемо!

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

Для того, чтобы зафиксировать появление объекта в области видимости, мы использовали библиотеку Waypoints:

https://github.com/imakewebthings/waypoints

Далее дело техники и вот что получилось:

[code lang=»js»]
jQuery(function($){
/* Селектор выбора статьи */
var articleSelector = ‘.article-content-wrapper’;

window.readMarkers = {};
window.readMarkers.start = new Date().getTime();
var pArr = $(articleSelector + ‘ p’);
if (pArr.length < 3) return;
var middleIndex = Math.floor(pArr.length / 2);
var lastIndex = pArr.length — 1;
$(pArr[middleIndex]).waypoint(function(direction){track(‘Middle’,this)});
$(pArr[lastIndex]).waypoint(function(direction){track(‘End’,this)});

function track(id, obj)
{
if (window.readMarkers[id]) return;
window.readMarkers[id] = true;
var now = new Date().getTime();
ga(‘send’, ‘event’, ‘Read’, id, document.title);
ga(‘send’, ‘timing’, ‘Read’, id, now — window.readMarkers.start, document.title);
}
});
[/code]

Результаты работы

Мы видим, как часто люди дочитывают до конца — все лишь в трети случаев! (Здесь и далее данные сайта ivannikitin.com и только за сегодняшний день.)

Действия по событию Чтение

Время чтения статьи до середины и до конца:

Время маркеров

Мы видим, какие статьи наиболее часто внимательно читаются:

Метки времени прочтения статей

И понятно, мы теперь легко построим сегмент:

Создание сегмента Читающая аудитория

Дальше мы легко можем увидеть вовлечение этой аудитории по дням:

Когортный анализ вовлеченности аудитории

Надеюсь, этот трюк вам поможет!

Если есть вопросы — пишите в комментариях.

Понравилось? Жмите кнопку ниже: