Адаптивная верстка и дробные числа: несколько полезных доработок списка калькуляторов

Коллеги, всем добрый день! Сегодня пишу с важной новостью.

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

Ошибки

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

1. Удаление части вводимого числа. Вставляем с клавиатуры значения с пробелом, например 230 388 и форма удаляет числа после пробела (получается 230).

2. В полях отсутствует возможность указать дробное число (число с точкой или запятой), позволяет указать только целое.

3. При добавлении в поле десяти знаков, начинается какая-то белиберда. Ниже гифка с проблемой.

Доработка калькулятора

4. Неадаптивные к мобильным экранам поля и формы в калькуляторах. Необходимо сделать дружелюбное отображение полей калькулятора на устройствах с маленьким экраном.

Итого

На сегодняшний день все выявленные проблемы в калькуляторах доработаны:

  • Число содержащее пробел корректно отображается в полях даже после переноса из таблиц и ячеек Excel. Значение приводится к виду 230388;
  • Дробные числа в поле при вводе и в итоговом значение приводятся к единому формату — разделителем является запятая.
  • Исправлен баг с вводом более десяти знаков в поле.
  • Доработана адаптивная верстка страниц. Ниже представлен дружелюбный вид калькулятора CPA на мобильном устройстве.

Несколько скриншотов работы калькулятора.

Калькулятор CPA

Отображение калькулятора на мобильном устройстве.

Калькулятор на мобильном устройстве

Исправления внесены на сайт и ждут вашей оценки. Пишите на контактную почту info@konstantinbulgakov.com, если удастся выявить технические проблемы в работе или ошибки в описании к инструментам.

Вы можете самостоятельно потестировать функционал, жмите по ссылке.

Не забывайте поддерживать проект финансово и подписываться на материалы и статьи сайта. Вся информация в блоке ниже!

Как установить Google Optimize с помощью Google Tag Manager

В арсенале Google Платформы для маркетинга, помимо Google Tag Manager, Google Data Studio и Google Analytics есть еще один довольно мощный инструмент, который помогает маркетологам и аналитикам проводить разнообразные эксперименты над проектами и A/B тесты — Google Optimize.

В этой статье мы поговорим о том, как при помощи Google Tag Manager настроить Google Optimize на вашем сайте (настройка немного отличается от стандартной настройки тегов в GTM) и рассмотрим решение проблемы кратковременного появления исходной версии страницы при динамической подмене контента, путем модернизации и установки кода на сайте.

Но обо всем по порядку.

Если вы реализовали отслеживание Google Analytics с помощью Global Site Tag (gtag.js) или Universal Analytics (analytics.js), то проблем с настройкой возникнуть не должно. Вам достаточно скопировать код из интерфейса Google Optimize и заменить им существующий на странице сайта код.

В принципе эта процедура тоже самое, что если бы вы в активный код попросту дописали небольшую строчку кода. Если на сайте используется gtag.js, то добавьте в стандартную строчку пару ключ-значение с идентификатором контейнера Google Optimize:

gtag('config', 'UA-109157148-1', { 'optimize_id': 'GTM-TXF7B2K'});

Итоговый код отслеживания на сайте будет выглядеть так:

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>

Здесь GA_TRACKING_ID ваш идентификатор отслеживания Google Analytics;
OPT_CONTAINER_ID  ваш идентификатор контейнера Google Optimiz, который можно найти в интерфейсе сервиса.

Вот ссылка на официальную справку https://support.google.com/optimize/answer/9183119, к сожалению для многих, она пока только на английском языке.

Если вы используете Universal Analytics (analytics.js), то код потребуется модифицировать немного иначе.

ga('require', 'GTM-XXXXXXX');

Вставьте строчку кода в имеющийся код отслеживания Universal Analytics как показано ниже:

<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-X', 'auto');
 ga('require', 'GTM-XXXXXXX');
 ga('send', 'pageview');

</script>

Замените GTM-XXXXXXX своим идентификатором контейнера Optimize и UA-XXXXXXXX-X поменяйте на идентификатор отслеживания Google Analytics.

Почитать инструкция на английском языке из официальной справки можно по ссылке https://support.google.com/optimize/answer/6262084.

