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

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

AMP для чисто мобильного содержимого

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

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

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

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 «.

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

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

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

AMP: Так как просто «оптимизировано под мобильные устройства» больше недостаточно

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

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

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

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

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

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

Недостатки

Есть пару проблем, связанных с качеством пользовательского опыта, предлагаемого AMP-страницами электронной коммерции. Поскольку для них пока недоступны некоторые торговые возможности: панели поиска, возможности входа и регистрации. Но функционал 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 для ритейлеров: Следует ли оно того?

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

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

Следующий шаг посетителя заключается в том, чтобы найти интересный продукт и кликнуть по нему. В потоке AMP это приведет посетителя на 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 для ритейлеров: Следует ли оно того?

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

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

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 для ритейлеров: Следует ли оно того?

Валидация 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 .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *