Расширенные концепции ускоренных мобильных страниц

1. Обзор

Этот практический урок является продолжением тем, рассмотренных в курсе «Основы Accelerated Mobile Pages». Перед началом этого урока вы должны были уже выполнить предыдущий практический урок или, по крайней мере, иметь базовое понимание основных концепций AMP.

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

Что вы узнаете

• Показ рекламы с помощью AMP-рекламы.
• Встраивайте видеоролики с YouTube, карточки Twitter и адаптивные текстовые элементы.
• Создавайте карусели с изображениями и комбинациями контента, используя amp-carousel.
• Простые схемы отслеживания с помощью AMP-аналитики.
• Способы добавления навигации по сайту на вашу страницу.
• Как шрифты работают с AMP.

Что вам понадобится

• Пример кода
• Chrome (или аналогичный браузер, способный проверять консоль JavaScript)
• Python (желательно версии 2.7) или расширение Chrome 200 OK Web Server.
• Редактор кода (например, Atom, Sublime, Notepad++)

2. Получите пример кода.

Вы можете либо загрузить весь пример кода на свой компьютер:

Скачать ZIP

...или клонируйте репозиторий GitHub из командной строки:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git

Вы скачаете ZIP-файл, содержащий несколько примеров файлов с ресурсами и стартовую страницу article.html .

Распакуйте папку и перейдите в этот каталог через командную строку на вашем компьютере.

3. Запустите тестовую страницу.

Для тестирования нашей тестовой страницы нам необходимо получить доступ к файлам с веб-сервера. Существует несколько способов создания временного локального веб-сервера для целей тестирования. В рамках этой лабораторной работы мы предоставим инструкции для 3 доступных вариантов:

• Приложение Google Chrome "Web Server for Chrome" — это рекомендуемый подход, поскольку это самое простое и кроссплатформенное решение. Примечание: для этого подхода необходимо установить Google Chrome.
• Firebase Hosting — альтернативный вариант, если вас также интересует наша новая платформа для размещения статических ресурсов «Firebase Hosting». SSL-шифрование включено по умолчанию.
• Локальный HTTP-сервер на Python — требует доступа к командной строке.

Примечание : Настоятельно рекомендуется использовать HTTPS в производственных средах. HTTPS имеет ряд преимуществ, помимо безопасности, включая SEO. Подробнее об этом можно прочитать здесь .

Вариант №1: Веб-сервер для Chrome

Приложение "Web Server for Chrome" можно найти по этой ссылке в Chrome Web Store.

После установки приложения Chrome необходимо указать приложению путь к определенной папке с помощью кнопки «Выбрать папку». Для этого практического задания по программированию следует выбрать папку, куда вы распаковали файлы с примерами заданий.

Кроме того, следует установить флажок «Автоматически показывать index.html» и указать порт «8000». Для вступления изменений в силу потребуется перезапустить веб-сервер.

Доступ к этому URL-адресу осуществляется по следующему адресу:

http://localhost:8000/article.amp.html

Если указанная выше ссылка успешно загрузится, вы можете перейти к следующему разделу.

Вариант №2: Firebase Hosting

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

Firebase Hosting — это провайдер статического хостинга, который позволяет быстро развернуть и разместить статический веб-сайт и его ресурсы, включая файлы HTML, CSS и JavaScript. Пользователи получают выгоду от снижения задержки, поскольку статический контент кэшируется в сети доставки контента (CDN) с точками присутствия (PoP), расположенными по всему миру.

Наконец, Firebase Hosting всегда использует SSL-шифрование, что отлично подходит для AMP и веб-разработки в целом. Если вас больше интересует исключительно AMP, то этот вариант можно просто проигнорировать.

Вариант №3: HTTP-сервер на Python

Если вы не пользуетесь Chrome или у вас возникли проблемы с установкой расширения Chrome, вы также можете использовать Python из командной строки для запуска локального веб-сервера.

Чтобы запустить встроенный HTTP-сервер Python из командной строки, просто выполните следующую команду:

python -m SimpleHTTPServer

И перейдите по этой ссылке :

http://localhost:8000/article.amp.html

4. Изучите основные компоненты AMP.

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

