Concepts avancés des pages Accelerated Mobile Pages

1. Présentation

Cet atelier de programmation s'appuie sur les concepts présentés dans les principes de base des pages AMP. Avant de commencer cet atelier, vous devez avoir terminé l'atelier de programmation précédent ou au moins avoir une compréhension de base des concepts fondamentaux d'AMP.

Dans cet atelier de programmation, vous allez découvrir comment AMP gère la publicité, les données analytiques, l'intégration de vidéos et de réseaux sociaux, les carrousels d'images et plus encore. Pour ce faire, vous vous appuierez sur l'exemple de l'atelier de programmation "Notions fondamentales" en ajoutant ces fonctionnalités à l'aide des différents composants AMP.

Points abordés

• Annonces display avec amp-ad.
• Intégrez des vidéos YouTube, des cartes Twitter et des éléments de texte responsifs.
• Créez des carrousels avec des images et des combinaisons de contenus à l'aide de amp-carousel.
• Modèles de suivi simples avec amp-analytics.
• Différentes façons d'ajouter la navigation sur le site à votre page.
• Fonctionnement des polices avec AMP

Prérequis

• Exemple de code
• Chrome (ou un navigateur équivalent permettant d'inspecter la console JavaScript)
• Python (de préférence la version 2.7) ou l'extension Chrome 200 OK Web Server
• Éditeur de code (par exemple, Atom, Sublime, Notepad++)

2. Obtenir l'exemple de code

Vous pouvez télécharger l'intégralité de l'exemple de code sur votre ordinateur :

Télécharger le fichier ZIP

Vous pouvez également cloner le dépôt GitHub à partir de la ligne de commande :

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

Vous allez télécharger un fichier ZIP contenant plusieurs exemples de fichiers de ressources et la page article.html de départ.

Décompressez le dossier et accédez au répertoire via la ligne de commande sur votre ordinateur.

3. Exécuter la page exemple

Pour tester notre exemple de page, nous devons accéder aux fichiers à partir d'un serveur Web. Il existe plusieurs façons de créer un serveur Web local temporaire à des fins de test. Pour cet atelier de programmation, nous vous fournirons des instructions pour trois options disponibles :

• L'application Google Chrome "Web Server for Chrome" : il s'agit de l'approche recommandée, car elle constitue la solution la plus simple et multiplate-forme disponible. Remarque : Cette approche nécessite l'installation de Google Chrome.
• Firebase Hosting : une autre option si vous souhaitez également découvrir notre nouvelle plate-forme d'hébergement d'éléments statiques "Firebase Hosting". SSL activé par défaut.
• Un serveur HTTP Python local : nécessite d'accéder à la ligne de commande.

Remarque : Nous vous recommandons vivement d'utiliser HTTPS dans les environnements de production. Le protocole HTTPS présente plusieurs avantages au-delà de la sécurité, y compris pour le référencement naturel. Pour en savoir plus, cliquez ici.

Option 1 : Serveur Web pour Chrome

Vous trouverez l'application "Web Server for Chrome" sur le Chrome Web Store en cliquant ici.

Après avoir installé l'application Chrome, vous devez la diriger vers un dossier spécifique à l'aide du bouton "Choose Folder" (Choisir un dossier). Pour cet atelier de programmation, vous devez sélectionner le dossier dans lequel vous avez décompressé les exemples de fichiers de l'atelier.

Vous devez également cocher l'option "Afficher automatiquement index.html" et définir le port sur "8000". Vous devrez redémarrer le serveur Web pour que ces modifications prennent effet.

Accédez à cette URL :

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

Si l'URL ci-dessus se charge correctement, vous pouvez passer à la section suivante.

Option 2 : Firebase Hosting

Si vous souhaitez découvrir notre nouvel hébergement de sites Web statiques Firebase, vous pouvez suivre les instructions disponibles ici pour déployer votre site AMP sur une URL Firebase Hosting.

Firebase Hosting est un fournisseur d'hébergement statique que vous pouvez utiliser pour déployer et héberger rapidement un site Web statique et ses composants, y compris les fichiers HTML, CSS et JavaScript. Les utilisateurs bénéficient d'une latence réduite, car le contenu statique est mis en cache dans un réseau de diffusion de contenu (CDN) avec des points de présence (PoP) situés dans le monde entier.

Enfin, Firebase Hosting est toujours diffusé via SSL, ce qui est idéal pour AMP et le Web en général. Si vous souhaitez vous concentrer uniquement sur AMP, ignorez cette option.

Option 3 : Serveur HTTP Python

Si vous n'utilisez pas Chrome ou si vous rencontrez des difficultés pour installer l'extension Chrome, vous pouvez également utiliser Python à partir de la ligne de commande pour lancer un serveur Web local.

Pour exécuter le serveur HTTP intégré de Python à partir de la ligne de commande, exécutez simplement la commande suivante :

python -m SimpleHTTPServer

Accédez à cette URL :

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

4. Découvrir les composants AMP de base

Le système de composants d'AMP nous permet de créer rapidement des fonctionnalités efficaces et responsives dans nos articles avec un minimum d'efforts. La bibliothèque JavaScript AMP de base dans la balise <head> inclut plusieurs composants de base :

• amp-ad : conteneur permettant de diffuser une annonce.
• amp-img : remplace la balise HTML img.
• amp-pixel : utilisé comme pixel de suivi pour comptabiliser les pages vues.
• amp-video : remplace la balise vidéo HTML5.

Tous les composants principaux ci-dessus peuvent être utilisés immédiatement dans un document AMP. Notre exemple de code utilise déjà amp-img dans notre page. Nous avons exploré son lien avec le système de mise en page AMP dans l'atelier de programmation AMP Foundations. Passons donc à amp-ad dans le chapitre suivant.

Remarque : L'intégration de vidéos HTML5 et de pixels de suivi sont des fonctionnalités importantes dans le développement Web. Si vous souhaitez intégrer ces composants, vous pouvez consulter leurs pages de référence respectives ici et ici.

5. Ajouter une annonce

Votre exemple de page article.amp.html doit se présenter comme suit :

<!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>

La page ci-dessus est simple. Le plus intéressant, c'est qu'elle passe à la fois la validation AMP et la validation des métadonnées Schema.org pour les moteurs de recherche. Si cette page était déployée sur un site d'actualités, elle pourrait être incluse dans le nouveau carrousel de recherche Google dédié au contenu AMP. Elle constitue donc un excellent point de départ pour notre travail.

Avant de modifier la page, ouvrez les outils pour les développeurs Chrome. Lorsque vous travaillez sur un site Web (en particulier un site Web axé sur le mobile), il est généralement judicieux de simuler une expérience mobile lors des tests dans le navigateur. Pour commencer, ouvrez la console pour les développeurs dans Chrome en saisissant Menu > More Tools > Developer Tools :

Inspectez maintenant la sortie JavaScript dans la console du développeur. Assurez-vous que l'onglet "Console" est sélectionné :

Cliquez maintenant sur le bouton de simulation d'appareil dans la console pour les développeurs. Il est représenté par un téléphone et une tablette côte à côte :

Dans le menu qui s'affiche, définissez l'appareil sur "Nexus 5X" :

Nous pouvons maintenant commencer à travailler sur la page elle-même. Essayons d'ajouter une annonce à notre article AMP.

Toutes les annonces dans AMP sont construites à l'aide du composant amp-ad. Ce composant nous permet de configurer nos annonces de différentes manières, par exemple en définissant la largeur, la hauteur et le mode de mise en page. Toutefois, de nombreuses plates-formes publicitaires nécessitent une configuration supplémentaire, comme l'ID de compte du réseau publicitaire, l'annonce à diffuser ou les options de ciblage de la publicité. Pour amp-ad, il suffit de renseigner les différentes options requises en tant qu'attributs HTML.

Voici un exemple d'annonce Double Click :

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

Comme vous pouvez le voir, il s'agit d'une configuration très simple. Notez l'attribut type. Il indique au composant amp-ad la plate-forme publicitaire que vous souhaitez utiliser. Dans ce cas, nous voulions la plate-forme DoubleClick. La valeur du type était donc doubleclick.

L'attribut data-slot est plus unique. Tous les attributs commençant par data- dans amp-ad sont des attributs spécifiques au fournisseur. Cela signifie que tous les fournisseurs n'ont pas nécessairement besoin de cet attribut spécifique et ne réagissent pas forcément s'il est fourni. Par exemple, comparez l'exemple Double Click ci-dessus avec une annonce test de la plate-forme A9 :

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

Essayez d'ajouter les deux exemples ci-dessus à votre article, juste après la balise <header>. Actualisez la page. Vous devriez voir deux annonces de test s'afficher :

Important : Il est possible que des erreurs s'affichent dans la console de développement, comme "Contenu mixte" ou "XMLHttpRequest ne peut pas charger". Le premier est probablement lié à la publicité A9, car tout le contenu qu'il charge n'est pas sécurisé. Il s'agit d'une exigence importante pour toutes les annonces diffusées sur AMP.

Examinons d'autres options disponibles avec Double Click. Essayez d'ajouter ces deux configurations d'annonces de ciblage géographique à votre page :

<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>

Malheureusement, le ciblage géographique ne peut pas être contrôlé à partir du code de la page lui-même. Toutefois, ces annonces tests ont déjà été configurées dans le tableau de bord DoubleClick pour ne s'afficher que dans certains pays, à savoir le Royaume-Uni et les États-Unis.

Actualisez la page et regardez. La capture d'écran suivante a été prise en Australie. Aucune des deux annonces ne se charge :

L'exemple de ciblage géographique ci-dessus montre que amp-ad est suffisamment flexible pour s'adapter à toutes sortes de fonctionnalités de plates-formes publicitaires.

Remarque : Vous remarquerez peut-être que ces balises amp-ad contiennent des balises div supplémentaires avec un attribut nommé "fallback". À votre avis, que désigne l'attribut de remplacement ? Il indique au système de chargement d'AMP de n'afficher le contenu de cet élément que lorsque l'élément parent ne se charge pas correctement. Cela signifie que l'élément parent se rabat sur l'élément enfant, d'où le terme "fallback" (remplacement).

Voici les réseaux publicitaires actuellement acceptés :

• A9
• Adblade
• Adform
• AdReactor
• AdSense
• AdTech
• Criteo
• Dot and Media
• DoubleClick
• Flite
• Industrybrains
• OpenX
• plista
• Smart AdServer
• Yieldmo
• Revcontent
• TripleLift
• Teads
• I-Mobile
• Webediads

Pour en savoir plus sur les plates-formes publicitaires compatibles les plus récentes, consultez la page de documentation sur le composant d'annonce AMP.

Dans le chapitre suivant, nous allons explorer des composants AMP plus avancés et apprendre à les inclure dans nos documents AMP.

Remarque : Aucun code JavaScript fourni par un réseau publicitaire ne peut être exécuté dans le document AMP. À la place, l'exécution AMP charge un iFrame d'une autre origine (via le bac à sable iFrame) et exécute le code JavaScript du réseau publicitaire dans ce bac à sable iFrame.

Important : La spécification du composant amp-ad est susceptible d'évoluer considérablement au fil du temps. La méthode actuelle consiste à amorcer le format pour qu'il soit possible de diffuser des annonces.

6. Développer le contenu avec des composants étendus

Vous disposez désormais d'un document AMP de base avec du texte, une image et même une annonce intégrée à la page. Ce sont tous les ingrédients clés pour raconter une histoire et monétiser votre contenu. Toutefois, les sites Web modernes incluent souvent plus de fonctionnalités que de simples images et du texte.

Passons à la vitesse supérieure avec notre document AMP et découvrons les composants disponibles au-delà des composants de base mentionnés précédemment.

Dans ce chapitre, nous allons essayer d'ajouter des fonctionnalités Web plus avancées que l'on trouve généralement dans les articles d'actualité :

• Vidéos YouTube
• Tweets
• Citations d'articles

Intégrer une vidéo YouTube

Essayons d'intégrer une vidéo YouTube au document. Le code suivant intégrera une vidéo et l'ajoutera à votre page :

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

Actualisez la page et examinez-la. Le texte "Impossible de charger la vidéo" doit s'afficher à la place de la vidéo.

Même si votre navigateur peut afficher des vidéos YouTube sans problème, vous recevrez toujours cette erreur. Pourquoi ? La vidéo n'a pas échoué à se charger, mais le composant lui-même a échoué.

N'oubliez pas que tous les composants ne sont pas inclus dans le fichier JavaScript de la bibliothèque AMP principale. Nous devons inclure une requête JavaScript supplémentaire pour le composant YouTube en particulier. Tous les composants, à l'exception d'un ensemble de base, nécessitent ces références JavaScript supplémentaires.

Ajoutez la requête suivante à la balise <head> :

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

Actualisez la page. La vidéo YouTube devrait s'afficher :

Une fois encore, nous avons spécifié la largeur et la hauteur de la vidéo pour que le système de mise en page AMP puisse calculer les proportions. De plus, le type de mise en page a été défini sur "responsive", ce qui signifie que cette vidéo occupera toute la largeur de son élément parent.

En savoir plus sur le composant YouTube

Remarque : En plus du composant YouTube, AMP inclut un composant vidéo HTML5 générique nommé amp-video et un composant AMP dédié au lecteur Brightcove Video Cloud ou Perform nommé amp-brightcove. Consultez AMP by Example pour obtenir d'autres exemples de lecture vidéo, y compris pour les vidéos Facebook, Instagram, Vine, Twitter et Dailymotion.

Remarque : L'attribut de secours est utile pour fournir des informations si un composant ne parvient pas à se charger. Que se passe-t-il si le navigateur de l'utilisateur n'est pas compatible avec un composant AMP spécifique ? Il est préférable d'informer l'utilisateur de la raison pour laquelle une fonctionnalité peut être manquante.

Afficher un tweet

L'intégration de tweets préformatés de Twitter est une fonctionnalité courante des articles d'actualité. Le composant AMP Twitter peut fournir cette fonctionnalité facilement.

Commencez par ajouter la requête JavaScript suivante à la balise <head> de votre document :

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

Maintenant, dans votre article, ajoutez ce code pour intégrer le tweet lui-même :

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

L'attribut data-tweetid est un autre exemple d'attribut personnalisé requis par un fournisseur de plate-forme spécifique. Dans ce cas, Twitter reconnaît l'attribut data-tweetid comme correspondant à un tweet spécifique à intégrer dans la page.

Actualisez votre navigateur et examinez la page. Le tweet devrait s'afficher :

En savoir plus sur le composant Twitter

Remarque : AMP inclut encore plus de composants pour intégrer du contenu provenant de réseaux sociaux. Découvrez le composant Instagram et le composant Vine.

Mettre en surbrillance une citation d'article

Il est courant de mettre en évidence des extraits de texte particulièrement intéressants dans les articles de presse. Par exemple, une citation d'une source particulière ou un fait important peuvent être répétés dans une police plus grande pour attirer l'attention du lecteur.

Toutefois, comme toutes les citations ou tous les extraits de texte n'ont pas nécessairement la même longueur de chaîne de caractères, il peut être difficile d'équilibrer la taille de police plus grande avec l'espace que le texte en question occupera sur la page.

AMP inclut un autre composant spécifiquement conçu pour ce type de situation, appelé amp-fit-text. Il vous permet de définir un élément de largeur et de hauteur fixes, ainsi qu'une taille de police maximale. Le composant ajuste intelligemment la taille de la police pour adapter le texte de la citation à la largeur et à la hauteur disponibles.

Allons-y. Tout d'abord, ajoutez la bibliothèque du composant à la balise <head> :

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

Ajoutez le code suivant à votre page :

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

Actualisez la page et regardez le résultat.

Maintenant, expérimentez davantage. Que se passe-t-il si la citation est beaucoup plus courte ?

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

Ou une citation plus longue ?

<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>

Pour un dernier test avec amp-fit-text, essayez de créer un court texte, comme #YOLO, avec une hauteur beaucoup plus grande (par exemple, une valeur de 400) et en conservant la valeur de l'attribut max-font-size à 42. À quoi ressemblerait la page obtenue ? Le texte est-il centré verticalement ou la hauteur de la balise amp-fit-text est-elle réduite pour s'adapter à la taille de police maximale ? En vous basant sur vos connaissances du système de mise en page d'AMP, essayez de répondre à la question avant de modifier le document.

7. Carrousels complexes

Le carrousel est une autre fonctionnalité courante dans le développement Web. AMP inclut un composant générique conçu pour répondre à ce besoin. Commençons par un exemple simple, comme un carrousel d'images.

N'oubliez pas d'inclure la bibliothèque de composants de carrousel en ajoutant la requête JavaScript suivante à la balise <head> de votre document :

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

Nous allons ensuite intégrer un simple carrousel d'images avec une mise en page responsive et une largeur et une hauteur prédéfinies. Ajoutez le code suivant à votre page :

<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>

Actualisez la page. Un carrousel devrait s'afficher :

Le composant carrousel peut être configuré de différentes manières. Essayez de remplacer le type par slides et examinez le résultat. Veillez également à définir l'attribut layout de amp-carousel et des images qu'il contient sur responsive.

Au lieu d'une liste d'éléments défilante, vous verrez désormais un élément à la fois. Essayez de balayer l'écran horizontalement pour parcourir les éléments. Si vous balayez jusqu'au troisième élément, vous ne pourrez pas aller plus loin.

Ensuite, ajoutez l'attribut loop. Actualisez la page et essayez immédiatement de balayer l'écran vers la gauche. Le carrousel est lu en boucle indéfiniment.

Enfin, nous allons faire en sorte que ce carrousel se lance automatiquement toutes les deux secondes. Ajoutez l'attribut autoplay à la page et l'attribut de délai avec la valeur 2000 comme suit : delay="2000".

Le résultat final doit se présenter comme suit :

<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>

Actualisez la page et essayez-le !

Remarque : Vous avez peut-être remarqué que nous utilisons le type de mise en page fixed-height dans le carrousel. Il s'agit d'une exigence du type carousel, tandis que le type slides nécessitait le type de mise en page responsive. Les éléments à hauteur fixe occupent l'espace disponible, mais leur hauteur reste inchangée. L'attribut "height" (hauteur) doit être défini, tandis que l'attribut "width" (largeur) ne doit pas être présent ou doit être défini sur "auto" pour que fixed-height fonctionne.

Les carrousels d'images sont très utiles, mais que faire si nous voulons que du contenu plus complexe apparaisse dans notre carrousel ? Essayons de mélanger un peu les choses en plaçant une annonce, du texte et une image dans un même carrousel. amp-carousel peut-il vraiment gérer un tel mélange en même temps ? Absolument.

Commençons par ajouter ce style à la page pour nous assurer que les composants amp-fit-text et amp-carousel fonctionnent ensemble de manière sécurisée :

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

Essayez maintenant d'insérer le code de carrousel suivant dans votre page :

<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>

Actualisez la page. Vous devriez obtenir ceci :

En savoir plus sur le composant Carrousel

Remarque : Dans notre dernier exemple, vous avez peut-être remarqué que le composant amp-ad incluait un élément div enfant avec l'attribut placeholder. Vous vous souvenez peut-être que nous avons rencontré un scénario similaire avec amp-ad plus tôt dans l'atelier de programmation avec le système fallback. Quelle est la différence entre un espace réservé et un contenu de remplacement ? Les éléments Fallback s'affichent lorsque l'élément parent ne parvient pas à se charger, c'est-à-dire s'il n'y a pas d'annonce disponible. Les éléments placeholder s'affichent à la place de l'élément parent pendant son chargement. Dans un sens, chaque attribut encadre le processus de chargement de l'élément parent.

Important : Malheureusement, le composant amp-ad utilise un iFrame en arrière-plan, ce qui peut interférer avec les gestes de balayage du carrousel lui-même. Il s'agit d'un problème connu sur lequel nous enquêtons.

8. Effectuer le suivi avec amp-analytics

Les plates-formes d'analyse sont généralement intégrées aux sites Web à l'aide d'extraits de code JavaScript intégrés et d'appels de fonction qui déclenchent des événements renvoyés au système d'analyse. AMP fournit une syntaxe de configuration JSON flexible pour répliquer ce processus pour plusieurs partenaires d'analyse.

Voici un exemple de suivi Google Analytics traditionnel basé sur JavaScript, que nous allons réécrire au format JSON d'amp-analytics. Commençons par l'approche JavaScript traditionnelle :

<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>

L'exemple ci-dessus est assez simple. Il envoie une notification pour que l'événement de page vue soit suivi.

Pour reproduire tout ce qui précède dans le composant amp-analytics, nous incluons d'abord la bibliothèque de composants dans l'élément <head> de notre document :

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

Ensuite, nous incluons le composant comme suit :

<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>

Cela peut sembler plus compliqué, mais il s'agit en fait d'un format très flexible pour décrire plusieurs types d'événements différents. De plus, le format JSON n'inclut pas le blob de code JavaScript dans l'exemple traditionnel, ce qui pourrait potentiellement entraîner des erreurs en cas de modification accidentelle.

Au format JSON, la clé "triggers" inclut un ensemble de clés qui représentent tous les déclencheurs d'événements que nous allons suivre. Les clés de ces déclencheurs sont des descriptions de l'événement, par exemple "default pageview" (page vue par défaut) dans l'exemple ci-dessus. La valeur de la clé "title" est liée au nom de la page consultée.

En développant l'exemple ci-dessus, nous pouvons ajouter un autre déclencheur "click on #header trigger" :

<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>

Ce déclencheur fonctionne exactement comme son nom l'indique. En utilisant le sélecteur DOM "#header", nous pouvons rechercher une balise avec l'ID "header". Lorsque l'événement "clicked" (cliqué) ou "tapped" (appuyé) se produit sur l'appareil, nous envoyons une action d'événement "clicked-header" à la plate-forme d'analyse avec le libellé de catégorie "examples".

Si vous disposez d'une plate-forme de suivi personnalisée que vous souhaitez intégrer, vous pouvez toujours utiliser amp-analytics et définir vos propres points de terminaison d'URL personnalisés pour les informations de suivi. Pour en savoir plus sur le composant amp-analytics, cliquez ici.

Remarque : Dans tous ces exemples d'analyse, "UA-YYYY-Y" doit être remplacé par le code de suivi Google Analytics de votre propre site Web.

Remarque : Si vous recherchez des systèmes de suivi plus simples, vous pouvez consulter amp-pixel. Si vous n'avez besoin que de suivre les vues de page, il s'agit d'une solution plus légère qu'amp-analytics, car elle ne vise qu'à répondre aux exigences du suivi des pixels traditionnels. Pour en savoir plus, cliquez ici.

Important : Le composant Analytics est encore en cours de développement. À mesure que le composant amp-analytics se développe, d'autres plates-formes d'analyse et d'autres types d'événements à suivre seront disponibles. Pour obtenir les dernières informations, consultez le document de référence.

9. Parcourir votre site

L'inclusion d'un menu de navigation sur le site est une exigence courante pour les sites Web mobiles. Ces menus peuvent prendre de nombreuses formes différentes. Voici quelques exemples de présentation de la navigation dans un document AMP :

1. Créez un lien vers votre page d'accueil (l'option la plus simple).
2. Menu de sous-titres via le composant carrousel.

