Vous avez remarqué ces histoires visuelles captivantes sur Instagram, Facebook et Snapchat qui attirent l'attention et maintiennent les visiteurs en train de faire défiler. Vous pouvez ajouter ce même type de contenu attrayant à votre site WordPress en utilisant les Google Web Stories.
Google Web Stories offre un moyen attrayant de vous connecter avec votre public. Il vous permet de partager du contenu concis, des points forts de produits ou des aperçus des coulisses dans un format adapté aux mobiles.
Cet article vous guidera à travers les étapes simples pour ajouter des Google Web Stories à votre site WordPress afin de capter l'attention de vos visiteurs et de les maintenir engagés.

Voici les sujets que nous aborderons dans cet article :
- Que sont les Google Web Stories ?
- Pourquoi utiliser les Google Web Stories ?
- Comment ajouter des Google Web Stories à WordPress ?
- Afficher une Web Story dans WordPress
- Ajouter des intégrations aux Google Web Stories
Que sont les Google Web Stories ?
Les Google Web Stories sont un format de contenu court populaire, similaire au format d'histoires utilisé par les plateformes de médias sociaux comme Instagram, Facebook, Snapchat et YouTube.
Ils ne sont pas toujours appelés de la même manière, mais ils font tous la même chose.
Ce sont des diapositives interactives et cliquables avec du contenu multimédia riche comme des images, de la musique et des vidéos. Tous ces éléments les rendent très attrayants.

Pourquoi utiliser les Google Web Stories ?
L'utilisation des Google Web Stories vous permet d'apporter le format d'histoire interactif sur votre propre site Web. Cela vous donne plus de contrôle et de flexibilité, et vous ne dépendez pas de l'algorithme d'une plateforme tierce pour le montrer à votre public.
Voici quelques raisons supplémentaires d'utiliser les Google Web Stories :
- Google Web Stories vous permet d'apporter le format d'histoire sur votre site Web. Vous pouvez créer et publier des histoires interactives prêtes pour mobile sur votre propre site.
- C'est très engageant, et les utilisateurs engagés sont plus susceptibles de convertir et de passer plus de temps sur votre site Web WordPress, ce qui signifie plus de ventes, de conversions et de croissance pour votre entreprise et votre marque.
- Ils utilisent le format AMP, prennent en charge les données structurées et peuvent même être monétisés à l'aide de Google AdSense.
- Les Google Web Stories peuvent être indexées et apparaître dans les résultats de recherche Google et Discover.

Cela étant dit, examinons comment ajouter facilement des Google Web Stories à votre site WordPress.
Comment ajouter des Google Web Stories à WordPress ?
Vous pouvez ajouter des Google Web Stories à WordPress en utilisant le plugin gratuit Web Stories. Créé par Google, ce plugin vous permet de concevoir et de créer de magnifiques web stories et de les publier facilement sur votre site.
Tout d'abord, vous devez installer et activer le plugin Web Stories. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Web Stories est un plugin gratuit développé et maintenu par Google. Il vise à populariser le format des web stories et à l'apporter aux sites Web autonomes et indépendants.
Accédez à la page Stories » Tableau de bord après l'activation du plugin pour créer votre première story.
Vous pouvez commencer par sélectionner l'un des modèles comme point de départ de votre story ou cliquer sur le bouton « Créer une nouvelle story » pour commencer à partir de zéro.

Nous vous recommandons de commencer par un modèle, car il vous donne une bonne longueur d'avance et est beaucoup plus facile pour les débutants.
Une fois que vous avez choisi un modèle, le plugin lancera l'interface du constructeur d'histoires. Il fonctionne de manière similaire aux populaires plugins de constructeur de pages glisser-déposer pour WordPress.

Vous pouvez simplement cliquer sur n'importe quel élément pour le modifier ou ajouter de nouveaux éléments depuis la colonne de gauche.
Vous pouvez ajouter de l'audio, de la vidéo, des images, du texte, des titres, des autocollants, des emojis, et plus encore.

