AMP для ритейлеров: Стоит ли оно того?

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

AMP для чисто мобильного контента

Формат AMP (Accelerated Mobile Pages) недавно отпраздновал свой годичный юбилей. Это проект с открытым исходным кодом, поддерживаемый Google, который предназначен для сокращения времени загрузки страниц на мобильных устройствах. AMP-страницы похожи на HTML-страницы, за некоторыми исключениями: разнятся некоторые теги, введены новые правила, а также существует множество ограничений на использование JavaScript и CSS.

AMP-страницы могут отображаться со специальной каруселью в результатах мобильного поиска Google.

AMP-страницы отображаются в результатах мобильного поиска Google со специальной каруселью.

Стоит ли того AMP?

На сегодняшний день в индексе Google содержится более 150 миллионов AMP-страниц, и каждую неделю добавляется более 4 миллионов. AMP-страницы хорошо отображаются на мобильных устройствах, планшетах и ​​стационарных компьютерах.

eBay был одним из первых брендов, который использовал AMP. К июлю 2016 года форматом AMP было охвачено более 8 миллионов страниц товаров сервиса.

Аргументы в пользу AMP

Конверсии, конверсии, конверсии

Google сообщает, что AMP сокращает время загрузки страницы на мобильных устройствах на 15 - 85%. Многие покупатели отправятся на сайт конкурента, если ваш загружается слишком медленно. Затянувшееся время загрузки означает потерю 40% посетителей.

Видимость - это ключевой фактор

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

"Оптимизировано под мобильные устройства" - в прошлом для Google

Пометка "оптимизировано под мобильные устройства" была представлена Google в конце 2014 года как попытка поощрения сайтов, обеспечивающих хороший мобильный опыт пользователей. После широкого внедрения адаптивного дизайна эта пометка постепенно уходит в историю, освобождая место пометке "AMP".

Вот как в настоящее время в мобильном поиске Google отображаются AMP-результаты.

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

AMP: Потому что просто "оптимизировано под мобильные устройства" больше недостаточно

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

AMP для электронной коммерции

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

Преимущества для интернет-магазинов

Теперь AMP-страницы могут обрабатывать аналитику электронной коммерции благодаря переменной amp-analytics. С помощью этой переменной становятся доступны статистические данные для анализа эффективности AMP-страниц с точки зрения трафика, выручки, CTR и коэффициента отказов. Согласно публичной дорожной карте в планах проекта AMP значится улучшение функции мобильных платежей после добавления доступа на основе учетных данных.

В рамках AMP поддерживаются страницы товаров и списков. Имейте в виду, что 40% пользователей откажутся от использования сайта, если загрузка займет более 3 секунд. Более того, 75% пользователей предпочтут посетить сайт конкурентов, вместо того, чтобы не иметь дело с медленно загружающейся страницей.

Недостатки

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

Как eBay реализует AMP-страницы

AMP использует упрощенные JavaScript и CSS. Как следствие, отслеживание и реклама на AMP-страницах менее функциональны, чем на традиционных HTML-страницах. При этом главный недостаток заключается в том, что эффективное внедрение AMP-страниц требует времени и усилий. Код является проприетарным, сильно ограничивается JavaScript (например, не допускается iframe), а также существуют ограничения для CSS (некоторые свойства полностью запрещены).

Как разработать AMP-страницы для сайта электронной коммерции

Чтобы убедиться, что ваш сайт соответствует требованиям AMP, ознакомьтесь с инструкциями, содержащимися в документации проекта AMP. Имейте в виду, что AMP-страницы должны быть адаптивными или мобильными. Лучшей практикой является тестирование реализации AMP на текущей мобильной версии сайта.

Не нужно делать весь сайт AMP-совместимым. Сначала измените простые страницы со статичным контентом (страницы товаров), а затем переходите к другим. Таким образом, вы сможете сделать определенные страницы заметными в результатах поиска. При этом вам не придется тратить усилия на перестройку страниц, для которых требуются расширенные функции, еще не поддерживаемые AMP.

Если сайт создан на основе популярной CMS, то сделать его AMP-совместимым можно, установив специализированный плагин.

• Magento

