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

Если вы следили за изменениями Google в последнее время, то могли заметить, что они стали одержимы мобильным вебом. И на это есть несколько веских причин. По данным Search Engine Land, Google официально подтвердил, что мобильный поиск превзошел десктопный еще в 2015 году. Более того, в октябре 2016 года Google объявил о мобильно-первой индексации, которая предусматривает приоритет мобильной версии контента сайта над десктопной при присвоении поисковых рейтингов. Эта одержимость привела к появлению ускоренных мобильных страниц (также известных как AMP), которые в первую очередь предназначены для того, чтобы обеспечить мобильному пользователю захватывающий и молниеносный опыт работы с сайтом. По сути, ускоренные мобильные страницы похожи на обычные HTML-страницы, но фреймворк AMP убирает все пользовательские JavaScript, большинство CSS-стилей, виджеты и плагины (включая оригинальные скрипты/коды отслеживания Google Analytics), благодаря чему страницы и посты загружаются практически мгновенно. Чтобы наглядно продемонстрировать разницу в нагрузке между AMP- и не AMP-страницами, посмотрите на тесты скорости https://www.wired.com/, приведенные ниже:

Страница не-АМП

AMP-страница

Как видите, несмотря на то, что оценка производительности выросла не слишком значительно, разница в скорости загрузки просто поразительна. Только посмотрите, AMP-версия загружается всего за 101 мс. Это просто невероятно. Здорово, что у нас есть приличное время загрузки, скажете вы, но без тяжелого CSS — AMP будет выглядеть уродливо. Хорошая мысль, но на самом деле это не так. Если вы потратите некоторое время на настройку AMP и примените только то, что разрешено фреймворком, вы едва ли заметите разницу между AMP и не-AMP страницами. Более того, потенциально вы можете сделать их (почти) идентичными. Вот пример:

Проводная страница Non-AMP

Wired AMP Page

Итак, теперь, когда мы разобрались с основами, давайте перейдем к рассмотрению реальных преимуществ AMP.

1. Скорость (для пользователей): Первое преимущество, которое приходит на ум, — это молниеносная скорость работы AMP. Уже давно известно, что мобильные пользователи постоянно сталкиваются с задержками сайтов, особенно когда речь идет о мобильном поиске. Поэтому ускоренные мобильные страницы приходятся как нельзя кстати.
2. Пользовательский опыт (для пользователей): AMP выводят пользовательский опыт на совершенно новый уровень. Бесконечные всплывающие окна, самовоспроизводящиеся видеоролики и раздражающая анимация — все это исключено из фреймворка AMP, что позволяет пользователям погрузиться в атмосферу вашего сайта и его ключевого «ингредиента» — контента.
3. Доступность (для пользователей): Несмотря на то, что мир невероятно быстро движется к тому, чтобы обеспечить всех быстрым интернетом, в некоторых странах все же приходится сталкиваться с медленным соединением. AMP-фреймворк — это как молот, который разрушает стены плохого интернет-соединения.
4. Top Stories Carousel (для издателей): Ускоренные мобильные страницы дают вам возможность появиться в «лучших историях» — мобильной карусели, которая находится в верхней части результатов поиска Google. Это открывает перед владельцем сайта возможность генерировать больше трафика на свой сайт.
5. Улучшенное поведение пользователей (для издателей): Благодаря улучшенному пользовательскому опыту и быстрой загрузке страниц люди с большей вероятностью просмотрят больше страниц и будут взаимодействовать с сайтом, тем самым снижая показатель отказов.
6. Увеличение доходов от рекламы (для издателей): По данным Google, более 90 % издателей отмечают более высокие показатели кликов, а подавляющее большинство из них — более высокие показатели eCPM.

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

Добавление AMP в WordPress

Интеграция AMP с WordPress довольно проста и сводится к загрузке официального плагина AMP для WordPress.

После того как вы загрузите и активируете плагин, он автоматически создаст AMP-версии ваших постов (в настоящее время плагин не поддерживает страницы). Чтобы увидеть, как выглядят ваши AMP, просто введите /amp/ в конце URL-адреса вашего поста. Вот пример:

URL-адрес сообщения, не относящегося к АМП

URL-адрес сообщения AMP