Si vous utilisez un modèle, vous verrez des pages supplémentaires générées par le modèle en bas.
Vous pouvez naviguer entre les pages en cliquant dessus. Vous pouvez également supprimer une page ou en ajouter une nouvelle si nécessaire.

Vous pouvez également cliquer sur une page pour définir une couleur d'arrière-plan ou un média.
Lors du choix d'une couleur d'arrière-plan pour votre page, vous trouverez également l'option d'ajouter un bouton d'appel à l'action.

Ajoutez simplement une URL et choisissez entre les thèmes sombre ou clair.
Facultativement, vous pouvez également ajouter une icône à votre bouton d'appel à l'action et rendre le lien sponsorisé / nofollow.
De même, si vous avez WooCommerce installé, vous pouvez également afficher des produits.

Cependant, vous devrez d'abord activer l'intégration WooCommerce dans les paramètres du plugin (nous vous montrons comment faire cela plus loin dans notre article).
Une fois que vous êtes satisfait de l'histoire, vous pouvez passer à l'onglet « Document » dans la colonne de gauche pour configurer les paramètres de publication.
À partir de là, vous devez télécharger un logo d'éditeur (votre logo de site Web ou l'icône du site conviendront ici) et une image d'affiche pour votre histoire.

Idéalement, une image d'affiche devrait avoir un ratio de 3:4 et un minimum de 640 x 853 pixels.
N'oubliez pas de fournir un titre pour votre histoire et une description. Cela aidera à optimiser votre histoire pour le référencement et à améliorer sa découvrabilité.
En dessous, vous pouvez choisir comment vous souhaitez que les pages soient avancées. Par défaut, les pages changeront toutes les 7 secondes. Vous pouvez modifier cela ou laisser les utilisateurs appuyer manuellement pour changer de page.

Enfin, vous pouvez choisir des catégories et des tags pour votre histoire.
Cette étape est facultative, mais l'attribution d'une catégorie et l'ajout de tags à votre histoire aideront au référencement.
Vous remarquerez un bouton intitulé « M » dans le coin inférieur droit de l'éditeur d'histoires. Cliquer dessus affichera les boîtes de métadonnées ajoutées à WordPress par les plugins installés sur votre site Web.

Par exemple, si vous utilisez le plugin All in One SEO for WordPress, vous verrez les paramètres SEO.
À partir de là, vous pouvez remplir le titre SEO, la méta-description et les paramètres de schéma pour votre histoire Web.

De même, si vous avez le plugin WPCode installé, vous pouvez ajouter des extraits de code personnalisés que vous souhaitez exécuter lorsque cette histoire est affichée.
C'est pratique si vous souhaitez utiliser des pixels de suivi personnalisés pour vos histoires.

Vous êtes maintenant prêt à publier votre histoire Web.
Cliquez simplement sur le bouton « Publier » dans le coin supérieur droit de l'écran.

Une liste de contrôle avant publication vous sera présentée. Si tout semble correct, cliquez sur le bouton de publication pour mettre votre histoire en ligne.
Afficher une Web Story dans WordPress
Le plugin vous permettra d'ajouter votre histoire à un nouvel article de blog lorsque vous la publierez.

Cependant, vous pouvez ajouter votre histoire à n'importe quel article existant, page ou barre latérale.
Modifiez simplement l'article ou la page où vous souhaitez afficher l'histoire et ajoutez le bloc Histoires Web à l'éditeur d'articles.

Dans les paramètres du bloc, vous pouvez choisir plusieurs stories, les plus récentes ou une seule.
Si vous sélectionnez les options « stories les plus récentes » ou « plusieurs stories », vous verrez également des options d'affichage supplémentaires pour afficher les stories en cercle, en carrousel, en liste ou en grille.

Une fois satisfait de l'article, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos modifications.
Vous pouvez maintenant visiter votre blog WordPress pour voir vos web stories en action.
Voici à quoi cela ressemblait sur la page d'accueil de notre site de test dans le format carrousel à plusieurs histoires.

