C’est pour continuer sur cette lancée que Google révèle aujourd’hui comment un développeur peut utiliser AMP pour créer des pages ecommerce AMP sur mobile afin d’améliorer les conversions.
Google ayant récemment annoncé que tous les types de contenus AMP s’afficheront maintenant dans les 10 résultats organiques des SERPs, c’est à dire en dehors du carrousel initialement destiné exclusivement aux pages AMP.
Cela signifie que depuis la page d’accueil, tout le parcours du visiteur jusqu'à la phase d’achat, qui techniquement se fait en dehors d’AMP, et donc sur HTML ou Progressive Web App (PWA), va migrer vers AMP pour offrir une meilleure expérience utilisateur pour l’utilisateur.
Ce qu’il faut savoir avant de commencer
L’idée générale, c’est que le site ecommerce en entier n’a pas besoin d’être converti au format AMP. Google recommande d’analyser et de transformer en AMP des parties du site qui font sens pour un site ecommerce.
Vous devez donc d’abord identifier l’objectif principal de chaque page et ses fonctionnalités clés pour décider par où commencer.
AMP dispose d’une large sélection d’éléments pré-concus et faciles à utiliser pour permettre des expériences interactives telles que des carrousels d’images ou des outils de collection de données analytiques.
Ces éléments fondamentaux sont un bon point de départ. Les fonctionnalités telles que les descriptions des produits, les images, les avis et la navigation peuvent désormais facilement être implémentées au format AMP.
Etape 1 : La navigation
Selon Google AMP, les utilisateurs peuvent commencer leurs visites depuis la page d’accueil du site ecommerce ou depuis une page catégorie d’un produit. Ce sont des pages importantes à mettre au format AMP en premier.
 |
| Images via amp project |
Ces types de pages sont très bien adaptés pour être des pages AMP. Le contenu est généralement statique et bien orienté pour offrir la meilleure vitrine des produits disponibles.
Utilisez donc des fonctionnalités comme <amp-carrousel> pour offrir une navigation optimisée pour le mobile pour parcourir les autres produits organisés en sous-catégories.
Etape 2 : Page de destination sur une fiche produit
Certains utilisateurs arrivent sur une page produit au format AMP après avoir cliqué sur un item à partir d’un listing affiché sur la page d’accueil du site ecommerce.
AMP peut désormais vous aider à créer une belle page pour mettre en valeur votre produit. Vous pouvez ajouter de grandes images et des vidéos à l’aide de la <amp-carousel> et <amp-video>.
Pour les sections de votre site ecommerce qui nécessitent plus de détails ou des descriptions plus étendues, vous pouvez utiliser le tag <amp-accordion>.
De plus, pour permettre aux utilisateurs de partager des liens produits, vous pouvez utiliser l’élément <amp-social-share>. Si un utilisateur souhaite explorer d’autres parties du site, le tag <amp-sidebar> vous permet d’implémenter un menu de navigation sur toutes les pages.
Etape 3 : Explorer les produits relatifs ou similaires
Très souvent, arrivés sur un site ecommerce pour découvrir un produit recherché, les utilisateurs peuvent changer d’avis et ne plus être intéressés par ledit produit. Il serait donc opportun de leur proposer plus de produits susceptibles de les convenir.
Avec AMP, il existe de nombreuses approches pour montrer des produits similaires (exemple ici) aux utilisateurs sur mobile. L’une des approches consiste à afficher une liste statique de produits relatifs.
Une autre approche va consister à générer une liste de produits à la volée. Pour ce faire, vous devez utiliser un code JSON qui montrera dynamiquement les produits relatifs à partir de votre base de données.
Et ce, grâce à la template dite amp-mustache.
Etape 4 : Personnaliser et comprendre
En matière d’e-commerce, les préférences des utilisateurs comptent beaucoup. Avec AMP, vous pouvez personnaliser le contenu pour chaque visiteur pour augmenter les conversions.
Utilisez l’élément <amp-access> pour afficher différents blocs de contenu en fonction du statut de l’utilisateur. Le contenu pourra alors être différent selon que l’utilisateur, par exemple, est connecté ou pas à son compte sur le site.
Par la suite, pour voir comment l’utilisateur interagit avec votre site de vente en ligne, vous pouvez utiliser l’élément <amp-analytics>. Tout comme vous pouvez directement collecter, ou intégrer une plateforme analytics tierce surpportant AMP.
Etape 5 : Accepter les commandes via les pages AMP
Comme le dit Google AMP, la dernière pièce du puzzle arrive au moment où l’utilisateur décide d’acheter un produit et clique sur le bouton “Acheter”.
On pourrait alors s’imaginer être sur le point de basculer d’un environnement exclusivement AMP vers un environnement HTML classique. Vous pouvez vous assurer que la transition sera rapide et conforme à l’expérience que l’utilisateur a eue jusqu’à présent.
Si votre site mobile est en Progressive Web App (PWA), alors AMP prévoit un pont idéal sous la forme du tag <amp-install-serviceworker>. Cela permet à votre page AMP d’installer un service de paiement en ligne pour votre nom de domaine, peu importe où l’utilisateur consulte la page produit AMP.
Vous pouvez préventivement commencer à mettre le contenu de votre PWA en cache pour que, lorsque la transition se fera, tout le contenu nécessaire soit vraiment mis en cache, pour garder l’expérience rapide et le client toujours engagé.
Etape 6 : Ayez toujours le cache à l'esprit
A la base, AMP a été développée pour fonctionner avec un système de cache intelligent. Ce qui permet aux plateformes qui envoient du trafic aux pages AMP d’utiliser le cache pour charger rapidement, pour ne pas dire instantanément, les pages web mobile.
Cependant, cela signifie également que vous pouvez voir moins de trafic sur votre propre nom de domaine où les pages AMP sont à l’origine hébergées et voir le reste du trafic provenant du proxy des versions de vos pages servies par les caches AMP.
Il est important de prendre ces facteurs en considération au moment de l’analyse de votre trafic et de l’engagement des utilisateurs sur vos pages AMP.