Lien vers la page d'accueil

Le moyen le plus simple de permettre à vos utilisateurs d'accéder aux options de navigation habituelles de votre site Web consiste à les rediriger vers l'interface habituelle de votre site Web.

Essayez d'ajouter ce lien HTML à la balise <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>

Ajoutez cette règle à votre code CSS intégré :

.home-button {
  float: left;
}

Actualisez ensuite la page. Un lien vers homepage.html devrait s'afficher en haut à gauche de la page. Si vous cliquez dessus, vous verrez qu'il ne mène nulle part.

Vous pouvez remplacer ce lien par l'URL de la page d'accueil de votre site Web pour permettre à vos utilisateurs d'accéder à d'autres sections de votre site via le système de navigation habituel.

Comme indiqué, il s'agit de l'approche la plus simple, qui utilise la navigation existante sur votre site Web. Nous allons maintenant examiner deux alternatives.

Menu des sous-titres

Une autre approche consiste à présenter le menu de navigation de votre site dans le document AMP. Pour le limiter à une petite section de votre page, nous pouvons utiliser un carrousel pour présenter un menu déroulant sous l'en-tête du site.

Comme nous avons besoin du composant de carrousel, veillez à ajouter le JavaScript du composant à la balise <head> de votre page :

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

Essayez d'ajouter cet extrait HTML juste en dessous de votre balise <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>
...

