Главная › Новости

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

Опубликовано: 23.08.2018

В этой статье описывается, как начать работу с 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-совместимым можно, установив специализированный плагин.

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

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 .

 

Перевод статьи « AMP For Retailers Is It Worth It » дружной командой проекта Сайтостроение от А до Я