Injection de données structurées en JSON-LD avec Google Tag Manager

Il est aujourd’hui possible d’injecter des données structurées avec Google Tag Manager. Une belle opportunité pour les marketers qui n’ont plus besoin de baliser l’intégralité de leur code.

Pour rappel, Google Tag Manager permet d’ajouter rapidement du code sur votre site internet sans faire appel à des développeurs (ou presque car il vaut mieux avoir de bonnes connaissances techniques pour tirer pleinement profit de cet outil).

Avec du JSON-LD, une extension du JSON qui permet d’interconnecter des données contextualisées entre différents sites Web, il vous suffit de quelques balises GTM pour transmettre aux moteurs de recherche vos données structurées. Ils seront ainsi en mesure d’interpréter le contenu de vos pages Web et d’afficher des résultats de recherche enrichis.

Résultat de recherche enrichi sur Google

Les annonceurs et les e-commerçants ont donc tout intérêt à transmettre des données structurées aux moteurs de recherche car leurs pages de destination et leurs produits seront mis en avant et capteront ainsi plus efficacement l’attention des utilisateurs.

Il en va de même pour les entreprises, les marques et les individus qui peuvent avoir une certaine influence sur la présentation de leur profil dans les moteurs de recherche, notamment au niveau du Knowledge Graph de Google.

Procédure à suivre dans Google Tag Manager

La procédure est rapide pour les types d’élément globaux ne nécessitant pas forcément la récupération de valeurs dynamiques sur votre site.

Créez une “balise HTML personnalisée” dans Google Tag Manager
Déclenchez cette balise sur toutes les pages du site
Renseignez le code JSON-LD et publiez

Google Tag Manager - Balise Schema.org - Person

Je vous conseille d’utiliser l’outil de test des données structurées de Google pour effectuer vos tests.

Voici quelques exemples de données structurées que vous pouvez injecter depuis Google Tag Manager (vous trouverez toute la documentation relative aux données structurées sur le site Schema.org).

Website

<script type="application/ld+json">
{ 
  "@context": "http://schema.org", 
  "@type": "WebSite", 
  "url": "http://www.cardis.ch", 
  "potentialAction": { 
    "@type": "SearchAction", 
    "target": "http://www.cardis.ch/fr/search/?locationName={search_term}", 
    "query-input": "required name=search_term" } 
}
</script>

Person

<script type="application/ld+json">
{ 
  "@context" : "http://schema.org",
  "@type" : "Person",
  "url" : "http://www.antistatique.net",
  "name" : "Damien Magnenat",
  "sameAs" : [ "http://ch.linkedin.com/in/damienmagnenat",
      "https://plus.google.com/+DamienMagnenat",
      "https://twitter.com/DamienMagnenat" ] 
}
</script>

Organization

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "Antistatique",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Lausanne, Switzerland",
    "postalCode": "1004",
    "streetAddress": "Rue de Sébeillon 9b"
  },
  "email": "hello(at)antistatique.net",
  "telephone": "+41 21 623 63 03",
  "url" : "http://www.antistatique.net",
  "logo" : "http://www.antistatique.net/logo.png"
}
</script>

Initialisation de la couche de données et récupération de valeurs dynamiques

Cela se complique un peu lorsque nous souhaitons obtenir des données dynamiques, comme par exemple les caractéristiques détaillées de vos produits sur votre site e-commerce.

Il existe plusieurs possibilités de récupérer ces données. Je vous recommande d’utiliser la couche de données (dataLayer) qui est assurément la solution la plus propre et efficace.

Initialisez vos variables de couche de données sur vos pages produits

<script>

dataLayer = [{"pageCategory":"product",
"productID":"10240", "productPrice":"259.00",
"productName":"Red Five X-wing Starfighter™",
"productDescription":"Construis le X-wing Starfighter LEGO® Star Wars™ très détaillé avec des ailes qui se replient, un cockpit qui s'ouvre, un support d'exposition et R2-D2 !", 
"productUrl":"http://shop.lego.com/fr-CH/Red-Five-X-wing-Starfighter-10240"}];

</script>

Créez des macros de type “Variable de couche de données” pour récupérer la valeur des variables que vous avez définies dans votre dataLayer.
Créez votre balise de données structurées “Schema.org – Product”.Appelez vos différentes macros pour renseigner chacune des propriétés.
Créez votre balise de données structurées “Schema.org – Product”. Appelez vos différentes macros pour renseigner chacune des propriétés.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "description": "{{Product Description}}",
  "name": "{{Product Name}}",
  "offers": {
    "@type": "Offer",
    "availability": "http://schema.org/InStock",
    "price": "{{Product Price}}",
    "priceCurrency": "{{Currency}}"
  }
}
</script>

4.Déclenchez cette balise uniquement sur les pages de type “product” définie avec la variable “productCategory”

Google Tag Manager - Déclencheur - Page Category — Déclencheur

Google Tag Manager - Balise Schema.org - Product — Balise

Conclusion

Les pages de résultats de recherche sont toujours plus sophistiquées et disposent de fonctionnalités encore trop souvent ignorées. Grâce aux données structurées, vous augmentez vos chances de vous distinguer de la concurrence et de générer du trafic sur votre site par le biais du référencent naturel.

Que ce soit sur un simple blog ou sur un site internet complexe tel qu’un site e-commerce, Google Tag Manager offre de nombreuses perspectives et une très grande flexibilité dans l’implémentation de vos données structurées.

Je me réjouis d’ores et déjà de recevoir vos commentaires et me tiens à votre disposition pour répondre à vos questions et vous conseiller sur l’utilisation de Google Tag Manager.