Ajoutez ces règles à votre code CSS intégré :

.sub-menu {
  background: black;
}

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

Actualisez ensuite la page. Un menu de liens devrait s'afficher sous le titre de votre article. Ce menu peut être parcouru horizontalement pour stocker de nombreux liens de navigation.

Cette navigation dans les sous-menus est un excellent moyen de stocker de nombreux liens sans prendre trop de place sur votre page.

10. Ajouter des polices

Comme indiqué précédemment, aucune requête de feuille de style externe n'est autorisée dans les documents AMP. Il existe toutefois une exception à cette règle : les polices.

Les polices sont un élément important de l'expérience de lecture des articles pour les utilisateurs Web. Étant donné que les navigateurs Web récupèrent les fichiers de police via des requêtes de feuille de style externes, cette exclusion dans AMP est nécessaire.

Essayons d'ajouter une référence à la police Raleway au document :

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

Mettez à jour votre CSS pour inclure une référence à Raleway :

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

Actualisez la page pour découvrir son nouveau look. Examinez également la sortie du validateur. Vous remarquerez qu'il n'y a aucune réclamation concernant cette demande externe.

Remarque : L'inclusion d'une police dans votre document ne nécessite aucun composant supplémentaire. Cela dit, il existe un composant nommé amp-font. Il n'est pas utilisé pour charger des polices Web. Vous pouvez l'utiliser pour détecter si une police Web a été chargée ou non, et répondre de manière appropriée si nécessaire.

