Более быстрые целевые страницы обычно приводят к большему количеству конверсий, а AMP — отличный способ создать привлекательные целевые страницы Google Рекламы, которые загружаются быстрее. amp.dev предоставляет веб-разработчикам ресурсы, необходимые для создания привлекательных и высокопроизводительных страниц. В этом пошаговом руководстве описывается, как использовать Google Ads и другие рекламные технологии на AMP-страницах.
Шаг 1. Создайте и проверьте AMP-страницы.
Создавайте AMP-страницы
Чтобы узнать, как создать базовую страницу AMP, начните с руководства «Создайте свою первую страницу AMP» проекта AMP. Дополнительные практические пошаговые инструкции можно найти в руководствах «Преобразование HTML в AMP» и «Добавление расширенных функций AMP» . Примеры кода и шаблоны компонентов AMP можно найти в разделах «Примеры веб-сайтов AMP» и «Шаблоны AMP» .
В приведенном ниже списке описаны некоторые компоненты, используемые на страницах AMP. Для справки обратитесь к полному списку компонентов.
- amp-bind : добавляет пользовательскую интерактивность с отслеживанием состояния на основе событий, подобных JavaScript.
- amp-form : создание целевых страниц, требующих ввода данных от пользователя.
- amp-list : динамическое получение контента из конечной точки CORS JSON.
- amp-carousel : Карусель изображений для прокрутки галереи изображений.
- amp-lightbox : отображать компонент в полноэкранном режиме при взаимодействии с ним.
- amp-call-tracking Динамически заменяет номер телефона в гиперссылке для отслеживания звонков.
- amp-mustache : позволяет выполнять рендеринг с помощью Mustache.js .
- amp-date-picker : предоставляет виджет для выбора дат. Средство выбора даты может отображаться как наложение относительно полей ввода или как виджет статического календаря.
Проверка AMP-страниц
Во время разработки вам необходимо убедиться, что ваши AMP-страницы действительны. AMP предлагает несколько различных методов проверки ваших документов. Самый распространенный способ проверки AMP-страницы — использование веб-валидатора или инструмента Google для веб-мастеров . Вы также можете использовать плагин браузера Chrome и консоль разработчика или интегрировать npm-модуль amphtml-validator в свою сборку.
Вы также можете использовать AMPBench , веб-приложение и сервис с открытым исходным кодом для проверки и отладки проблем, связанных с развертыванием страниц AMP.
Для получения поддержки по тестированию AMP посетите страницу получения поддержки проекта AMP.
Шаг 2. Настройте AMP для отслеживания конверсий и аналитики.
Отслеживание конверсий Google Рекламы
Используйте компонент amp-analytics для отслеживания конверсий Google Рекламы. Следуйте инструкциям в разделе «Настройка отслеживания конверсий Google Рекламы для целевых страниц AMP» , чтобы узнать, как это настроить.
Гугл Аналитика
Google Analytics — одно из аналитических решений, поддерживаемых компанией amp-analytics . Чтобы обеспечить унификацию сеансов на страницах AMP и не AMP, выполните действия, описанные в разделе «Настройка объединения сеансов Google Analytics для AMP» .
Диспетчер тегов Google
Компонент amp-analytics имеет встроенную поддержку Google Tag Manager . Помимо конверсий Google Рекламы, вы можете использовать Диспетчер тегов Google для добавления ремаркетинга, DoubleClick Floodlight, Google Universal Analytics и аналогичных продуктов для измерения. См. полный список совместимых тегов .
Adobe Analytics (ранее известный как Omniture)
Adobe Analytics предлагает два метода реализации своего решения для отслеживания производительности веб-сайта с помощью компонента amp-analytics : реализация iframe ( adobeanalytics_nativeConfig ) и реализация без iframe ( adobeanalytics ). Прочтите о плюсах и минусах и деталях реализации каждого подхода .
Интеграция других распространенных технологий, связанных с Google Рекламой.
Вы можете использовать компонент amp-analytics для отслеживания действий и событий пользователей. Аналитика AMP имеет встроенную поддержку от более чем 40 поставщиков аналитики. Платформа является гибкой и позволяет измерять и активировать URL-адреса с использованием пользовательских конфигураций для отправки аналитической информации на ваши собственные серверы или поставщикам, где встроенная поддержка AMP недоступна. Если вы используете технологию, которая в настоящее время не поддерживается, попросите своего поставщика добавить поддержку .
Аналитика AMP также позволяет гибко заменять переменные; подробности см. в документации по замене переменных .
Шаг 3. Включите показ AMP в интерфейсе Google Рекламы.
Хотя страницы AMP в Google Поиске автоматически обнаруживаются по ссылке с ваших страниц , рекламодатели должны явно ввести URL-адрес страницы AMP в Google Реклама. Прочтите «Как использовать AMP с Google Рекламой», чтобы получить подробную информацию о настройке URL-адресов AMP в пользовательском интерфейсе Google Рекламы.
В настоящее время кэширование доступно для текстовых объявлений на страницах результатов поиска Google, отображаемых в большинстве основных браузеров, включая Android Chrome, приложение Android Google Search и Mobile Safari. В ближайшие месяцы мы расширим охват.
Если вы хотите проверить, как выглядит страница AMP при доставке из кеша Google AMP в средстве просмотра поиска Google, введите свою статью AMP в инструмент тестирования AMP и нажмите ссылку «Предварительный просмотр» .
Кроме того, если вы хотите направлять трафик Google Рекламы на свою целевую страницу AMP, но не хотите, чтобы они появлялись в обычных результатах поиска, добавьте директивы Disallow для соответствующих страниц AMP в robots.txt , как и для любого обычного веб-сайта. страница.
Обновление AMP-контента на целевых страницах
Когда пользователь запрашивает документ AMP из кэша Google AMP, кэш автоматически запрашивает обновления, чтобы иметь возможность предоставлять свежий контент следующему пользователю после кэширования контента. Благодаря этой модели обновления документов AMP распространяются автоматически и быстро; немногие пользователи заметят необновленную версию после вашего обновления. Кроме того, при необходимости API обновления кэша можно использовать для обновления или удаления контента из кэша AMP.
Проект AMP каждый день добавляет новые функции и компоненты. Если вы обнаружите недостающую функциональность, вы можете внести свой вклад или запросить ее добавление, открыв задачу на GitHub .
Неверная обработка страницы AMP
Когда страница становится недействительной, кэш AMP обнаруживает это в течение нескольких запросов и начинает перенаправление на источник, обслуживаемый страницей AMP. Возврат к использованию кеша AMP может занять 1–2 дня.