23 компонента AMP, о которых вы могли не знать, но которые можно добавить на страницы AMP

То, что блестит, не всегда золото… или нет?

AMP был создан, чтобы сделать мобильный Интернет быстрее, но для этого были введены ограничения, такие как ограничения, касающиеся пользовательского кода, HTML/CSS и JavaScript. Ограничение таблицы стилей CSS в 75 КБ свидетельствует об этом, потому что любая веб-страница, превышающая это ограничение, не пройдет проверку AMP.

Даже с его ограничениями цифровые маркетологи могут настраивать страницы со многими компонентами AMP. Эти специализированные HTML-теги действуют так же, как и традиционные HTML-теги (с открывающими и закрывающими тегами, атрибутами и некоторыми возможностями стилей CSS), и их легко идентифицировать, так как они всегда начинаются с префикса amp-.

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

(Теперь Instapage предлагает пользовательский код AMP для включения широкого спектра компонентов. Подробную информацию см. здесь.)

23 компонента AMP для настройки ваших страниц

1. Аккордеон

Добавление amp-accordion на вашу страницу дает представление о содержании и позволяет посетителям переходить к определенному разделу страницы. Каждый из непосредственных «потомков» аккордеона AMP считается разделом в аккордеоне (каждый раздел должен содержать только два прямых «потомка»), а первый потомок раздела считается заголовком раздела. Щелчок по заголовку развернет или свернет раздел:

Два дополнительных параметра для компонента аккордеона AMP — это вложенные аккордеоны (для вложения или сложения нескольких аккордеонов друг в друга) и автоматически сворачивающиеся аккордеоны (которые позволяют открывать только один развернутый раздел за раз).

2. Аудио

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

Хотя элементы управления звуком, показанные выше (воспроизведение/пауза, звук/отключение звука и загрузка), добавляются по умолчанию, кнопку загрузки справа можно отключить:

3. Отслеживание звонков

AMP-коллтрекинг просто заменяет статические телефонные номера телефонными номерами, предназначенными для аналитики коллтрекинга.

4. Карусель

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

Вы можете использовать type="carousel" для отображения списка изображений в виде непрерывной полосы:

Или введите = «слайды», чтобы отобразить список изображений в виде слайдов:

Вы также можете выбрать атрибут autoplay (только type=slides), который автоматически прокручивает слайды с 5-секундными интервалами без вмешательства пользователя.

5. Фейсбук

Компонент AMP Facebook встраивает сообщения, изображения и видео Facebook в страницы AMP, требуя только URL-адрес Facebook.

6. Комментарии в Facebook

AMP-facebook-comments позволяет встраивать комментарии Facebook на страницы AMP.

7. Facebook нравится

AMP-facebook-like позволяет встраивать кнопку «Нравится» Facebook на страницы AMP.

8. Страница в Facebook

AMP-facebook-page встраивает страницу Facebook в файлы AMP, требуя только href страницы Facebook. Компонент страницы AMP Facebook даже позволяет отображать разные вкладки на странице Facebook. Например, вы можете отобразить вкладку временной шкалы и событий, указав data-tabs="timeline, events:"

9. Шрифт

Компонент шрифта AMP позволяет создавать страницы с пользовательскими шрифтами в теле или заголовке документа:

Если выбранный шрифт не поддерживается, он отображается как обычный красный текст:

10. Форма

Компонент формы AMP позволяет создавать страницы AMP с подробными формами захвата лидов. Расширение также позволяет вам предоставлять ответы об успехах и ошибках со специальными атрибутами submit-success и submit-error:

11. Гео

Георасширение AMP позволяет размещать небольшие разделы контента на основе приблизительного местоположения пользователя (только на уровне страны, аналогично уровню кода страны ISO). Он также предлагает возможность группировать разные местоположения вместе, что упрощает одновременное применение атрибутов к нескольким географическим регионам.

12. iFrame