Также стоит перепроверить, что ваша AMP-версия поста содержит тег ‘rel=canonical’ , который указывает на соответствующую версию этого поста (т. е. оригинальную версию). Чтобы проверить это, перейдите на определенную страницу AMP и «просмотрите источник» страницы. Вы должны найти строку, которая начинается с ‘<link rel=»canonical»‘. Смотрите пример ниже:

Виола! Хотя ваши AMP будут выглядеть довольно шаблонно без дополнительной стилизации, вы уже готовы к работе.

Добавление Google Analytics (GA)

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

После добавления нового свойства вам нужно будет получить идентификатор отслеживания, перейдя в меню ‘Admin ‘ > ‘Property ‘ > ‘ Property Settings‘. Это будет выглядеть примерно так:

UA-11111111-7

Теперь, когда у вас настроено новое свойство GA, мы можем приступить к интеграции Google Analytics в наши недавно добавленные AMP. Это можно сделать двумя способами:

Метод 1

Установите плагин Glue For Yoast SEO & AMP.

Этот плагин не только позволяет добавить отслеживание GA к вашим AMP, но и дает возможность настроить внешний вид ваших ускоренных мобильных страниц, по крайней мере, в некоторой степени. Как только вы установите плагин, перейдите в его настройки и перейдите на вкладку «Аналитика».

Обратите внимание: типовые скрипты GA не будут работать с фреймворком AMP, поэтому вам придется добавить специфическую для AMP JSON-версию вашего скрипта GA. Просто добавьте следующие строки в поле отслеживания в аналитике Yoast Glue AMP. Убедитесь, что вы заменили стандартный идентификатор отслеживания на свой уникальный.

<amp-analytics type="googleanalytics">.
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" - Замените это на ваш код отслеживания
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

Стоит отметить, что этот метод может сработать не для всех. Чтобы устранить неполадки в установке GA с помощью этого подхода, откройте одну из ваших ускоренных мобильных страниц, перейдите в Google Analytics и проверьте сессии в реальном времени. Если вы видите живой трафик, значит, ваш скрипт GA установлен правильно. В противном случае, если вы не видите ни одной живой сессии, скорее всего, этот метод вам не подошел. В этом случае вам нужно следовать приведенному ниже методу.

Метод 2

Этот подход немного сложнее, но он обязательно сработает. Прежде всего, перейдите на приборную панель WordPress и перейдите в раздел «Плагины». Затем найдите официальный плагин AMP и нажмите «Редактировать».

Выберите amp/templates/single.php из списка файлов плагина в правой части экрана.

Чтобы ваш скрипт заработал, сначала нужно поместить следующий AMP-скрипт между тегами <head> и </head>, как показано на изображении ниже.

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

Затем поместите следующий код отслеживания JSON между тегами <body> и </body>, как показано на изображении ниже.

<amp-analytics type="googleanalytics">.
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" - Замените это на ваш код отслеживания
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

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

<amp-analytics type="googleanalytics">.
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" - Замените это на ваш код отслеживания
},
"triggers": {
"trackClickOnHeader" : {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "ui-components",
"eventAction": "header-click"
}
}
}
}
</script>
</amp-analytics

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

<amp-analytics type="googleanalytics">.
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y" - Замените это на ваш код отслеживания
},
"triggers": {
"trackClickOnTwitterLink" : {
"on": "click",
"selector": "#tweet-link",
"request": "social",
"vars": {
"socialNetwork": "twitter",
"socialAction": "tweet",
"socialTarget": "https://www.examplepetstore.com" - Замените на свой URL-адрес.
}
}
}
}
</script>
</amp-analytics>

Вы также можете добавить другие социальные сети, такие как Facebook и Google+.

Устранение неполадок при интеграции с Google Analytics

Чтобы проверить, правильно ли реализовано отслеживание в GA, откройте любую из AMP-страниц и перейдите на панель Google Analytics. Затем нажмите «В режиме реального времени » > «Обзор».

Если вы видите живой трафик, значит, ваш скрипт работает правильно. Также стоит проверить валидность ваших AMP. Для этого перейдите в Search Console AMP Validator и введите URL-адрес AMP. Инструменты покажут, является ли ваша страница действительной AMP. Если нет, проверьте и исправьте все ошибки.

Заключение

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