Однако, если вы используете Google Tag Manager для передачи с сайта статистики в Google Analytics, то подробное описание в следующей части статьи.

Настройка Google Optimize средствами Google Tag Manager

Если вы хотите развернуть Optimize с помощью Google Tag Manager, следуйте приведенным ниже инструкциям.

  1. Войдите в Google Tag Manager и выберите контейнер.
  2. Нажмите в правом меню Теги и создайте новый.
  3. Нажмите Конфигурация тегов и в списке выберите Google Optimize.
  4. Введите в поле идентификатор контейнера Google Optimize.
  5. Выберите переменную настроек Google Analytics.
  6. Нажмите Сохранить и сохраните тег без триггеров.

Настройка тега Google Optimize

Но это не все! Теперь нам нужно связать созданный ранее тег Google Analytics с созданным только что тегом Google Optimize. Следуйте дальнейшим указаниям:

  1. Откройте тег со своим идентификатором отслеживания Google Analytics.
  2. Нажмите Расширенные настройки > Порядок активации тегов.
  3. Установите флажок Активировать тег перед тегом Google Analytics.
  4. Выберите из списка созданный тег Google Optimize.
  5. Затем сохраняем настройки.
  6. Опубликуйте свой контейнер GTM, чтобы изменения вступили в силу.

Настройка тега Google Analytics

Настройка в Google Tag Manager завершена. Если вы включите предварительный просмотр, то увидеть, что новый тег активируется с учетом заданных настроек в Google Optimaze.

Теперь самое время запустить ваш первый A/B тест. Статистика по тестам в Google Optimaze начнет собираться моментально, однако будет доступна для обзора лишь спустя несколько часов, иногда даже через сутки активной работы.

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

Настройка кода анти-мерцания

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

Найти скрипт задержки можно в интерфейсе Google Optimize в разделе Настройка кода контейнера > Добавьте код Оптимизации на сайт > Добавить код.

Код мерцания на странице

Или скопируйте код из официального материала https://support.google.com/optimize/answer/7100284.

Разместить скрипт как можно выше, желательно сразу после открывающего тега HEAD вашего сайта. Также скрипт должен располагаться выше кода отслеживания Google Analytics или если вы используете GTM, то выше кода Google Tag Manager.

<HTML>
<HEAD>
<!-- Anti-flicker snippet (recommended)  -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'OPT_CONTAINER_ID':true});</script>

Здесь OPT_CONTAINER_ID  ваш идентификатор контейнера Google Optimiz. Если вы используете в работе Google Tag Manager, то OPT_CONTAINER_ID будет идентификатор контейнера Google Tag Manager.
4000 — время задержки значение в миллисекундах, что соответствует 4 секундам.

На этом все! Настройка завершена. Проверьте работу. Уверен, что все должно работать на странице корректно.

Остались вопросы?

Если что-то не заработало или вы нашли в статье неточности, то пожалуйста, напишите ваш комментарий к этой статье. Попробуем разобраться! И не забывайте добавлять адрес страницы в закладки и отправлять ссылку коллегам. Уверен, что информация вас выручит еще не один раз!

Как настроить отслеживание поиска по сайту на основе метода POST

Друзья, в одном из прошлых материалов мы разобрали принципы отслеживания внутреннего поиска по сайту и описали примеры настройки передачи поисковых параметров в Google Analytics и Яндекс.Метрику, убедившись, что сложного ничего в этом вопросе нет.

Однако, мы осветили стандартный принцип передачи поисковых параметров в системы веб-аналитики, который актуален для 90% всех известных CMS-систем и сайтов. Но что делать, если поиск в системе управления реализован иначе и при использовании формы поиска задействован метод POST, который скрывает передаваемые переменные?

Чтобы было совсем понятно, то в стандартном примере URL-адрес с поисковым запросом будет выглядеть так:

http://example.ru/?s=горные+лыжи

А поиск по сайту на основе POST так:

http://www.example.ru/search.php

Как видите параметр с запросом не передается в URL. Как же быть в таком случае и передать в Google Analytics необходимые данные о поиске по сайту?

У нас есть два способа…

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

Настройка для Universal Analytics