AMP-iframe встраивает контент в страницы AMP через iFrame, что идеально подходит для отображения контента, который еще не поддерживается AMP (Vimeo, Giphy, Google Maps и т. д.).

AMP-iframe позволяет изменять размер iFrame во время выполнения — либо при загрузке страницы (встроенный iFrame сам изменит размер до 200x200 пикселей), либо при взаимодействии с пользователем (нажатие кнопки изменит размер iFrame до 300x300 пикселей). Единственным ограничением для этого компонента AMP является то, что он должен находиться либо на расстоянии 600 пикселей от верха, либо не в пределах первых 75% области просмотра при прокрутке вверх — в зависимости от того, что меньше.

13. Лайтбокс изображения

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

14. Инстаграм

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

15. Галерея лайтбоксов

AMP-lightbox-gallery обеспечивает «лайтбокс» для других компонентов AMP, таких как amp-img и amp-carousel (в настоящее время поддерживаются только изображения). Когда посетитель взаимодействует с элементом AMP, компонент пользовательского интерфейса расширяется, чтобы заполнить область просмотра, пока он снова не закроет его. Если ваша страница содержит несколько элементов, просто добавьте атрибут лайтбокса к каждому изображению, которое вы хотите, чтобы пользователи просматривали в лайтбоксе.

16. Пинтерест

С помощью amp-pinterest добавление кнопки «Закрепить» на вашу страницу позволяет посетителям закреплять различный контент с вашего сайта:

Чтобы добавить кнопку «Закрепить», вам понадобятся следующие атрибуты:

• data-url: URL-адрес для совместного использования
• data-media: URL-адрес изображения для закрепления
• data-description: описание по умолчанию, которое отображается в пин-коде.

Или вы можете встроить полный виджет Пина:

В этом случае атрибут data-url должен содержать полный URL-адрес ресурса Pinterest.

17. Пиксель

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

18. Реддит

Посты и комментарии Reddit могут быть включены на страницы AMP с помощью amp-reddit. Компонент AMP Reddit требует, чтобы вы указали между публикацией или комментарием и источником встраивания. При встраивании комментариев включите родительский комментарий, указав data-embedparent="true", и включите обновленные комментарии, указав data-embedlive="true".

19. Саундклауд

Посетители могут воспроизводить треки SoundCloud на ваших страницах AMP, когда вы используете компонент AMP SoundCloud (все, что вам нужно для amp-soundcloud, — это идентификатор трека, найденный в коде встраивания SoundCloud):

Вы даже можете внедрить полный плейлист SoundCloud с playlistid (также находится в коде встраивания SoundCloud), заменив data-trackid на data-playlistid:

20. Твиттер

Подобно другим компонентам AMP для социальных сетей, amp-twitter встраивает твиты в ваши AMP-страницы:

Если изображение не требуется или вы пытаетесь сэкономить место на своей странице, вы можете деактивировать карточки Твиттера, используя data-cards=”hidden:”

21. Кнопка «Избранное»

Фреймворк AMP позволяет маркетологам добавлять кнопку «Избранное/Нравится/Добавить в закладки». Он также предлагает более сложную версию, которая включает в себя счетчик избранного и обновляет этот номер при нажатии кнопки:

22. Платежи в AMP

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

Однако, поскольку AMP ограничивает JavaScript, источник iFrame также должен обрабатывать экземпляры, в которых PaymentRequest недоступен. Другие варианты включают в себя:

• Замена кнопки «Купить сейчас» на кнопку «Добавить в корзину»
• Перенаправление пользователей на стандартную форму оформления заказа

23. Звездный рейтинг

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

Какие компоненты AMP вы добавите на свою страницу?

Даже с учетом ограничений AMP создание красивой настраиваемой страницы вполне возможно. Вышеуказанные 23 компонента — это лишь некоторые из дополнений, которые вы можете внести на свои страницы AMP, чтобы максимизировать конверсию.

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