.svg){kind=small}
.avif)
Apprenez à utiliser les variables de Google Tag Manager pour injecter dynamiquement des données structurées sur votre site web, un gain de temps précieux qui vous aidera à obtenir des résultats de recherche enrichis. Cet article explique comment automatiser l'implémentation de balises JSON-LD sur un grand nombre de pages modèles, en particulier pour les sites de commerce électronique. L'auteur, Benjamin Burkholder, montre comment utiliser des sélecteurs CSS pour cibler des éléments de données spécifiques et les intégrer dans Google Tag Manager. Cette méthode permet de réduire les efforts manuels et de garantir que les balises structurées restent à jour même lorsque le contenu des pages change. Que vous travailliez avec une équipe de développement ou que vous gériez un petit site sur un CMS comme WordPress, cet article offre des guides pratiques pour chaque scénario. Du paramétrage des balises et des déclencheurs à la création de variables, vous apprendrez comment mettre en place et tester vos balises pour vous assurer qu'elles fonctionnent correctement. Enfin, l'article montre également comment valider les données structurées avec l'outil de test de Google pour s'assurer qu'elles sont correctement lues par le moteur de recherche. Une lecture indispensable pour quiconque désirant optimiser efficacement son site avec Google Tag Manager.
Utiliser les Variables de Google Tag Manager pour Injecter Dynamiquement des Données Structurées
Les experts en SEO connaissent bien l'ajout de balisage JSON-LD dans le code source des pages web pour obtenir des résultats de recherche enrichis. Cela dit, cette tâche peut être chronophage car il faut ajouter des données uniques pour chaque page concernée. Ce que beaucoup ignorent, c'est qu'il existe une méthode pour rendre ce processus évolutif sur l'ensemble d'un site en utilisant Google Tag Manager.
Le Scénario
Imaginons que vous gériez un grand site e-commerce avec une multitude de pages produits. Ces pages reposent sur le même modèle, elles sont donc similaires dans leur structure et la disposition de leur contenu. Ces pages sont idéales pour l'ajout de données structurées, mais la tâche peut sembler insurmontable en raison du nombre de pages. Si vous adoptez une approche manuelle ou même un plugin, cela pourrait prendre beaucoup de temps pour appliquer des schémas uniques à chaque page.
Un autre problème majeur est que le schéma peut ne pas être dynamique. Si le contenu change, le schéma reste identique. Pas idéal.
C'est là que Google Tag Manager intervient. Nous allons créer une balise avec des variables qui récupèrent dynamiquement des données spécifiques sur une page donnée, résolvant ainsi notre problème à l'avenir.
Comment cela Fonctionne-t-il ?
Il existe deux options pour cibler un élément de données : par sélecteur CSS ou par ID. Dans cet exemple, nous allons utiliser un sélecteur CSS.
Chaque élément de données doit avoir une "classe" unique. Cela permet de s’assurer que, lorsque de nouvelles pages produits sont créées, elles puissent avoir des données structurées précises automatiquement.
Les Champs Produits à Créer
- Nom :
<h2 class="productName">Sweatshirt Orange</h2>
- Prix :
<div class="productPrice">16.99</div>
- Description :
<div class="productDescription">Un sweatshirt orange parfait pour une journée fraîche d'automne.</div>
- Image :
<img class="productImage" src="https://domaine.com/vêtements/sweatshirt-orange.jpg">
Ensuite, il faut ajouter un sélecteur CSS pour chacune de ces classes dans la feuille de style. Ce sont ces sélecteurs que nous allons cibler avec Google Tag Manager.
Mise en Place des Sélecteurs CSS
Si…
- Vous avez une équipe de développeurs, demandez-leur d’ajouter ces classes à chaque champ au niveau du modèle et voyez leurs suggestions.
- Vous gérez un petit site sur un CMS (WordPress, Drupal, etc.), vous pouvez ajouter manuellement les classes aux champs de chaque page.
Voici comment cela se présente sur WordPress si c’est fait manuellement page par page.
Utilisation de Google Tag Manager sur un CMS WordPress
Comme décrit précédemment, il est préférable de laisser vos développeurs assigner les classes uniques au niveau du modèle. Cependant, si vous gérez un petit site, cette section vous guidera pour réaliser le processus manuel en utilisant WordPress comme CMS.
D'abord, nous devons ajouter les classes personnalisées à chaque champ de données, via l'éditeur de texte standard.
Ensuite, nous devons créer les sélecteurs CSS pour cibler ces classes uniques.
- Dans l’interface de gestion de site WordPress :
- Allez dans "Apparence", puis sélectionnez "Personnaliser".
- Allez dans "Options Avancées" et cliquez sur "CSS Supplémentaire".
Voici où nous pouvons ajouter nos sélecteurs CSS personnalisés. Le sélecteur doit seulement être présent pour être ciblé par Google Tag Manager, il n'est pas nécessaire d’avoir des désignations de style.
Une fois que vous avez créé les sélecteurs CSS pour les classes produits, vous n'aurez plus besoin d'en créer d'autres. En assignant simplement la classe correcte à chaque champ, les sélecteurs CSS dans la feuille de style les cibleront.
Configuration des Balises dans Google Tag Manager
Pour éviter de passer trop de temps sur les étapes générales d’accès à GTM et la vérification de votre compte, nous allons directement nous concentrer sur la configuration des balises, déclencheurs et variables.
Configuration de votre Balise
- Sélectionnez "Balises" dans la navigation verticale, puis cliquez sur le bouton "Nouvelle".
- Donnez un nom à la balise en haut à gauche.
- Cliquez dans le bloc "Configuration de la Balise" et sélectionnez "HTML Personnalisé".
- Insérez le script JSON-LD dans l’espace blanc de la balise et cochez la case "Support document.write".
Si vous avez des difficultés pour créer le schéma JSON-LD, utilisez un générateur de balises schema. Copiez et collez ensuite dans la balise.
Configuration de votre Déclencheur
- Sélectionnez "Déclencheurs" dans la navigation verticale à gauche, puis cliquez sur "Nouveau".
- Cliquez dans le bloc "Configuration du Déclencheur" et sélectionnez "Vue de Page".
- Changez "Ce déclencheur se déclenche sur" à "Certaines Vues de Page".
- Ici, vous pouvez spécifier un sous-dossier commun dans le chemin URL à cibler.
Exemple : Si votre URL produit est https://exemple.com/produits/vêtements/sweatshirt-orange, ciblez le sous-dossier “/vêtements/”.
Configuration de vos Variables
- Sélectionnez "Variables" dans la navigation verticale, puis cliquez sur le bouton "Nouvelle".
- Nommer la variable en fonction des données qu'elle cible (par exemple, "Nom du Produit").
- Cliquez dans le bloc "Configuration de la Variable" et sélectionnez "Élément DOM".
- Sélectionnez "Sélecteur CSS" dans le menu déroulant Méthode de Sélection, et entrez l’emplacement de l'élément de données.
Utilisez les outils de développement Chrome pour trouver la classe unique pour la page. Entrez cette classe dans le champ "Sélecteur d'Élément" dans GTM.
Tester la Balise
Depuis la page d'accueil de Tag Manager, cliquez sur le bouton "Aperçu". Ouvrez un nouvel onglet, chargez la page à tester et vérifiez en bas si la balise se déclenche correctement.
Une fois satisfait que la balise fonctionne, retournez à GTM et cliquez sur "Quitter le Mode Aperçu".
Tester les Données Structurées
Faites une vérification visuelle dans l'onglet "éléments" des outils de développement Chrome pour vérifier si les données sont correctes.
Ensuite, utilisez l'outil de test des données structurées de Google pour confirmer que Google peut lire les données sans erreurs.
Conclusion
En utilisant des variables dans Google Tag Manager, vous pouvez étendre l'implémentation de données structurées sur un grand nombre de pages modélisées. Assignez simplement les classes nécessaires à chaque champ de données lors de la création ou la modification de pages.
Bien que l'exemple traité ici soit sur WordPress, ce processus peut être adapté à d'autres CMS ou un site personnalisé, tant que vous avez accès à la feuille de style CSS et la possibilité d'éditer le texte.
En espérant que cet article vous ait fourni des informations précieuses pour optimiser l'implémentation des données structurées. Google Tag Manager offre bien d'autres possibilités à explorer.
