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. Говорит Google:

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

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

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

4. Корзина.

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

amp-list должен отправить файл cookie сеанса в заголовке запроса, чтобы сервер мог получить содержимое корзины в сеансе. По этой причине мы используем credentials = ”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-analytics может отслеживать такие события, как:

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

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

7. И многое другое…

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

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

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

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

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

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

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

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

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

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

Успешны ли бренды с помощью AMP для электронной коммерции?

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

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

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

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

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

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