• amp-ad — Контейнер для отображения рекламы.
• amp-img — замена HTML-тегу img.
• amp-pixel — используется в качестве пикселя отслеживания для подсчета просмотров страниц.
• amp-video — замена тегу HTML5 video.

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

Примечание : Встраивание HTML5-видео и пикселей отслеживания — важные функции в веб-разработке. Если вас интересует встраивание этих компонентов, вы можете ознакомиться с соответствующими справочными страницами здесь и здесь .

5. Добавление рекламы

Пример страницы article.amp.html должен выглядеть следующим образом:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Выше представлена ​​простая страница, и самое интересное в ней то, что она проходит как проверку AMP, так и проверку метаданных поисковой системы Schema.org. Если бы эта страница была размещена на новостном сайте, она могла бы попасть в новую карусель результатов поиска Google, посвященную AMP-контенту, поэтому это отличная отправная точка для нашей работы.

Прежде чем вносить изменения на страницу, откроем инструменты разработчика Chrome. При работе над веб-сайтом (особенно ориентированным на мобильные устройства) обычно полезно имитировать работу на мобильных устройствах во время тестирования в браузере. Начните с открытия консоли разработчика в Chrome через Menu > More Tools > Developer Tools :

Теперь проверьте вывод JavaScript в консоли разработчика. Убедитесь, что выбрана вкладка «Консоль»:

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

В появившемся меню выберите устройство "Nexus 5X":

Теперь можно приступать к работе над самой страницей. Давайте попробуем добавить рекламу в нашу AMP-статью!

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

Взгляните на этот пример объявления DoubleClick :

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

Как видите, это очень простая конфигурация. Обратите внимание на атрибут type , он сообщает компоненту amp-ad, какую рекламную платформу вы хотите использовать. В данном случае мы хотели использовать платформу Double Click , поэтому значение атрибута type было doubleclick .

Атрибут data-slot более уникален. Любые атрибуты, начинающиеся с data- в amp-ad, являются атрибутами, специфичными для конкретного поставщика. Это означает, что не всем поставщикам обязательно потребуется этот конкретный атрибут, и они не обязательно отреагируют, если он будет предоставлен. Например, сравните приведенный выше пример DoubleClick с тестовой рекламой с платформы A9 :

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

Попробуйте добавить оба приведенных выше примера в свою статью сразу после тега <header> . Обновите страницу, и вы увидите два тестовых объявления:

Важно : В консоли разработчика могут появляться ошибки, например, «Смешанный контент» или «XMLHttpRequest не может быть загружен». Первая, вероятно, связана с рекламой A9, поскольку не весь загружаемый ею контент является безопасным. Это важное требование для всех рекламных объявлений, показываемых на AMP.

Давайте рассмотрим еще несколько вариантов использования DoubleClick. Попробуйте добавить на свою страницу две конфигурации геотаргетинга:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

К сожалению, геотаргетинг нельзя контролировать из кода самой страницы. Однако эти тестовые объявления уже настроены в панели управления DoubleClick таким образом, чтобы отображаться только в определенных странах, а именно в Великобритании и США.

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

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

Примечание : Вы можете заметить, что внутри этих тегов amp-ad находятся дополнительные теги div с атрибутом fallback. Можете ли вы догадаться, что означает атрибут fallback? Он сообщает системе загрузки AMP, что содержимое этого элемента должно отображаться только в том случае, если родительский элемент не загрузится успешно. Это означает, что родительский элемент будет использовать дочерний элемент в качестве резервного — отсюда и термин «fallback».

В настоящее время поддерживаются следующие рекламные сети:

• А9
• Адблейд
• Адформ
• AdReactor
• AdSense
• AdTech
• Критео
• Точки и СМИ
• Двойной щелчок
• Полет
• Industrybrains
• OpenX
• плиста
• Smart AdServer
• Йилдмо
• Revcontent
• Тройной подъёмник
• Тэдс
• I-Mobile
• Вебедиады

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

В следующей главе мы рассмотрим более сложные компоненты AMP и способы их включения в AMP-документы.

Примечание : Запуск JavaScript, предоставляемого рекламной сетью, внутри AMP-документа запрещен. Вместо этого среда выполнения AMP загружает iframe из другого источника (через песочницу iframe) в качестве AMP-документа и выполняет JavaScript рекламной сети внутри этой песочницы iframe.

