Отслеживание мобильных пользователей с помощью GTM
Два способа определения пользователей, которые перешли на ваш сайт с мобильного устройства, с помощью Google Tag Manager.
Сейчас практически у каждого сайта есть адаптивная/мобильная версия, которая отличается по виду в зависимости от типа устройства – десктоп, мобильный телефон, планшет. На каждой из этих версий могут быть расположены различные элементы. Например, в мобильной версии развернутое меню может превратиться в бургер:
Пример отображения сайта на компьютере и телефоне
Или какие-то кнопки активны на десктопной версии, а на планшете они скрыты. В общем, вариантов много. В конечном виде настольная версия сайта может значительно отличаться от портативных девайсов. Это усложняет отслеживание событий таких объектов.
А что делать, если нам необходимо отслеживать определенные действия на телефонах, чтобы потом таким пользователям показывать уникальное предложение? Если мы не определим тип устройства, с которого был осуществлен переход к нам на сайт, то и условие активации (триггер) мы никак не запустим. Запустим, конечно, силами разработчиков, но не собственными.
А чтобы это сделать самостоятельно с помощью GTM, необходимо создать пользовательскую переменную, которая отличала бы мобильных пользователей от настольных компьютеров.
Сделать это можно различными способами. Я рассмотрю 2:
- с помощью JavaScript кода, который определяет тип устройства в зависимости от полученной ширины экрана;
- с помощью JavaScript кода, который возвращает булево значение true (истина) или false (ложь).
Разберем более подробно.
Способ №1
Создаем в GTM пользовательскую переменную типа Собственный код JavaScript и вставляем туда следующий код:
|
1 2 3 4 5 6 7 8 9 10 |
function () { var width = window.innerWidth, screenType; if (width <= 768) { screenType = "mobile"; } else if (width > 768 && width <= 992) { screenType = "tablet"; } else { screenType = "desktop"; } return screenType; } |
В Google Tag Manager это выглядит так:
Переменная deviceType1
Комментарий по коду: мы объявляем переменную width, в которую заносим данные по объекту window, с помощью которого сможем получить размеры рабочей области окна браузера. За это отвечает свойство innerWidth. И объявляем переменную screenType.
innerWidth
Подробнее про объект window, свойства innerWidth, outerWidth и другие читайте в этой статье.
Затем запускаем условие (цикл), при котором происходит сопоставление размеров окна браузера пользователя. Если его ширина меньше или равна 768 пикселям, то в переменную screenType заносится mobile. В противном случае спускаемся на проверку следующего условия – если размеры рабочей области окна браузера больше 768 пикселей и меньше или равно 992, то в screenType заносится tablet. И в противном случае если ни одно из этих условий не сработало, то значит это desktop (ПК).
Почему 768 и 992? Все дело в размерах экранов устройств. Чтобы лучше понять, перейдите на сайт mydevice.io и в таблице Smartphones отсортируйте по убыванию столбец CSS width.
Таблица с разрешениями экранов (Smartphones)
В данных таблицах представлены наиболее распространенных модели устройств. Вы также можете посмотреть фактическую ширину и высота экрана для планшетов, переключившись выше на вкладку Tablets.
Как видим, значение не превышает 504 пикселей для Blackebrry Passport. Но это для портретной (вертикальной) ориентации, когда пользователь устройство держит вертикально. Но есть еще и ландшафтная ориентация (столбец CSS height), которую тоже надо учитывать. Именно поэтому в коде выставлено значение 768. Хотя сейчас у того же Apple iPhone X это значение составляет 812 пикселей.
Пример разрешения экрана Apple iPhone X
Примечание: в 2001 году в HTML4 и CSS2 была введена поддержка аппаратно-зависимых таблиц стилей, позволившая создавать стили и таблицы стилей для определенных типов устройств.
Медиазапросы (Media Queries, @media) используются в тех случаях, когда нужно применить разные css стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиазапросы являются очень важным инструментов при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые есть у Ваших пользователей.
Я рекомендую ориентироваться на следующие медиазапросы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
##Device = Desktops ##Screen = 1281px и выше ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px |
Как видим, самые популярные разрешения смартфонов в портретной ориентации лежат в пределах 320 – 479 пикселей, у планшетов в пределах 768 – 1024 пикселей (в нашем примере я поставил 992).
С каждым годом количество новых моделей становится больше, размеры экранов увеличиваются. Если мы перейдем в Google Analytics и построим специальный отчет, то можем наблюдать множество различных разрешений экранов и моделей мобильных устройств.
Специальный отчет в Google Analytics
С помощью данного скрипта не всегда возможно со 100% вероятностью верно определить тип устройства пользователя. В этом и заключаются основные минусы способа №1:
- установка ограничений по ширине и высоте попиксельно – какие цифры считать правильными?
- сложно учесть ориентацию пользователя в момент просмотра сайта (держит он девайс горизонтально или вертикально?).
Как проверить? Для этого достаточно в GTM запустить режим отладки и посмотреть, какое значение передается в нашу переменную.
Режим отладки GTM - Способ №1
Я зашел на сайт с персонального компьютера, тип устройства он определил корректно (desktop). С помощью консоли разработчика и функции Toggle Device Toolbar я также могу протестировать адаптивный дизайн сайта путем имитации разных размеров и разрешений экрана, выбрав нужный из списка. Перезагрузив страницу, в переменной deviceType1 я получу значение mobile.
Toggle Device Toolbar
Эту пользовательскую переменную можно использовать в триггерах и тегах для любых условий активации (ограничивается вашей фантазией и задачами), и передавать эту информации в счетчики аналитики. Кроме этого, вы на этапе трекинга таким образом можете исключить данные, которые не планируете отправлять в Analytics. Ярким примером реализации служит клик по номеру телефона на мобильных устройствах.
Клик по телефонной трубке (номеру телефона) на моб. устройствах
На десктопе в принципе невозможно после такого клика дозвониться (если только не установлена специальная программа для звонков) по телефону, указанному на сайте. А с мобильного устройства – это потенциальное обращение (лид, конверсия). Но люди могут кликать с компьютера, тем самым искажать статистику. А если данное событие вы используете как конверсию при оптимизации рекламных кампаний Google Ads, то отслеживание всех кликов заставит алгоритмы Google работать не лучшим образом.
Способ №2
Этот способ наиболее точный, но он возвращает не тип устройства, а булево значение true (мобильное устройство, истина) или false (нет, ложь).
Чтобы воспользоваться этим методом, в GTM также создайте пользовательскую переменную типа Собственный код JavaScript со следующим кодом (взят со Stack Overflow):
|
1 2 3 4 5 6 7 8 9 |
function () { var isMobile = false; // initiate as false // device detection if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { isMobile = true; } return isMobile; } |
В Google Tag Manager выглядит так:
deviceType2
Сохраняем переменную. Идем в режим предварительного просмотра. Поскольку я захожу с компьютера, то мне возвращается значение false.
Режим отладки - Способ №2
Поскольку Google Analytics и данный скрипт определяет устройство через строку User-Agent, можно воспользоваться расширением User-Agent Switcher (для Google Chrome), чтобы изменить это значение.
Использование User-Agent Switcher
В примере я выбрал устройство iPhone 6. Как видим на скриншоте выше, переменная deviceType2 (Способ №2) определила по User-Agent, вернув значение true, а deviceType1 (Способ №1) определил как desktop, поскольку размер экрана более 992 пикселей по ширине.
Моя рекомендация: использовать способ №2.
Напоследок в качестве примера привожу настройки триггера, который активируется при каждой загрузке страницы, когда пользователь просматривает ваш сайт с помощью мобильного устройства.
Триггер, который срабатывает только для мобильных пользователей
Понравилась статья? Поставьте оценку ?