Расширение AMP от Plum Rocket автоматически генерирует AMP-версии главной страницы, страниц категорий, страниц товаров и страниц блога. Интересной особенностью плагина является то, что главную AMP-страницу вы сможете редактировать через back-end Magento.

• WordPress

AMP для WP - это плагин, который позволяет создавать пользовательские AMP-проекты без необходимости создания исходного кода. Вы можете настроить логотип, шапку, подвал сайта, изображения и многое другое. Данный плагин совместим с WooCommerce и Google AdSense. Он генерирует AMP-версии главной страницы, записей, опубликованных в блоге, страниц интернет-магазина, созданного с помощью WooCommerce, а также товаров и категорий.

Пошаговое руководство по реализации AMP на сайте электронной коммерции

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

• описания товаров;
• отзывы;
• снимки продукта;
• навигация.

Весь путь до продажи не может быть на 100% совместим с AMP, поэтому придется реализовать шлюз для оформления заказа и завершения покупки на обычной странице без использования AMP.

1. Просмотр товаров (главная страница и страницы категорий)

Пользователи часто начинают свое посещение с главной страницы сайта или со страницы категории товаров. Они являются отличным вариантом для реализации AMP. Это подтверждает опыт eBay, который сделал многие из своих страниц категорий AMP-совместимыми.

Как правило, страницы категорий являются статичными, и на них демонстрируются различные товары. Функция amp-carousel предлагает оптимизированный для мобильных устройств способ просмотра других товаров. Эти товары могут быть объединены в подкатегории, которые соответствуют потребностям конкретного пользователя. Вы можете просмотреть примеры кода для создания страницы товара на AMP by Example.

Главная страница интернет-магазина с AMP

2. Переход на страницу товара

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

AMP-страница товара

AMP-страница товара может включать в себя следующее:

• большой баннер (изображение или видео) с использованием элементов amp-carousel и amp-video;
• разделы "Подробнее", в которых используется тег amp-accordion и предусмотрена возможность поделиться ссылкой на товар через элемент amp-social-share;
• меню навигации (на всех страницах), используя amp-sidebar.

3. Просмотр связанных товаров

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

• Опубликовав статичный список связанных продуктов.
• Генерируя список на лету с помощью amp-list, чтобы запустить CORS-запрос к конечной точке JSON. Она предоставляет список связанных товаров. Эти товары могут быть выведены в клиенте через шаблон amp-mustache. Контент динамически создается серверной стороной для каждого пользовательского запроса.

4. Персонализация

Чтобы реализовать персонализацию на основе AMP, можно использовать компонент amp-access для отображения различных блоков контента в соответствии с состоянием пользователя. Для этого можно использовать тот же метод, что и при работе с компонентом amp-list: отправлять запрос в конечной точке JSON, а затем представлять данные в шаблоне amp-assache. Вы можете отслеживать пользователей, используя компонент amp-analytics; AMP поддерживает несколько провайдеров аналитики.

Примечание: Если вы видите в данных Google Analytics реферала cdn.ampproject.org, это нормально для AMP-страниц; cdn.ampproject.org - это кэш, который принадлежит Google.

AMP теперь поддерживает аналитические инструменты Adobe и Google. Через атрибут type можно быстро настроить в код отслеживания. Ниже приведен пример type для Google Analytics:

<amp-analytics type="googlenalytics">

И вот type для распространенных провайдеров веб-аналитики:

• Adobe:adobeanalytics.
• Google Analytics:googleanalytics.
• Segment: segment.
• Webtrekk:webtrekk.
• Яндекс.Метрика:metrika.

Google Tag Manager еще на одну ступень улучшил поддержку AMP с помощью контейнеров AMP. Теперь можно создать для AMP-страниц контейнер.

Контейнер AMP из Google Tag Manager

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

Параметры отслеживания AMP в Google Tag Manager

Если не используете Google Tag Manager, то можете реализовать сервис управления тегами одним из двух способов:

• Конечная точка

Работает как дополнительная конечная точка для amp-analytics и позволяет управлять маркетингом через back-end.

• Конфигурационный

Управление тегами через динамически созданный конфигурационный файл JSON, уникальный для каждого издателя.