В случае с analytics.js добавляем строчку в код отслеживания из официальной справки:

ga('send', 'pageview', '/search.php?q=klyuchevoe_slovo');

Но немного модифицируем код. Должно получиться примерно так:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXXX-X', 'auto');
  if(window.location.search){
    var path = '/search.php?q='
    ga('send', 'pageview', path);
  } else {
    ga('send', 'pageview');
  }
</script>

Здесь /search.php — адрес страницы сайта с результатами поиска;
?q= — параметр запроса;
UA-XXXXXXXXX-X — номер вашего идентификатора отслеживания.

Настройка для Global Site Tag

Если у вас установлена библиотека gtag.js, тогда для отправки обращения pageview, используйте команду config:

gtag('config', 'UA-XXXXXXXXX-X', {<pageview_parameters>});

Например, этот фрагмент кода отправляет в Google Analytics данные о просмотре страницы с названием search, находящейся по адресу «/search.php».

gtag('config', 'UA-XXXXXXXXX-X', {
  'page_title' : 'search',
  'page_path': '/search.php?q=klyuchevoe_slovo'
});

Итоговый код отслеживания с изменениями будет таким:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

gtag('config', 'UA-XXXXXXXXX-X', {
 'page_title' : 'search',
 'page_path': '/search.php?q='
});
</script>

Опять же /search.php — адрес страницы сайта с результатами поиска;
?q= — параметр запроса;
UA-XXXXXXXXX-X — номер вашего идентификатора отслеживания.

Далее вам необходимо указать настройки параметра в текущее рабочее представление Google Analytics.

  1. Выберите нужное Представление;
  2. Нажимаем Настройки представления;
  3. В разделе Настройки поиска по сайту установите переключатель в положение Вкл.
  4. В поле Параметр запроса укажите параметр, который используется для поиска по сайту. В нашем примере это q.
  5. Добавьте галочку Удалять параметры запроса из URL;
  6. Нажимаем Сохранить.

На этом все! Если действия вам показались сложными и вы не собираетесь изобретать велосипед, то можно пойти и вторым путем:

Обратитесь к программисту, который настроит метод вывода поискового запроса прямо в URL-адрес с параметром и текстом поискового запроса. Если программист реализовал задуманное, то все будет проще и вам подойдет пример дальнейшей настройки из моей первой статьи.

Отчеты

Напомню, что просмотреть отчеты с данными по поиску в Google Analytics можно в отчете Поведение > Поиск по сайту, где доступно сразу четыре различные отчета по внутреннему поиску:

Отчет Поиск по сайту в Google Analytics

На этом все! Если увидели в статье неточность или ошибку, то обязательно сообщите об этом, будем разбираться!

Принимайте участие

Друзья, принимайте участие в развитие проекта. Делитесь ссылками с коллегами и заносите адрес статьи в закладки. Не забывайте подписываться на рассылку и помогать проекту финансово!

Как сравнить ключевые показатели с предыдущим периодом с помощью Google Data Studio

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

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

Такой отчет можно подготовить стандартными средствами популярных систем веб-аналитики. В Google Analytics это реализовано в любом стандартном отчете в блоке Временной интервал. Здесь нужно настроить отображение графика, указав интервал времени, выбрав опцию Сравнить с:

Настройка сравнения диапазона дат в Google Analytics

В стандартном отчете Источник/Канал можно вывести посещаемость проекта сразу по двум периодам — за прошлый год и за текущий. Например, на графике ниже четко заметны изменения за текущий период и за тот же период, но годом ранее.

Диаграмма сравнения дат в Google Analytics

В Яндекс.Метрике сравнение двух интервалов дат можно реализовать с помощью функции Сравнить сегменты с предыдущим периодом. Перейдем в стандартный отчет Посещаемость и прямо в нем укажем необходимые настройки:

Сравнение сегментов в Яндекс.Метрике

Сравнение позволяет просмотреть данные по двум сегментам одновременно. Полученный сегмент можно сравнить, например с предыдущим периодом.

Сравнение диапазона дат в Яндексе.Метрике

Мы рассмотрели принцип сравнение дат стандартными средствами системам веб-аналитики. Но как быть если требуется сформировать такой отчет в Google Data Studio?

