Легкие страницы на базе AMP: как «Ситилинк» увеличил конверсию в покупку из органической выдачи Google

Начало. Новая мобильная стратегия

«Ситилинк» – одна из крупнейших сетей магазинов электроники и бытовой техники. В продуктовом портфеле порядка 800 мировых брендов и 70 000 наименований товаров.

Перед командой в 2019 году стояли важные задачи:

  • Увеличить конверсию в покупку из органической выдачи Google (новые пользователи), согласно целевым значениям
  • Ускорить загрузку страниц сайта
  • Обеспечить возможность использования полного функционала сайта на мобильных устройствах

В рамках новой стратегии продвижения под мобильные устройства было решено отказаться от отдельной мобильной версии на базе SPA (Single Page Application) в пользу адаптивного (responsive) решения — это должно было увеличить охват страниц сайта для пользователей, которые заходят в интернет-магазин с мобильных устройств.

<p>Скриншоты старого сайта SPA и адаптивной версии (текущей)<span></span></p>

Скриншоты старого сайта SPA и адаптивной версии (текущей)

Отдельная мобильная версия на базе SPA поддерживала только часть страниц десктопного сайта и не давала возможность оптимизировать страницы под SEO. К тому же индексирование в поиске Google с 1 июля 2019 – с приоритетом мобильного контента.

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

AMP. Скорость и простота

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

На случай, если кому-то понадобятся основания для доказательства влияния скорости на конверсии (например, для внутреннего бизнес-кейса), вот немного исследований:

Технология позволяет на базе специальных AMP-компонентов создавать облегчённые версии страниц сайта (некий superset HTML + JS). Из основных плюсов стоит отметить, например, то, что валидные AMP-страницы кэшируются Google в органической выдаче и в поисковой рекламе, благодаря чему скорость загрузки становится практически моментальной.

Фреймворк уже был знаком нашей IT-команде, так как «Ситилинк» стал одним из первых игроков российского рынка электронной коммерции, освоившим AMP. С технологией команда познакомилась на AMP-хакатоне Google в 2017 году (одном из первых в своём роде) и создала пробный набор лендингов буквально за 2 недели. На тот момент это был просто набор статических лендингов с динамической подгрузкой контента с помощью компонентов , который не соответствовал по функционалу десктопного или даже мобильного сайта (напомним, что его функционал не был полноценным в сравнении с десктопным), и требовал существенной доработки.

Паритет по ключевому функционалу между AMP и основным веб-сайтом очень важен (например, если у вас есть меню — «бургер» на обычном веб-сайте или поиск, они должны быть и на AMP) — это важно не только в плане дизайна (у пользователя не должно складываться впечатление, что он пользуется урезанной или «облегченной» версией сайта), но и из соображений непрерывности customer journey в рамках сайта.

Соответственно, вслед за запуском адаптивного веб-сайта с новым дизайном (и, как следствие, отказа от использования отдельной мобильной версии), AMP также был перезапущен и существенно доработан – как в плане дизайна, так и в плане функционала:

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

Чего мы достигли?

Все задачи, которые мы поставили себе в 2019 году были выполнены:

  • +33% Коэффициент конверсии (CR) на AMP vs. мобильные страницы (новые пользователи)
  • +11% Средняя длительность сеанса
  • +173% Страниц/сеанс

Подводные камни?

Да, AMP стал для нас отличным решением, обеспечившим великолепные результаты, но были и некоторые подводные камни (о которых, к слову, нас предупреждали Google, но были и такие, о которых мы узнали в процессе реализации). Те, кто уже когда-либо внедрял AMP, наверное, уже понимают, к чему подвожу... да-да, аналитика.

В конце 2018 в WebKit появился ITP 2.0, привнесший новые правила обработки файлов cookie 3P-доменами, а за WebKit’ом вскоре последовали все ключевые игроки браузерного рынка, ужесточив уже свои правила обработки cookie - фактически, для AMP это означало, что сессии между кэшом Google, из которого загружались открытые в поисковой выдаче Google AMP-страницы, и веб-сайтом, переставали “склеиваться” в аналитике - для того, чтобы обеспечить непрерывность сессий, в AMP появился так называемый AMP Linker, но из-за сложности нашей конфигурации аналитики (не обошлось и без некоторого количества legacy-кода скриптов Measurement Protocol’а, мешавших отправке корректных Client ID) нам понадобилось около двух дополнительных месяцев на полноценную настройку и внедрение.

Здесь могу добавить спасибо специалистам Google, которые оперативно переработали опыт работы с AMP Linker’ом в подробную инструкцию по объединению сессий из AMP в GA и GTM -- теперь достаточно просто пошагово ей следовать, и у вас все получится :)

Вот и все, если вы используете GA в качестве основного аналитического инструмента, то сегменты AMP нужно строить по Data Source: AMP, но это уже совсем другая история… :)

22
8 комментариев

Все можно увеличить :). Найдите дополнительные точки входа, у вас очень большой потенциал по расширению и увеличению трафика в целом.

1
Ответить

Одни замысловатые слова никаких фактов

Ответить

Этого факта вам не достаточно?

+33% Коэффициент конверсии (CR) на AMP vs. мобильные страницы (новые пользователи)
+11% Средняя длительность сеанса
+173% Страниц/сеанс

1
Ответить

В коде нет ссылок на АМП версию сайта. Посмотрите без плагинов, так же есть компании которые делают AMP для сайтов. Например вот эти ребята делают https://eski.mobi/services/amp/

Ответить

Согласен вода водой

Ответить