Vous pouvez utiliser cette fonctionnalité pour masquer votre texte jusqu'à ce que votre police soit entièrement chargée. L'utilisateur ne verra ainsi pas le texte passer de sa police temporaire à sa police réelle. Si la police échoue, vous pouvez simplement afficher la police temporaire. En effet, le pire scénario serait que l'utilisateur ne puisse lire aucun texte. Pour en savoir plus sur amp-font, cliquez ici.

11. Félicitations !

Vous avez terminé l'atelier de programmation AMP avancé et savez maintenant utiliser de nombreux composants clés d'AMP.

Nous espérons que vous comprenez maintenant comment amp-ad et amp-analytics peuvent être utilisés pour prendre en charge différents types de plates-formes publicitaires et de fournisseurs de solutions analytiques. N'oubliez pas d'explorer la liste complète des composants AMP disponibles.

Voici quelques sujets et liens supplémentaires que vous pouvez explorer pour améliorer encore plus vos compétences !

• AMP By Example : un catalogue complet d'exemples pour les composants et les modèles de composants AMP.
• Exemples d'annonces DoubleClick : catalogue complet d'exemples d'annonces AMP.
• Tout savoir sur la découverte de pages
• Balises HTML non autorisées
• Règles et animations CSS restreintes
• En savoir plus sur les iFrames
• Le CDN AMP
• Liste des composants AMP disponibles