Breadcrums

Breadcrumbs via Google Tag Manager: voor échte bazen!

Leestijd: 10-15 min.  Implementatietijd: 30-60 min.

Wat zijn breadcrumb-markups en waarom heb je ze nodig?

Een markup van schema.org is een manier om je zoekresultaat aan te vullen met extra data. In dit geval de URL die wordt getoond in je zoekresultaat.

Een voorbeeld zonder:    Voorbeeld SERP zonder crumb

Een voorbeeld mét de markup:

Voorbeeld SERP crumb

Het ziet er veel netter uit en biedt een oplossing om een niet gebruiksvriendelijke URL toch toonbaar te maken in je Google, Bing of Yahoo! zoekresultaat. En laten we eerlijk zijn, je doet het natuurlijk voor Bing en Yahoo!…*kuch*kuch*.

Nu is de vraag….

  1. Wil ik dit?
  2. Gebruik ik Google Tag Manager?

Is je antwoord op beiden vragen ja, dan is dit blogitem dé oplossing voor jou. Zo niet dan kun je beter je webbouwer bellen of gewoon iets anders gaan lezen.

Ingrediënten

We hebben de volgende zaken nodig:

  1. Gezond verstand (aanbevolen).
  2. Google Tag Manager.
  3. De delen van je URL.
  4. Een mogelijkheid zaken aan te passen.
  5. De schema.org snippit.

Stap 1: Breadcrumb URL naar GTM halen

Maak een aangepaste JS-macro aan met het onderstaande stukje code. Dit script haalt de tekst vanaf de 3e / (eerste 2 zitten in http://) uit de URL totdat er weer een “/” gevonden wordt. Bijvoorbeeld: http://www.voorbeeld.nl/xyz/abc geeft je ‘xyz’ terug.

Herhaal dit proces voor het relevante aantal niveaus dat je op je site hebt, waarbij je de [3] steeds met 1 verhoogt.  De macro navNiveau2 bevat dus [4], navNiveau3 [5] etc.

macroNavNiveau

Stap 2: naam van navNiveau aanpassen

Manier 1: naam genereren o.b.v. URL

Dit is een tussenstapje dat je in staat stelt delen van de URL naar wens te wijzigen. De lookup-tabel gaat op zoek naar een exacte match in de waarde navNiveau. Wanneer een veld dat EXACT matcht met het veld ‘invoer’ wordt gevonden wijzigt deze de waarde van ‘naamBreadCrumb’. Zo niet, dan wordt navNiveau als waarde genomen.

Een voorbeeld; navNiveau1 = voorbeeld123  –> lookup invoer = voorbeeld123, uitgang = voorbeeld321 –>  naamBreadCrumb1 = voorbeeld321.

In de screenshots zijn dit de waarden a en b.

lookopMacro

Omdat een URL geen spaties bevat gebruikt navNiveau streepjes om woorden te scheiden. Je kunt de bovenstaande actie ook uitvoeren voor een nieuwe macro die de streepjes vervangt door spaties. Hiervoor kun je de volgende JS-macro gebruiken:

function() {
var subCatURL = {{Page URL}};
var subCatHashSplit = subCatURL.split(‘/’)[3];
var subCat = subCatHashSplit.split(‘?’)[0];
return subCat.replace(/[-]/g, ‘ ‘);
}

Manier 2: uit bestaande breadcrumb halen

Mocht je een bestaande breadcrumb hebben dan kun je deze ook in GTM ophalen. Uiteraard is het makkelijker om het direct in de code aan te passen. Mocht direct wijzigen om wat voor reden dan ook niet gaan dan kun je ook zelf de data ophalen, vergelijkbaar met hoe je dat met de URL doet.

In dit geval kun je vaak de DOM-element macro gebruiken en daar CSS selector kiezen om o.b.v. elementnamen, klassen en ID’s het gewenste item op te halen.

dom selector

Voorbeeld:

Onze breadcrumb ziet er als volgt uit:

Voorbeeld breadcrum

In de HTML is dat:

HTML crumb

De DOM-element CSS selectors in GTM:

  • ul#breadcrumbs>li:nth-of-type(1)  –> Home –> niet nodig voor tag.
  • ul#breadcrumbs>li:nth-of-type(2) –> Blog –>  naamBreadCrumb1.
  • ul#breadcrumbs>li:nth-of-type(3) –> Affiliate markting –> naamBreadCrumb2.
  • ul#breadcrumbs>li:nth-of-type(4) –> [naam artikel] –> naamBreadCrumb3.

Stap 3: Custom HTML tags opzetten 

Nu we alle vereiste data hebben kunnen we deze meegeven in hetgeen Google leest. Dat kan in HTML (Microdata en RDFa) of met Javascript (JSON) – de code verschilt aanzienlijk dus check even wat je gebruikt. In dit geval gebruiken we JSON. De orginele code vind je hier.

Maak voor elk niveau een custom HTML tag aan. In dit geval zijn het er 3, maar je kunt alle tags, rules en macro’s eenvoudig uitbreiden voor een extra niveau.

Niveau 1

Tag1JSON

Niveau 2

Tag2JSON

Niveau 3

Tag3JSON

Bonus..

Als extraatje ook nog een voorbeeld van een Microformats-snippet met dezelfde data als navigatieniveau 2 hierboven. In deze code is nog een <div> niveau met ‘hidden’ toegevoegd, anders zie je dit stukje code op de pagina staan.

tag2

Stap 4: je HTML tags triggeren

Maak de volgende triggers aan en verbind ze aan de tag met dezelfde naam. Let goed op twee zaken:

  1. Regex; komt wel of niet overeen.
  2. Tag af laten gaan op ‘pagina geladen’. Dit is een onbelangrijke tag qua prioriteit in laadtijd, dus is het beter andere tagging voorrang te geven (bijv. Google Analytics, Adwords conversiescripts).

Je kunt de rules uiteraard uitbreiden wanneer je meer niveaus hebt.

Niveau 1

Rule1

Niveau 2

Rule2

Niveau 3

Rule3 

Stap 5: testen

Testen is tweeledig;

  1. Test je tags met de Google Tag Manager debug tool. Gaat alles (correct) af? Wat wordt er meegegeven? Dit doe je door op ‘voorbeeld’ te klikken. Wanneer je dan je pagina ververst wordt een overlay getoond met alles dat in GTM afgaat op die pagina. Hier wil je op ‘Pageload’ kijken en vervolgens op je tag klikken. Daar kun je kijken welke waarden meegegeven worden in je script.

debug

  1. Test de breadcrumb snippet in de structured data test tool. Hierbij is het makkelijkste om een URL op te halen en te valideren.

In dit voorbeeld een recent blogitem van BlooSEM collega Eva:

SDTT

That’s it!

Je bent weer een stapje dichterbij een superaantrekkelijk zoekresultaat!  Gaat dit je te snel, maar wil je wel zo’n breadcrum? Of heb je hulp nodig met Google Tag Manager?

BlooSEM helpt je graag! Neem gerust contact met ons op.

 

2 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *