7 способов использовать AMP для электронной коммерции, чтобы увеличить продажи (примеры)

Медленные веб-страницы снижают коэффициент конверсии. Исследования показали, что даже замедление времени загрузки на 100 мс может повлиять на конверсию на веб-странице. В конечном счете, пользователи не хотят ждать. Именно эта истина заставила Google ускорить мобильный Интернет с помощью Accelerated Mobile Pages много лет назад.

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

Использование AMP для электронной коммерции

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

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

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

Так как же AMP это делает? А как ты можешь? Вот некоторые компоненты, от amp-bind до amp-selector и других компонентов, которые вы можете использовать для создания страниц продуктов, страниц категорий, корзин покупок и многого другого.

Полезные компоненты для AMP для электронной коммерции

1. Страницы товаров

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

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

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

Для чего-то более простого пользовательский CSS позволит включить систему звездочек для рейтингов продуктов:

А с помощью элемента amp-social-share вы можете предложить пользователям возможность поделиться продуктом в социальных сетях.

AMP также теперь может поддерживать корзину и кнопку «Добавить в корзину», когда посетители готовы совершить покупку. А если это не так, вы можете использовать элемент amp-sidebar для реализации навигационного меню на всех страницах. Это всего лишь один пример страницы продукта, созданной в AMP:

2. Страница категории продукта

Пользователи часто начинают свое путешествие с главной страницы сайта или страницы категории продукта. Это отличные страницы для AMPlify в первую очередь, как обсуждалось на eBay в их посте.

Эти типы страниц очень хорошо подходят для AMP. Контент, как правило, статичен и направлен на то, чтобы предложить лучшую демонстрацию доступных продуктов.

На страницах категорий продуктов особенно полезны такие элементы, как amp-carousel и amp-bind, которые дают посетителям возможность создавать галереи, в которых они могут просматривать товары и подкатегории. Они также могут включать подписи, которые кратко описывают изображение.

Когда им нужно найти определенный продукт, вы можете использовать amp-form для создания панели поиска, и вы можете показывать эти результаты на другой странице или на той же самой. Вы даже можете автоматически заполнять термины:

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

AMP предлагает этот пример страницы продукта с функцией поиска и организацией продукта:

Вот лучшее представление о странице категории продукта, которую вы можете создать с помощью AMP:

Это исходит от Myntra, крупнейшего интернет-бренда моды в Индии. Когда они инвестировали в AMP, они увидели улучшение скорости на 60% и снижение показателя отказов на 40% на своих самых важных целевых страницах после клика. А с помощью amp-bind им не пришлось идти на компромисс с пользовательским интерфейсом. Посетители могли сортировать и фильтровать продукты и размеры, как на любой странице без AMP. Они получили отличный пользовательский опыт в мгновение ока.

3. Отображение персонализированного контента

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

Теперь, с помощью компонента amp-access, маркетологи могут отображать блоки контента в зависимости от статуса пользователя, например, вошли ли они в систему или нет. Для отображения персонализированного контента или рекомендаций в карусели пользователи могут воспользоваться amp-list. Говорит Гугл:

Поведение amp-mustache по умолчанию для рендеринга данных amp-list заключается в циклическом включении объектов элементов; добавление amp-carousel внутри шаблона заставит шаблон отображать несколько каруселей; один из способов обойти это — заставить конечную точку amp-list возвращать одну запись в элементах.

Они также могут использовать amp-list для возврата персонализированного контента пользователю с помощью файлов cookie (используя атрибут учетные данные = «include») или идентификатор клиента AMP:

По словам AMP, еще один способ отображения персонализированного контента — использовать amp-bind с конечной точкой JSON. Это особенно полезно, когда данные необходимо обновить после взаимодействия с пользователем, например, отель, отображающий наличие номеров после бронирования.

4. Корзина

Поддержка корзины покупок теперь встроена в AMP. Для его создания Google рекомендует использовать amp-list, который может отображать пользователю динамический список того, что он добавил в него:

amp-list должен отправить файл cookie сеанса в заголовке запроса, чтобы сервер мог получить содержимое корзины в сеансе. По этой причине мы используем учетные данные = «include» в качестве дополнительного атрибута.

