Как отслеживать ускоренные мобильные страницы (AMP) в Google Analytics

В феврале 2016 года Google начал выводить ускоренные мобильные страницы (AMP) в новостном блоке мобильного поиска. Вебмастера обратили внимание на этот промоушн AMP HTML и напрямую спросили Джона Мюллера, станут ли ускоренные мобильные страницы новым фактором ранжирования. Представитель Google ответил, что пока использование AMP — просто плюс для ранжирования на мобильных устройствах, и только. Глобальная цель проекта AMP от Google — увеличение производительности мобильного интернета. Так что корпорация вряд ли откажется от дальнейшего развития ускоренных мобильных страниц, и если вы еще не начали работать с AMP HTML, то это стоит сделать в ближайшее время.

Что такое AMP?

AMP (Accelerated Mobile Pages, ускоренные мобильные страницы) — проект от Google и Twitter, запущенный в октябре 2015 года. Основным средством его реализации служит AMP HTML, формат для максимального ускорения загрузки страниц на телефонах и любых мобильных устройствах с медленным интернет-соединением. По сути, АМР HTML — это урезанный HTML, со специальным набором тегов и JS библиотекой. АМР-страницы сохраняются в кеше Google и при медленном соединении загружаются на устройство пользователя прямо из кеша. Таким образом Google выступает как огромная CDN сеть для страниц вашего сайта. Элементы АМР-страницы подгружаются последовательно, по мере прокрутки страницы, что также повышает скорость загрузки для конечного пользователя. Интересно, что рекламные баннеры от AdSense, Google Менеджера рекламы и нескольких других рекламных сетей закешируются вместе со страницей и будут показаны посетителю. Авторы блога Moz прозвали АМР «диетическим HTML», так как на ускоренных мобильных страницах следует убрать все «лишнее». Именно поэтому для АМР-страниц предложена альтернатива стандартным вариантам установки отслеживания аналитики.

Установить Google Analytics для Accelerated Mobile Page

Для отслеживания данных аналитики на сайте проекта АMP в стандартном наборе тегов доступен элемент amp-pixel с функционалом подсчета количества просмотров страниц. Но он не передает данные напрямую в Google Analytics. Поэтому для работы с Google Analytics мы будем использовать элемент amp-analytics из расширенных компонентов Accelerated Mobile Pages.

1. Для включения функционала отслеживания аналитики добавляем строку в head:

<script async="" custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

После этого подключаем JS библиотеку AMP:

<script async="" src="https://cdn.ampproject.org/v0.js"></script>

2. В body страницы добавляем элемент “amp-analytics” с атрибутом type=“googleanalytics”. Так что данные внутри тега будут переданы в систему GA. Также рекомендуется для каждого элемента добавлять уникальный id в рамках текущей страницы. В примере это analytics1, но можно использовать любой другой.

3. Лучше создать в Google Analytics отдельный ресурс только для AMP-страниц. Идентификатор этого ресурса будет использован при настройке передачи данных об AMP в GA (смотри в примерах кода ниже).

4. Разместить внутри тега amp-analytics код ниже, указав идентификатор ресурса GA для АМР страниц. Пример кода для отслеживания просмотров страниц:

<script type="application/json">{  "vars": {  
  "account": "UA-XXXXX-Y"  //
 Указать идентификатор нового ресурса GA из п.3  }, 
 "triggers": {   
 "trackPageview": {      "on": "visible",      
"request": "pageview"    }  }}</script>

Этот скрипт обрамляем строками: Это только базовый код для сбора данных о просмотрах страниц. Тег amp-analytics позволяет отправлять не только данные о просмотрах страниц (pageview), событиях (event) или социальных взаимодействиях (social interaction), но и передавать пользовательские параметры или любые другие значения на уровне hit через Measurement Protocol. Если вам нужно передавать более широкий спектр данных — ознакомьтесь со справкой по АМР от Google.

Что еще нужно знать об ускоренных мобильных страницах

На одной АМР-странице можно использовать несколько тегов amp-analytics для разных систем аналитики. Но авторы проекта Accelerated Mobile Pages рекомендуют помнить, что чем проще АМР-страница, тем лучше для пользователей. Не стоит использовать теги, в которых нет необходимости. В механизм кеширования АМР страниц от Google встроена система валидации для проверки работоспособности страниц. Обязательно проследите, чтобы ваши АМР-страницы были реализованы без ошибок. В ином случае они не будут закешированы Google и показаны пользователям.

Проверить, пройдет ли страница валидацию, можно по ссылке.

Функционал АМР HTML существенно ограничен. AMP рекомендуется использовать для контентных проектов или отдельных информационных страниц. Если есть сомнения, подойдут ли вашему сайту ускоренные мобильные страницы, — ознакомьтесь с перечнем доступных расширенных компонентов АМР. Для известных CMS, таких как Wordpress, уже есть готовые плагины по созданию ускоренных мобильных страниц. Используете ли вы ускоренные мобильные страницы для своего проекта? Какие пробовали плагины, и есть ли в них встроенное отслеживание аналитики? Пишите в комментариях.