Важно : Спецификация AMP-AD, вероятно, будет значительно меняться со временем. Текущий подход предназначен для предварительной настройки формата, чтобы иметь возможность показывать рекламу.

6. Расширяйте контент с помощью дополнительных компонентов.

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

Итак, давайте выведем наш AMP-документ на новый уровень и рассмотрим, какие компоненты доступны помимо основных, упомянутых ранее.

В этой главе мы попробуем добавить более продвинутые веб-функции, которые обычно встречаются в новостных статьях:

• видео на YouTube
• Твиты
• Цитаты из статьи

Встроить видео с YouTube

Давайте попробуем встроить видео с YouTube в документ. Следующий код встроит видео и добавит его на вашу страницу:

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

Обновите страницу и посмотрите, что получилось. Вместо видео вы должны увидеть следующий текст: «Видео не удалось загрузить».

Даже если ваш браузер без проблем отображает видео на YouTube, вы все равно получите эту ошибку. Почему? Дело не в том, что видео не загрузилось, а в том, что не удалось загрузить сам компонент.

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

Добавьте следующий запрос в тег <head> :

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Обновите страницу, и вы увидите видео на YouTube:

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

Узнайте больше о компоненте YouTube .

Примечание : Помимо компонента YouTube, AMP включает в себя универсальный компонент HTML5 для воспроизведения видео, который называется amp-video, а также компонент AMP, предназначенный для облачного видеоплеера Brightcove Video Cloud или Perform Player, под названием amp-brightcove . Больше примеров воспроизведения видео, включая видео с Facebook, Instagram, Vine, Twitter и Dailymotion, можно найти в разделе « AMP на примерах ».

Примечание : Атрибут fallback полезен для предоставления информации в случае, если компонент не загружается. Что делать, если браузер пользователя не поддерживает определенный AMP-компонент? Для лучшего пользовательского опыта лучше информировать пользователя о причинах отсутствия функциональности.

Показать твит

Встраивание предварительно отформатированных твитов из Twitter — распространённая функция новостных статей. Компонент AMP Twitter с лёгкостью обеспечивает эту функциональность.

Для начала добавьте следующий JavaScript-запрос в тег <head> вашего документа:

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

Теперь добавьте в свою статью этот код, чтобы встроить сам твит:

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

Атрибут data-tweetid — ещё один пример пользовательского атрибута, необходимого конкретному поставщику платформы. В данном случае Twitter распознаёт атрибут data-tweetid как соответствующий конкретному твиту, который должен быть встроен в страницу.

Обновите страницу в браузере и посмотрите, что там написано. Вы должны увидеть твит:

Узнайте больше о компоненте Twitter .

Примечание : AMP включает в себя еще больше компонентов для встраивания контента из социальных сетей. Ознакомьтесь с компонентом Instagram и компонентом Vine .

Выделить цитату из статьи

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

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

AMP включает в себя еще один компонент, специально предназначенный для подобных ситуаций, — amp-fit-text. Он позволяет задать фиксированную ширину и высоту элемента, а также максимальный размер шрифта. Компонент интеллектуально масштабирует размер шрифта, чтобы текст цитаты поместился в пределах доступных ширины и высоты.

Давайте попробуем. Во-первых, добавьте библиотеку компонента в тег <head>:

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

Добавьте на свою страницу следующее:

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

Обновите страницу и посмотрите на результат!

Теперь проведите дальнейшие эксперименты. Что произойдет, если цитата будет намного короче?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  #YOLO
</amp-fit-text>

А как насчет более длинного варианта цитаты?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon's that is dreaming, And the lamp-light o'er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

В качестве последнего эксперимента с amp-fit-text попробуйте создать короткий текст, например, #YOLO, с гораздо большей высотой — скажем, 400 — и сохранить значение атрибута max-font-size равным 42. Как будет выглядеть получившаяся страница? Текст будет центрирован по вертикали или высота тега amp-fit-text уменьшится, чтобы соответствовать максимальному размеру шрифта? Зная систему компоновки AMP, попробуйте ответить на этот вопрос, прежде чем редактировать документ!

7. Сложные карусели

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

