Les 3 avantages et les 8 meilleures pratiques des histoires AMP pour maximiser l'engagement

L'initiative open source AMP a ouvert la voie à des expériences Web mobiles plus rapides. L'adoption du format AMP a non seulement augmenté la vitesse des pages Web mobiles, mais a également amélioré les taux de conversion. Les pages AMP ont permis de générer une augmentation de 10 % du trafic sur le site Web et une augmentation de 20 % des conversions de ventes :

Même avec ces chiffres impressionnants, il manquait une chose au format : une expérience de page Web immersive basée sur une histoire. Les histoires AMP ont été lancées spécifiquement à cette fin.

Les histoires AMP suivent le même format que les histoires Snapchat, Instagram et Facebook et permettent aux marques de créer un contenu visuellement frappant pour capter l'attention des utilisateurs avec la narration.

Cet article mettra en évidence tout ce que vous devez savoir sur les histoires AMP - les avantages, les composants pour les créer, des exemples et si le format s'applique ou non à la publicité.

Que sont les histoires AMP ?

Les histoires AMP sont un format de narration visuelle pour le Web ouvert. Les histoires permettent aux lecteurs de s'immerger dans un contenu accessible en plein écran. Le format permet aux éditeurs et aux spécialistes du marketing de créer un contenu visuel rapide, ouvert et axé sur l'utilisateur :

Le format a été initialement lancé avec huit éditeurs, dont Vox Media, CNN, Mashable et le Washington Post. Après que le format ait suscité une bonne popularité pour ces marques, il a été ouvert à tous les développeurs AMP.

Les utilisateurs visualisent beaucoup de contenu sur leurs appareils mobiles, et ce format utilise du texte, des images, des vidéos et des graphiques en gras pour attirer l'attention de l'utilisateur mobile le plus rapidement possible et lui permet de consommer du contenu d'une manière qui n'est pas contraignante :

Les histoires AMP apparaissent dans Google Images, Discover, Search et News.

Le format portrait est naturellement véhiculé dans le flux Google avec la carte d'histoire comportant une grande image qui domine la majeure partie de l'écran. Les histoires sont étiquetées comme « histoire visuelle en vedette », en appuyant sur l'histoire pour ouvrir l'onglet Chrome personnalisé standard pour une histoire AMP.

Le menu de débordement en haut à droite vous permet d'accéder aux commandes standard du navigateur, et la fonctionnalité "ajouter à la collection" de Google est également présente dans la barre d'applications.

Les histoires AMP apparaissent dans le flux Google à gauche de l'écran d'accueil et également dans l'appli Google.

Voici ce à quoi vous pouvez vous attendre lorsque vous appuyez pour ouvrir une histoire AMP dans les résultats de recherche Google :

Avantages des histoires AMP

À l'instar d'autres pages Web, les marques et les éditeurs peuvent héberger le code HTML de l'histoire AMP sur leur site Web et peuvent y accéder à partir de n'importe quelle autre page pour générer des vues. Les plates-formes de découverte utilisent des techniques telles que les pages pré-rendues, le chargement vidéo optimisé et la mise en cache pour optimiser la livraison aux utilisateurs.

Le format d'histoire Google AMP est fourni avec des modèles de mise en page prédéfinis et flexibles, des commandes d'interface utilisateur standardisées et des composants pour le partage et l'ajout de contenu de suivi.

Vous devriez envisager de créer des stories AMP car elles sont :

• Rapide : les stories AMP se chargent rapidement et offrent aux utilisateurs une expérience fluide.
• Immersif : les histoires offrent une expérience immersive car elles s'étendent et remplissent visuellement l'écran de l'utilisateur. Le format exploitable offre des opportunités créatives de narration avec une flexibilité de conception qui engage le public.
• Ouvert : les stories AMP font partie du Web ouvert et peuvent être facilement partagées et intégrées sur des sites Web et des applications sans être limitées à un seul écosystème.

Enfin, étant donné que les histoires sont construites au-dessus de la bibliothèque de composants AMP, elles prennent en charge des fonctionnalités telles que l'analyse, qui vous permettent de collecter et d'analyser les données utilisateur pour vos histoires AMP.

Créer une histoire AMP

Pour réussir à créer une histoire AMP, vous devez d'abord comprendre les parties qui composent cette histoire.

Une histoire AMP est composée de pages individuelles, qui sont composées de couches individuelles contenant des éléments HTML et AMP de base :

Chacune de ces parties est traduite en composants AMP, où l'histoire est présentée par 'amp-story', la page est représentée par 'amp-story-page' et les couches sont représentées par 'amp-story-grid-layer' :

Maintenant que nous avons décrit ce qui constitue une histoire AMP, examinons les conditions préalables avant de continuer :

1. Connaissances de base en HTML, CSS et JavaScript.
2. Une compréhension de base des concepts de base d'AMP.
3. Un navigateur de votre choix.
4. Un éditeur de texte de votre choix.

Après avoir configuré ces éléments, suivez ce didacticiel pour créer votre première histoire.

Meilleures pratiques et spécifications

Tenez compte des bonnes pratiques suivantes lors de la création d'une story AMP pour capter l'attention des utilisateurs.

Choisissez une couleur de fond

Lorsque vous sélectionnez une couleur d'arrière-plan, vous offrez une bonne expérience utilisateur de secours en cas de mauvaises conditions du réseau. La couleur d'arrière-plan doit être représentative de la couleur dominante de l'élément d'arrière-plan de la page, de sorte qu'elle permet une transition en douceur avec les images de la page elle-même.

