Toutes les fonctions interactives à utiliser dans une page AMP

L’équipe en charge du projet AMP de Google a récemment déployé de nouvelles fonctionnalités AMP pour les éditeurs de contenu.

Toutes les fonctions interactives à utiliser dans une page AMP

Ce sont toutes des fonctionnalités qui sont à même de rendre toute page AMP plus interactive sans pour autant gêner l’accélération de l’affichage de la page.

  1. AMP Linker :

    Pour les navigateurs qui restreignent l'accès aux cookies tiers, AMP Linker est une nouvelle façon de maintenir les sessions utilisateur synchronisées.

  2. Fonction “Infinite Scroll” avec amp-next-page :

    <amp-next-page> (maintenant disponible en tant que test) prend en charge ce que certains appellent “défilement infini” des articles.

    Les développeurs peuvent spécifier jusqu'à trois URL à charger lorsque l'utilisateur arrive à une profondeur de défilement spécifiée dans la page, et ces documents se chargent en ligne de manière transparente.

    (Cliquez sur les images pour les agrandir)

    Fonction “Infinite Scroll” avec amp-next-page
    Source : AMP Project


  3. Animations Tilt-bound avec amp-orientation-observer :

    <amp-orientation-observer>, qui prend en charge la synchronisation de bas niveau entre l'orientation du périphérique de l’utilisateur et des cadres dans une animation donnée, est maintenant disponible.

    Avec cela, vous pouvez créer une gamme d'effets, comme subtilement déplacer le fond de votre page, des images panoramiques, ou avancer une animation sur Tilt.

    Animations Tilt-bound avec amp-orientation-observer


    Vous pouvez même créer un espace 3D en couches en déplaçant plusieurs composants superposés d'une scène à des taux différents.

  4. Fonction “Compare images with amp-image-slider” :

    La fonction <amp-image-slider> donne aux utilisateurs la possibilité de comparer deux images en tant que superpositions.

    Fonction “Compare images with amp-image-slider”


    Cela peut être particulièrement utile pour les photos «avant et après».

  5. Publicité AMP Story avec Google Ad Manager (Beta) :

    Google Ad Manager prend désormais en charge la distribution de publicités directes vendues par les éditeurs aux AMP Stories qu'ils produisent.

    Pour la monétisation AMP, une seule page publicitaire permet à une annonce Creative de s'afficher sous la forme d'une page entière, dynamiquement entrelacée, dans les pages d'une AMP Story.

    Annonces AMP Story Ads avec Google Ad Manager


    Pour plus d'informations ici


De nouveaux composants


  1. <amp-pan-zoom> prend en charge le panoramique et le zoom du contenu interactif en ligne.

    Cela aide les utilisateurs avec une gamme de cas d'utilisation, tels que la vérification des détails sur une image du produit…

  2. <amp-date-picker> prend en charge la saisie des dates et des plages de date dans les formulaires.

    <amp-date-picker>, prend en charge la saisie des dates et des plages de date dans les formulaires.


    Plus de détails ici.

  3. <amp-date-countdown> affiche un compte à rebours dynamique à une date et une heure données.

  4. <amp-google-document-embed> affiche les fichiers de document tels que les documents Word, les feuilles de calcul Excel et les PDF en ligne dans les pages AMP.

  5. Les développeurs peuvent désormais personnaliser les transitions dans et en dehors du composant <amp-lightbox> existant.



  6. Les fournisseurs de courriels peuvent s'intégrer avec l'AMP pour l'email en utilisant les instructions ici.


Voici les fonctionnalités AMP à venir



  • Vous avez toujours envie de continuer à regarder une vidéo tout en lisant un article à son sujet ou lire les instructions pour une recette tout en regardant quelqu'un réellement le faire ?

    Tout comme le mode Picture-in-Picture de YouTube, l’attribut «Dock» sur le composant <amp-video> va bientôt prendre en charge la réduction de la vidéo dans le coin de la fenêtre lorsque l'utilisateur fait défiler la page.

    Les développeurs seront en mesure de personnaliser où et comment les docks vidéo s’affichent.

  • La fonctionnalité <amp-video-iframe> va bientôt prendre en charge un ensemble de fonctionnalités disponibles pour amp-vidéo et d'autres composants vidéo tiers pour les vidéos intégrées à l'intérieur d'un IFRAME.

  • Juste comme AMP dispose maintenant de la fonction <amp-next-page> pour le "Scroll infini” des documents, il en sera bientôt de même avec le même comportement pour les éléments d'une page dans une liste.

    Cela sera utile pour les éléments de liste de défilement sans fin comme les résultats de recherche et les cartes de produits.

  • Input Masking ou masquage des saisies aidera bientôt les utilisateurs à remplir des formulaires plus efficacement en ajoutant automatiquement des formats comme des espaces et des caractères interstitiels spécifiés par les développeurs.

  • La prise en charge du cadre de transparence et de consentement sera prochainement intégrée à <amp-consent>.



  • Le lecteur <amp-ima-video> est en cours d'amélioration avec de nouvelles fonctionnalités et des corrections de bugs, y compris l'ajout manquant de boutons “muet/audio”, la fixation des contrôles cachés tout en jouant et la capacité de lire la vidéo en boucle.

  • Support pour les publicités “sticky” (fixes) sur desktop lorsque la position est fixée sur le rail gauche ou droit de la page.