Les web stories sont leur propre type de publication personnalisé dans WordPress, ce qui signifie que vous pouvez les afficher comme n'importe quelle autre page ou publication dans WordPress.
Par exemple, elles ont leur page d'archive que vous pouvez utiliser comme page de destination pour les visiteurs, ou vous pourriez les mettre en avant individuellement comme vous le feriez avec un produit WooCommerce (qui est également affiché à l'aide d'un type de publication personnalisé).
Ajouter des intégrations aux Google Web Stories
Le plugin Web Stories dispose de quelques intégrations intégrées que vous pouvez utiliser.
Vous pouvez trouver ces intégrations sur la page Histoires » Paramètres.
Ajout de Google Analytics aux Web Stories
Tout d'abord, vous pouvez ajouter votre identifiant de profil Google Analytics ici. Cela vous permettra de suivre les vues de vos histoires dans vos rapports Google Analytics.

Si vous utilisez MonsterInsights, vous pouvez trouver votre identifiant de suivi Google Analytics sur la page Insights » Paramètres.
Votre identifiant de mesure s'affiche dans la section Profil du site Web.

Si vous n'utilisez pas MonsterInsights, vous pouvez trouver l'identifiant de suivi dans Google Analytics.
Accédez simplement à l'onglet « Admin » et cliquez sur « Flux de données ».

Ensuite, vous verrez votre site Web et d'autres profils sous forme de flux de données.
Cliquez sur le profil de votre site Web pour le développer.

Sur l'écran suivant, vous verrez le profil de votre site Web avec l'identifiant de mesure.
Copiez simplement l'ID de mesure et collez-le dans les paramètres du plugin Web Stories.

Ajout de polices personnalisées aux Web Stories
Si vous souhaitez utiliser une police spécifique dans Web Stories, vous devrez la téléverser manuellement sur votre site Web à l'aide de FTP.
Téléversez simplement le fichier de police dans le dossier /wp-content/ de votre site Web. Une fois téléversé, l'emplacement de votre police téléversée sera :
http://example.com/wp-content/font-file-name.ttf
N'oubliez pas de remplacer example.com par votre propre nom de domaine et font-file-name.ttf par le nom réel du fichier de police.
Après cela, copiez et collez cette URL dans Stories » Paramètres dans la section « Polices personnalisées ».

Ajout d'intégrations de monétisation dans Web Stories
Web Stories prend en charge Google AdSense et Google Ad Manager pour les options de monétisation.
Sélectionnez simplement votre option de monétisation et entrez les informations requises. Par exemple, vous aurez besoin d'un ID d'éditeur et d'un ID d'emplacement publicitaire pour l'unité publicitaire.

Activer les intégrations e-commerce pour Web Stories
Si vous utilisez WooCommerce ou Shopify pour gérer votre boutique en ligne, vous pouvez alors activer la prise en charge du commerce électronique pour Web Stories.
Cela vous permettra d'ajouter des produits à vos web stories.
Faites simplement défiler vers le bas jusqu'à la section Shopping sur la page Stories » Paramètres et sélectionnez votre plateforme e-commerce dans le menu déroulant.

Pour WooCommerce, le plugin commencera automatiquement à afficher vos produits.
Pour Shopify, vous devrez fournir l'adresse de votre boutique et générer un jeton d'accès API.

Si vous n’en avez pas encore, cliquez simplement sur le lien « apprendre comment en obtenir un », et vous serez redirigé vers les instructions pour générer votre jeton API Shopify.
Nous espérons que cet article vous a aidé à ajouter des Google Web Stories à votre site WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment intégrer des vidéos TikTok dans WordPress ou nos meilleurs choix de meilleurs plugins de médias sociaux pour WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.

Dennis Muthomi
Been wanting to add these to my WordPress site, and you’ve made it super easy to follow.
The Analytics integration details are super helpful! Really like how you broke down the custom font options too. These are exactly the tweaks I wanted to try out
THANK YOU WPBeginer team for this