Не забудьте подключить библиотеку компонентов карусели, добавив следующий JavaScript-запрос в тег <head> вашего документа:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Далее мы добавим простую карусель изображений с адаптивным дизайном и заданными шириной и высотой. Добавьте на свою страницу следующее:

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

Обновите страницу, и вы увидите карусель:

Компонент карусели можно настроить различными способами. Попробуйте изменить тип на slides и посмотрите на результат. Обязательно измените атрибут layout компонента amp-carousel и изображений внутри него, чтобы они также были responsive .

Теперь вместо прокручиваемого списка элементов вы будете видеть по одному элементу за раз. Попробуйте провести пальцем по горизонтали, чтобы перемещаться между элементами. Если вы проведете пальцем до третьего элемента, вы не сможете прокрутить дальше.

Далее добавьте атрибут loop . Обновите страницу и попробуйте сразу же пролистать влево. Карусель будет зацикливаться бесконечно.

Наконец, давайте настроим автоматическое воспроизведение этой карусели с интервалом в 2 секунды. Добавьте атрибут autoplay к странице и атрибут delay со значением 2000 следующим образом: delay="2000" .

В итоге у вас должно получиться примерно так:

<amp-carousel layout="responsive" width="300" height="168" 
         type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

Обновите страницу и попробуйте!

Примечание : Возможно, вы заметили, что в карусели используется тип макета fixed-height . Это требование типа макета carousel , в то время как для типа макета slides требуется responsive макет. Элементы с фиксированной высотой занимают доступное им пространство, но сохраняют высоту неизменной. Атрибут height должен быть определен, а атрибут width не должен присутствовать или должен быть установлен в значение auto для корректной работы fixed-height .

Карусели изображений — это здорово, но что, если мы хотим, чтобы в карусели отображался более сложный контент? Давайте попробуем немного поэкспериментировать, разместив в одной карусели рекламу, текст и изображение. Сможет ли AMP-Carousel справиться с таким сочетанием одновременно? Конечно.

Для начала добавим на страницу следующие стили, чтобы обеспечить безопасную совместную работу компонентов amp-fit-text и amp-carousel:

amp-fit-text {
    white-space: normal;
}

Теперь попробуйте вставить следующий код карусели на свою страницу:

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This advert is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

Обновите страницу, и вы должны увидеть что-то подобное:

Узнайте больше о компоненте «Карусель» .

Примечание : В нашем последнем примере вы могли заметить, что компонент amp-ad включал дочерний элемент div с атрибутом placeholder . Если вы помните, мы уже сталкивались с подобной ситуацией с amp-ad ранее в практическом руководстве, где рассматривалась система fallback . В чем разница между placeholder и fallback? Элементы Fallback появляются, когда родительский элемент не загружается, то есть если реклама недоступна. В то время как элементы placeholder появляются вместо родительского элемента во время его загрузки. В некотором смысле, каждый атрибут обрамляет процесс загрузки родительского элемента.

Важно : К сожалению, компонент amp-ad использует iframe в фоновом режиме, что может мешать жестам пролистывания карусели. Это известная проблема, которая находится на стадии исследования.

8. Отслеживайте трек с помощью amp-analytics

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

Ниже приведён пример традиционного отслеживания Google Analytics с помощью JavaScript, который мы перепишем в формате JSON библиотеки amp-analytic. Сначала рассмотрим традиционный подход на JavaScript:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Вышеописанное довольно просто: отправляется уведомление о событии просмотра страницы, которое необходимо отслеживать.

Чтобы воспроизвести все вышеописанное в компоненте amp-analytics, сначала добавим библиотеку компонентов в заголовок нашего документа:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Затем мы добавляем компонент следующим образом:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

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

В формате JSON ключ triggers содержит набор ключей, представляющих все отслеживаемые нами события-триггеры; ключи этих триггеров представляют собой описания событий, например, "просмотр страницы по умолчанию" в приведенном выше примере. Значение ключа title относится к названию просматриваемой страницы.

Расширяя приведенный выше пример, мы можем добавить еще один триггер: "триггер клика по #заголовку":

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