Конфигурационный подход заключается в создании уникальной конфигурации для amp-analytics, которая специфична для каждого издателя и включает все совместимые с конкретным издателем пакеты аналитики. Издатель может настроить синтаксис следующим образом:

<amp-analytics config="https://your-dream-tag-manager.example.com/user-id.json">

Многие интернет-ритейлеры используют объявления или показ сопутствующих товаров на своем сайте для увеличения доходов. Формат AMP позволяет показывать объявления с помощью <amp-ad> и <amp-embed>. В документации достаточно ясно описано, как реализовать объявления.

Хотя iframes в AMP не допускаются, поддерживается два типа встраиваемых объявлений с помощью <amp-embed>: Taboola и Zergnet.

5. Поддержка продаж

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

Если ваш сайт является прогрессивным веб-приложением, то amp-install-serviceworker - идеальный способ связать оба типа веб-страниц в пути клиента на сайте. Он позволяет AMP-странице устанавливать service worker в вашем домене, независимо от того, где пользователь просматривает AMP-страницу. Это означает, что кэширование контента из веб-приложения может быть выполнено превентивно, поскольку необходимый контент уже предварительно кэширован.

6. Учитывайте кэширование

AMP позволяет платформам, связанным с AMP-трафиком, использовать кэширование и предварительную передачу, чтобы быстро загружать веб-страницы. Помните об этом, анализируя трафик и взаимодействия, потому что вы можете увидеть меньшие показатели органического трафика (вот почему мы упомянули об cdn.ampproject.org в данных Google Analytics). Остальной трафик, скорее всего, будет отображаться через прокси-версии страниц, обслуживаемых кешами AMP.

Инструменты для проверки AMP-страниц

• AMP Validator.
• В Google Search Console проблемы, связанные с AMP, отображаются в разделе «Вид в поиске»:

Валидация AMP в Google Search Console

Ресурсы по данной теме:

• Центральный справочный форум для веб-мастеров
• GitHub
• Вы даже можете самостоятельно разработать компонент.

Эксперименты с AMP

eBay делится своим опытом реализации AMP на собственной платформе электронной коммерции:

• Лучшие практики

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

• Меньше разного кода

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

• Список компонентов AMP

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

• Внутренний поиск

Добавление в систему AMP внутреннего поиска является желанной функцией для многих интернет-магазинов.

Но есть несколько сложных моментов:

• Компоненты инфраструктуры

Такие вещи, как глобальные «шапки» и подвалы сайта, а также модули отслеживания, используют JavaScript, который не работает с AMP.

• Отслеживание

AMP обеспечивает отслеживание поведения пользователей через собственный компонент amp-analytics. Он может быть сконфигурирован различными способами, но его возможностей по-прежнему недостаточно, особенно для отслеживания поведения пользователей.

Вопросы, связанные с SEO

Многие считают данную технологию перспективным средством увеличения видимости для мобильных пользователей. Вот несколько аспектов, связанных с SEO, которые помогут получить максимальную отдачу от AMP:

• Размещайте AMP-страницы в том же домене, что и другие версии страниц.
• Google AMP Cache - это сеть доставки контента на основе прокси-серверов для предоставления всех валидных AMP-документов. Она извлекает HTML страницы, кэширует их и автоматически повышает производительность страниц.
• AMP-страница предоставляется пользователю из Google AMP Cache. У нее будет другой URL-адрес, чтобы избежать проблем с дублированным контентом. Если у вас есть две версии страниц (AMP и обычные), используйте на AMP-странице тег <link rel="canonical" href="[canonical URL]" /> и <link rel="amphtml" href="[AMP URL]" /> на обычной странице. Для отдельной AMP-страницы укажите ее как каноническую версию: <link rel="canonical" href="https://www.example.com/url/to/amp-document.html" />.
• Одним из распространенных шаблонов URL-адресов является добавление к пути /amp/.

Заключение

Сайт электронной коммерции не может быть на 100% совместим с AMP. Но реализовав компоненты AMP в интернет-магазине сейчас, вы получите значительные преимущества по сравнению с конкурентами.

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

Ресурсы

• AMP (официальный сайт).
• «Дорожная карта», AMP.