Google Data Studio

Требуемый отчет можно подготовить и с помощью инструмента визуализации ответов в Google Data Studio. Для начала нам необходимо настроить обмен данным между Google Data Studio и Google Analytics.

Переходим в пункт меню слева Источники данных и выбираем из списка Google Analytics. Далее определяем нужный аккаунт из списка, указываем ресурс и представление данных.

Связь установлена!

Дальше самое интересное — вывод и настройка отчета. Для начала необходимо выбрать нужным тип диаграммы. Находим в верхней панели выпадающий список Добавить диаграмму и в блоке Динамические ряды выбираем Диаграмма динамических рядов. График автоматически появится на пустом холсте.

Создание диаграммы динамические ряды

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

Здесь нам потребуется изменить стандартные значения в полях Параметры и Показатели, а также установить Диапазон дат по умолчанию, где мы и укажем даты для сравнения. Настройки будут такими:

Параметры = Месяц года (Month of Year);
Показатель = Пользователи (Users).

По умолчанию отчет построился за последние 28 дней (не включая сегодня). Теперь спускаемся к блоку Диапазон дат по умолчанию и выбираем пункт Специальные даты.

Сравнение диапазона дат

Указываем период с 1 янв. 2018 — 31 дек. 2018. Далее указываем даты для сравнения 1 янв. 2019 — 31 дек. 2019. Нажимаем Применить. График должен будет получиться примерно такой:

В правой части во вкладке Стиль можно настроить размер и цвет линий, добавить на график точки и метки данных.

Если вы настраиваете сравнение в диаграмме типа Сводка, то показатель сравнения будет выводиться под основным значением.

Сравнение сводки по датам

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

Например, вам нужно настроить сравнение коэффициента конверсии за предыдущий период — в блоке Диапазон дат для сравнения указываем сравнение за Предыдущий период.

Сравнение за предыдущий период

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

Для Сводки во вкладке Стиль можно поменять цвет подсветки в случае его уменьшения или увеличения — просто измени настройки цвета.

Остались вопросы?

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

Как создать сводную таблицу с посещаемостью сайта по часам и дням недели в Google Data Studio

Друзья, привет! Как вы помните, несколько дней назад мы с вами создавали с помощью Google Data Studio несколько визуальных отчетов. Первый отчет выводил посещаемость сайта по дням недели, второй отчет — по времени суток.

Отчеты не сложные, делались буквально в несколько кликов. В этой статье мы усложним задачу и создадим один отчет, который будет содержать в себе данные сразу по всем параметрам из предыдущих отчетов — Часы / Дни недели и распределение посетителей по дням недели и времени.

Подключаемся к нашему аккаунту Google Data Studio и настраиваем связь с Google Analytics. Выбираем нужным нам аккаунт, определяем ресурс и представление. Если вы не знаете как это сделать, то здесь я подробно об этом писал.

В панели инструментов Google Data Studio выбираем Сводная таблица с тепловой картой Сводная таблица в блоке Сводная таблица и добавляем ее в пустую область.

Создание сводной таблицы

Отлично! Теперь нам потребуется подтянуть корректные данные из Google Analytics. Переходим в блок Данные справа и в строке Параметр строки добавляем Час (Hour), а в строке Параметр столбца День недели (Day of Week).

Настройка параметров сводной таблицы

Далее не забываем задать показатель. Как мы уже решили ранее, показателем для нашей таблицы будут Пользователи (Users).

Показатели сводной таблицы

Как видите данные подтянулись. Однако, данные в таблице пока выглядят не совсем читаемо. Нам потребуется отсортировать строки и столбцы. Строки Часы и столбцы День недели сортируем по возрастанию.

Сортировка строк и столбцов сводной таблицы

Диапазон дат оставляем по умолчанию (в моем случае это 28 дней).

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

Итоговый отчет у вас должен будет получиться таким:

Вы можете самостоятельно «поиграть» с периодами и посмотреть показатели одного из моих проектов.

Вывод!

Как видите строить визуальные отчеты на основе данных в GDS не так сложно. Созданный нами отчет позволяет визуально определить распределение трафика по часам и дням недели.

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

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

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

Остались вопросы?

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