Этот триггер работает именно так, как и следует из его названия: используя DOM-селектор "#header", мы можем запросить тег с идентификатором "header", и в случае его "нажатия" или касания на устройстве мы отправляем событие действия "clicked-header" на аналитическую платформу с меткой категории "examples".

Если у вас есть собственная платформа отслеживания, с которой вы хотите интегрироваться, вы все равно можете использовать amp-analytics и определить собственные персонализированные URL-адреса для получения информации об отслеживании. Подробнее о компоненте amp-analytics читайте здесь !

Примечание : Во всех этих примерах аналитики "UA-YYYY-Y" следует заменить кодом отслеживания Google Analytics вашего собственного веб-сайта.

Примечание : Если вас интересуют более простые системы отслеживания, вы можете обратить внимание на amp-pixel. Если вам нужно отслеживать только просмотры страниц, это более лёгкое решение, чем amp-analytics, поскольку оно предназначено только для решения задач традиционного пиксельного отслеживания. Подробнее об этом можно прочитать здесь !

Важно : Компонент аналитики все еще находится в стадии разработки. По мере развития компонента amp-analytics будут добавляться новые аналитические платформы и новые типы событий для отслеживания. Для получения самой актуальной информации ознакомьтесь с справочным документом .

9. Навигация по вашему сайту

Распространенным требованием к мобильным сайтам является наличие навигационного меню. Эти меню могут принимать самые разные формы. Вот несколько примеров того, как навигация может быть представлена ​​в AMP-документе:

1. Самый простой вариант — разместить ссылку на главную страницу вашего сайта.
2. Подзаголовочное меню, доступное через компонент карусели.

Ссылка на главную страницу

Самый простой способ вернуть пользователей к стандартной навигации вашего сайта — это просто перенаправить их обратно на основной интерфейс сайта!

Попробуйте добавить эту HTML-ссылку в тег <header> :

<header>
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>

  News Site
</header>

И добавьте это правило в ваш встроенный CSS:

.home-button {
  float: left;
}

Теперь обновите страницу. В верхнем левом углу страницы вы должны увидеть ссылку на homepage.html — если вы нажмете на эту ссылку, то быстро обнаружите, что она никуда не ведет.

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

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

Подзаголовочное меню

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

Поскольку нам нужен компонент карусели, обязательно добавьте JavaScript этого компонента в тег <head> вашей страницы:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Попробуйте добавить этот HTML-фрагмент сразу под тегом <header> :

...
</header>
<div class="sub-menu">
  <amp-carousel layout="fixed-height" height="38" type="carousel">
    <a href="#example1">Example 1</a>
    <a href="#example2">Example 2</a>
    <a href="#example3">Longer Named Example 3</a>
    <a href="#example4">Example 4</a>
    <a href="#example5">Example 5</a>
    <a href="#example6">Example 6</a>
  </amp-carousel>
</div>
<article>
...

И добавьте эти правила в ваш встроенный CSS:

.sub-menu {
  background: black;
}

.sub-menu a {
  display: block;
  background: tomato;
  margin: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

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

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

10. Добавление шрифтов

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

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

Давайте попробуем добавить в документ ссылку на шрифт Raleway:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

Теперь обновите свой CSS, добавив ссылку на Raleway:

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

Обновите страницу и оцените её новый внешний вид. Также проверьте результаты проверки валидатором — вы заметите, что никаких нареканий по этому внешнему запросу не поступало.

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

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

11. Поздравляем!

Вы успешно завершили лабораторную работу по программированию в рамках расширенного курса AMP и изучили многие ключевые компоненты AMP!

Надеюсь, вам стало понятно, как amp-ad и amp-analytics можно использовать для поддержки самых разных рекламных платформ и поставщиков аналитических услуг. Обязательно ознакомьтесь с полным списком доступных компонентов AMP.

Ниже приведены дополнительные темы и ссылки, которые вы можете изучить, чтобы еще больше расширить свои навыки!

• AMP на примерах — обширный каталог примеров компонентов AMP и шаблонов компонентов.
• Примеры рекламы DoubleClick — обширный каталог примеров AMP-рекламы.
• Всё о поиске страниц
• Запрещенные HTML-теги
• Ограниченные правила CSS и анимации
• Подробнее об iFrames
• AMP CDN
• Список доступных компонентов AMP