Assurer la lisibilité du texte

Ce point fait spécifiquement référence aux superpositions de texte. Choisissez une couleur de police qui contraste avec la couleur d'arrière-plan, car cela offre une meilleure expérience utilisateur. Une autre chose que vous pouvez faire est d'ajouter une superposition de dégradé entre le texte et l'image pour ajouter du contraste.

Utiliser un minimum de texte

Pour maximiser l'engagement et vous assurer que chaque mot est lu, n'ajoutez pas plus d'une ou deux phrases par page.

Rendez-le significatif même sans audio

Si votre histoire comprend de l'audio, assurez-vous que l'histoire est significative même sans son, car de nombreux utilisateurs regardent les histoires AMP en déplacement et peuvent choisir de les regarder en sourdine. Vous pouvez également ajouter des légendes pour transmettre votre message lorsque le son est coupé.

Spécifier un attribut d'affiche pour la vidéo

L'affiche est une image qui s'affiche dans l'interface utilisateur jusqu'à ce que votre vidéo soit téléchargée. Il s'agit généralement de la première image de la vidéo, bien que n'importe quelle image puisse fonctionner, vous devez choisir une image représentative de la vidéo et permettant une transition en douceur. Les dimensions recommandées pour une image d'affiche sont : 720p (720 l x 1280 h).

Spécifier la source de la vidéo

Lorsque vous spécifiez la source d'une vidéo amp, utilisez des éléments enfants au lieu de l'attribut src. En utilisant l'élément enfant, vous pouvez spécifier le type de vidéo et ajouter d'autres sources vidéo. Dans l'élément enfant, spécifiez le type MIME via l'attribut « type ».

Pour des performances optimales, visez à fournir des vidéos ne dépassant pas 4 Mo. Avec des vidéos plus longues, envisagez de diviser la vidéo sur plusieurs pages.

Les vidéos d'histoire sont toujours verticales (c'est-à-dire en mode portrait), avec un rapport hauteur/largeur attendu de 16:9. Utilisez la résolution recommandée pour le type de streaming vidéo :

1. Pour les vidéos MP4, utilisez H.264.
2. Pour les vidéos WEBM, utilisez VP9.
3. Pour les vidéos HLS ou DASH, utilisez H.264.

Optimiser les vidéos

Il existe différents outils que vous pouvez utiliser pour encoder des vidéos et ajuster la qualité de la vidéo pendant l'encodage, mais il est recommandé d'utiliser les optimisations vidéo suivantes :

Passez à la page suivante après la fin de la vidéo

Pour passer automatiquement d'une page à une autre une fois la lecture d'une vidéo terminée, définissez la valeur de l'attribut auto-advance-after de sur l'ID de la vidéo, plutôt que sur la durée attendue de la vidéo.

Exemples d'histoires AMP

Les histoires AMP sont destinées à communiquer un message à votre public. Les histoires AMP réussies contiennent des actifs de haute qualité, sont visuellement riches et partagent des informations pertinentes pour l'utilisateur.

Washington Post

L'histoire de l'AMP du Washington Post tourne autour des dommages catastrophiques de l'ouragan Michael :

Filaire

L'histoire AMP de Wired emmène les utilisateurs dans une visite du musée de la crème glacée :

Magazine de personnes

L'histoire AMP du magazine People présente le mariage royal :

Quel que soit le ton de votre contenu, vous pouvez utiliser des histoires AMP pour transmettre votre message d'une manière plus percutante visuellement.

Publicité sur les stories AMP

Voici comment diffuser des annonces sur les pages d'histoires AMP :

Les stories AMP prennent actuellement en charge deux types de formats d'annonce :

1. Annonce d'une seule page : chaque annonce d'une seule page a un bouton CTA prédéfini et, idéalement, dirige les visiteurs vers une page de destination post-clic.
2. Annonce d'histoire sponsorisée : ce type d'annonce est une annonce autonome à plusieurs étages. Cela fonctionne comme une histoire sponsorisée et les éditeurs peuvent y générer du trafic à partir du bouton URL CTA d'une annonce d'une seule page.

Les histoires AMP ont également de nouvelles capacités de serre-livres qui permettent une prise en charge plus riche des composants des mises en page visuelles. Vous pouvez ajouter des liens CTA, des zones de texte et des cartes portrait et paysage dans les annonces.

Voici un exemple d'annonce d'une seule page Google Pixel 2 dans une story CNN AMP :

Comme pour toutes les autres annonces, pour garantir une page de destination post-clic optimisée, assurez-vous que votre histoire AMP et votre bouton CTA dirigent les visiteurs vers une page de destination post-clic dédiée au lieu d'une page d'accueil occupée.

Créez des expériences visuelles fascinantes avec des histoires AMP

Le format d'histoires AMP vous permet de créer des expériences de narration rapides comme l'éclair et visuellement riches pour votre public. Étant donné que le format est open source, vous pouvez facilement créer des histoires pour votre marque, et parce qu'elles existent sur votre site Web, elles peuvent également être trouvées dans les résultats de recherche. De plus, leur format visuellement immersif se prête à un plus grand engagement du public.

Envie de découvrir ce que le format AMP peut faire pour votre marque ? Découvrez le générateur Instapage AMP en action et découvrez pourquoi Instapage est la plate-forme d'optimisation post-clic la plus robuste du marché.