При таком расположении каждая строка списка может содержать персонализированные заказы пользователя. И каждый элемент в этом списке будет иметь кнопку для удаления элементов из корзины. Кроме того, поддержка добавления этих элементов так же, как показано в этой демонстрации.

5. Процесс оформления заказа и платежи

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

В Chrome вы можете использовать API запроса платежей. Это позволит пользователям оформить заказ через диалоговое окно в своем браузере. Вот быстрый пример.

Другой вариант — создать процесс оформления заказа внутри AMP с помощью amp-form. Если для оплаты продукта требуется логин, вы можете комбинировать эти элементы с amp-access.

И если вы предпочитаете проверять пользователей на своем веб-сайте, это все еще вариант, при условии, что вы можете быстро и беспрепятственно перевести посетителей на процесс оплаты вашего веб-сайта. Вот пример с WompMobile:

6. Аналитика

Измеряйте эффективность использования AMP для электронной коммерции с помощью amp-analytics. Этот элемент поддерживает как сторонние, так и собственные инструменты аналитики. Сюда входят популярные решения, такие как Google Analytics, Adobe Analytics, Nielsen, Quantcast и другие.

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

• Вид страницы
• Якорные клики
• Таймер
• Прокрутка
• Изменения карусели AMP
• Форма

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

7. И еще…

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

Другой вариант — обратиться за поддержкой в ​​стороннее приложение, например, созданное для пользователей Shopify. Подобные приложения позволяют использовать AMP с плагинами и расширениями, что позволяет пользователям легко запускать быстро загружаемый сайт.

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

Существуют аналогичные плагины для пользователей WordPress, а также для пользователей Magento.

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

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

Страница продукта Newegg

Страница категории 1-800-Цветы

Страница продукта Eventbrite

Страница категории продуктов Lancome

Удалось ли брендам добиться успеха с AMP для электронной коммерции?

По данным Forrester, AMP-сайт со значительным трафиком может ожидать 20-процентного увеличения коэффициента конверсии продаж на AMP-страницах, 10-процентного увеличения трафика AMP-сайта по сравнению с прошлым годом и 60-процентного увеличения количества страниц в расчете на одну страницу. посещать. Итак, как обстоят дела у реальных брендов?

AMP для пользователей электронной коммерции в цифрах

• Advance Create, крупнейший в Японии веб-сайт сравнения страховых услуг, сократил время загрузки страницы на 61,2% и цену за действие на 36,8%, а коэффициент конверсии увеличился на 28,9%.
• Event Tickets Center увеличил коэффициент конверсии на 20 % и увеличил время пребывания на сайте на 13 %, а показатель отказов снизился на 10 %.
• Благодаря Google Ads DiscoverCarHire.com количество посещений с мобильных устройств увеличилось на 22%, а конверсий с мобильных устройств — на 29%. Они также увеличили мобильный органический трафик сайта на 73% с помощью AMP.
• Клиенты Fastcommerce отметили рост конверсий на 15 % на 2 миллионных страницах по сравнению с AMP-страницами и страницами без AMP.
• WompMobile продемонстрировал увеличение коэффициента конверсии на 105% и снижение показателя отказов на 31% на страницах электронной коммерции AMP по сравнению со страницами без AMP.
• Wego.com увеличил коэффициент конверсии своих партнеров на 95% и увеличил конверсию рекламы в 3 раза после создания AMP-версий ключевых целевых страниц.
• В период с января по март 2017 года в Greenweez половина мобильного органического трафика приходилась на AMP. Они также увеличили коэффициент мобильной конверсии на 80 % и снизили затраты на привлечение мобильных устройств на 66 %.

Повысьте коэффициент конверсии с помощью AMP для электронной коммерции

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

Как Shopify, WordPress и Magento поддерживают приложения AMP, так и Instapage. Это означает, что с помощью конструктора Instapage вы можете создавать целевые страницы AMP после клика так же интуитивно, как и любую другую страницу. Узнайте, как сделать это в масштабе, с помощью демонстрации Instapage.