Trusted Shops gebruiken met de Google Tag Manager

Stap 1

Ga in je accountbeheer naar de Google Tag Manager en selecteer het menuonderdeel "Tags" (01_16x16.png) in de hoofdnavigatiebalk aan de linkerkant van het venster. Klik in het overzicht dat wordt geopend op de knop "Nieuw" (02_16x16.png).

Tags_Neu_nl.png

Geef de nieuwe tag eerst een naam (01_16x16.png) (bijv. "Trustbadge"). Klik vervolgens op "Tagconfiguratie" (02_16x16.png). Er wordt een nieuw menu geopend. Kies hierin de optie "Aangepaste HTML" (03_16x16.png).

NeuesTag_Benutzerdefiniertes-HTML_nl.png

Stap 2

Voor de volgende stap heb je de Trustbadge®-code nodig die bij je webshop hoort. De code kan hier worden gegenereerd met behulp van je Trusted Shops ID of de URL van je webshop. Vervolgens wordt je persoonlijke Trustbadge code automatisch gegenereerd.

Je vindt je Trusted Shops ID (beginnend met X ...) in het dashboard van de My Trusted Shops-backend. Hiervoor log je eerst in op My Trusted Shops. Na het inloggen kom je direct op het dashboard. In de rechterkolom van het dashboard worden de webshops die je bij Trusted Shops geregistreerd hebt, weergegeven met de respectievelijke Trusted Shops ID (TS-ID).

Kopieer de complete Trustbadge-code en ga terug naar de Google Tag Manager. Voeg de code in in het invoerveld "HTML" (01_16x16.png) en zet een vinkje bij "document.write ondersteunen" (02_16x16.png). Klik vervolgens op het veld "Triggers" (03_16x16.png).

NeuesTag_Code-einf_gen_nl.png

In de volgende stap definieer je op welke pagina van je webshop de nieuw aangemaakte tag, met de Trustbadge, moet worden getoond. Selecteer "All Pages". Daarna kom je weer terug bij het tagoverzicht. Klik hier op de button "Opslaan" in de hoek rechtsboven.

Trigger_AllPages_nl.png

Zo wordt de Trustbadge getoond op iedere pagina van je shop, ook op de bedankpagina.

Stap 3

Om je klanten beoordelingsverzoeken te kunnen sturen en na de certificering de kopersbescherming aan te kunnen bieden, heeft de Trustbadge nog wat hulp nodig. Dit wordt gerealiseerd door het plaatsen van een DIV-element ter herkenning van uw bevestigingspagina voor de bestelling (pagina waarop de klant wordt bedankt). De Trustbadge opent daar dan automatisch de Trustcard voor je bezoekers, die de verzekering van de bestelling en/of de toestemming voor de beoordelingsherinnering bevat.

Om het voor online shoppers zo eenvoudig mogelijk te maken en zij niet nogmaals hun bestelgegevens moeten invoeren, dienen de gegevens voor de kopersbescherming en de beoordelingsherinnering uit uw shoptemplate direct aan de Trustbadge overgedragen te worden. De Google Tag Manager heeft de mogelijkheid om toegang te krijgen tot alle gegevens die noodzakelijk zijn voor het afsluiten van de kopersbescherming van Trusted Shops. Dit kan worden gerealiseerd door de code van de Google Tag Manager op de pagina met de aankoopbevestiging te voorzien van een extra JavaScript-object, het DataLayer-object.

Hiervoor heb je de volgende code nodig.

<script>
    dataLayer.push({
    ts_checkout: {
        'tsCheckoutOrderNr': '2020-05-21-001',
        'tsCheckoutBuyerEmail': 'mijn.klant@mail.nl',
        'tsCheckoutOrderAmount': 4005.95,       
        'tsCheckoutOrderCurrency': 'EUR',
       'tsCheckoutOrderPaymentType': 'VOORUITBETALING',       
    }});
</script>

Voordat je de code kunt gebruiken in de Google Tag Manager, moet je eerst de voorbeeldwaarden in de bovenstaande code vervangen door de overeenkomstige werkelijke variabelen, zodat de gegevens dynamisch worden geladen. Ter verduidelijking lichten we hieronder kort de functie van de verschillende variabelen toe.

'tsCheckoutOrderNr': '2020-05-21-001',

Met deze parameter wordt het bestelnummer doorgegeven. Dit is nodig om een afgegeven beoordeling te kunnen koppelen aan de betreffende bestelling. Als er geen bestelnummer beschikbaar is, kan ook een tijdstempel van de betreffende bestelling worden overgedragen, voor zover dit een unieke referentie is.

'tsCheckoutBuyerEmail': 'mijn.klant@mail.nl',

Met deze parameter wordt het e-mailadres van je klant doorgegeven. Dit is nodig om je klant enkele dagen na de bestelling een beoordelingsuitnodiging of een bevestigingsmail over de afgesloten kopersbescherming te kunnen sturen.

'tsCheckoutOrderAmount': 4005.95,

Met deze parameter wordt het totaalbedrag van de bestelling overgedragen. Zoals je aan het voorbeeld 4005.95 ziet, is het decimaalteken een punt. Het bedrag wordt doorgegeven met twee decimalen.

'tsCheckoutOrderCurrency': 'EUR',

Deze parameter staat voor de valuta waarin de bestelling is geplaatst conform ISO-norm 4217. Als je webshop zaken doet in slechts één valuta, kun je deze waarde hardgecodeerd invoeren.

'tsCheckoutOrderPaymentType': 'VOORUITBETALING',

Met deze parameter wordt de gebruikte betalingswijze doorgegeven. Hiervoor volstaat een eenvoudige tekststring. Als bij het afsluiten van de bestelling de betalingswijze niet (meer) beschikbaar is, kun je het woord OTHER invoeren als hardgecodeerde waarde voor deze parameter.

Omdat het element dynamische bestelgegevens moet bevatten, kun je het bovenstaande codevoorbeeld niet ongewijzigd in je bevestigingspagina plakken en kopiëren. Vervang in plaats daarvan de vet gedrukte waarden van iedere parameter door de overeenkomstige variabelen in de programmeertaal van je shopsysteem. In de programmeertaal PHP zou de overdracht van het e-mailadres er bijvoorbeeld zo uit kunnen zien:

'tsCheckoutBuyerEmail': '?php echo $customer_email; ?'

$customer_email staat daarbij voor het e-mailadres van je klant in het shopsysteem. Omdat de variabelen van systeem tot systeem anders zijn, kunnen wij hier geen algemeen geldende instructies geven. Zie de documentatie van je shopsysteem voor de exacte definitie van de te gebruiken variabelen.

Nadat je de bovenstaande code hebt voorbereid, kun je deze kopiëren. Plak de code vervolgens in je webshop, in de sjabloon van de bedankpagina.

Zo worden de gegevens van de concrete bestelling overgedragen aan het data layer object (gegevenslaag object).

Stap 4

Met de door de gebruiker gedefinieerde variabelen biedt de Google Tag Manager een mogelijkheid om de gegevens uit de gegevenslaag toegankelijk te maken. Selecteer hiervoor in het hoofdmenu van de Google Tag Manager het menuonderdeel "Variabelen" (01_16x16.png) en klik in het gedeelte "Door de gebruiker gedefinieerde variabelen" op de button "Nieuw" (02_16x16.png).

Variablen_nl.png

Ken de variabele eerst een naam (01_16x16.png) toe (bijv. "tsCheckoutOrderNr") en klik vervolgens op "Variabeleconfiguratie" (02_16x16.png). Kies in het menu dat wordt geopend het menuonderdeel "Variabele voor gegevenslaag" (03_16x16.png).

NeueVariable_Variablekonfigurieren_nl.png

Voer vervolgens in het invoerveld "Naam van variabele voor gegevenslaag" (01_16x16.png) de naam van de gegevenslaagvariabele in die uitgelezen moet worden. In dit voorbeeld willen we de waarde in de bestelnummerparameter uitlezen. Daarom gebruiken we als naam "ts_Checkout.tsCheckoutOrderNr". Klik vervolgens op "Opslaan" (02_16x16.png) om de variabele aan te maken.

Datenschichtvariable_Konfiguration_nl.png

Hiermee heb je de gegevens uit de bestelnummerparameter toegankelijk gemaakt. Herhaal deze stap nu ook voor de andere parameters. Gebruik hierbij de volgende tekstbouwstenen als namen voor de gegevenslaagvariabelen:

  • ts_Checkout.tsCheckoutOrderAmount
  • ts_Checkout.tsCheckoutBuyerEmail
  • ts_Checkout.tsCheckoutOrderPaymentType
  • ts_Checkout.tsCheckoutOrderCurrency

Stap 5

Nu kun je de variabelen die je in de vorige stap hebt gedefinieerd, gebruiken in de tags en om de checkout-DIV te renderen. Selecteer hiervoor eerst het menuonderdeel "Tags" (01_16x16.png) in het hoofdmenu en klik op de knop "Nieuw" (02_16x16.png). 

Tags_Neu2_nl.png

Bepaal eerst een naam voor de tag (bijv. "Trustcard") (01_16x16.png) en klik vervolgens op "Tagconfiguratie" (02_16x16.png). Kies nu, zoals eerder in stap 1, het menuonderdeel "Aangepaste HTML" (03_16x16.png) uit.

NeuesTag2_Benutzerdefiniertes-HTML_nl.png

Kopieer vervolgens de onderstaande HTML-code en plak deze in het invoerveld "HTML" (01_16x16.png).

<script>
var strOut = '';
strOut += '<div id="trustedShopsCheckout" style="display: none;">';
strOut += '<span id="tsCheckoutOrderNr">' + {{tsCheckoutOrderNr}} + '</span>';
strOut += '<span id="tsCheckoutBuyerEmail">' + {{tsCheckoutBuyerEmail}} + '</span>';
strOut += '<span id="tsCheckoutOrderAmount">' + {{tsCheckoutOrderAmount}} + '</span>';
strOut += '<span id="tsCheckoutOrderCurrency">' + {{tsCheckoutOrderCurrency}} + '</span>';
strOut += '<span id="tsCheckoutOrderPaymentType">' + {{tsCheckoutOrderPaymentType}} + '</span>';
strOut += '</div>';
document.write(strOut);
</script>

Activeer ook weer "document.write ondersteunen" (02_16x16.png) met een vinkje. Klik vervolgens op "Geavanceerde instellingen" (03_16x16.png).

Trustcard_Konfiguration_nl.png

Om de bedankpagina soepel te laten laden, is het belangrijk dat de tag die je zojuist hebt aangemaakt op de pagina wordt getoond vóór de Trustbadgetag. Dit kun je nu configureren in de uitgebreide instellingen. Klik daartoe in de instellingen eerst op "Tagreeks" (01_16x16.png). Er verschijnen uitgebreide keuzemogelijkheden. Activeer vervolgens de optie "Een tag activeren nadat Trustcard is geactiveerd" (02_16x16.png) en selecteer als "Cleanup-tag" (03_16x16.png) de tag "Trustbadge" die je in stap 1 hebt aangemaakt.

Tag-Reihenfolge_nl.png

Klik vervolgens op het gedeelte "Triggers". Om ervoor te zorgen dat de Trustcardtag die je aanmaakt ook werkelijk op de bedankpagina wordt getoond, moet je een nieuwe trigger configureren. Klik hiervoor op de "+". Selecteer "Paginaweergave" (01_16x16.png) als Type trigger. De Trustcardtag moet echter niet op alle pagina's worden getoond. Kies daarom de optie "Sommige paginaweergaven" (02_16x16.png). Vervolgens kun je een regel definiëren (03_16x16.png). Stel met behulp van de twee dropdownmenu's eerst "Page URL" en "bevat" in als eerste componenten van de regel. Geef nu in het invoerveld een deel van de URL van je bedankpagina in, aan de hand waarvan de Google Tag Manager de bedankpagina kan herkennen en er de Trustcardtag op activeert. Klik vervolgens op "Opslaan" (04_16x16.png).

NeuerTrigger_Konfiguration_nl.png

Je komt nu weer terug bij het overzicht van de tag. Klik ook hier op "Opslaan". De Trustcardtag is nu aangemaakt.


Was dit artikel nuttig?

Aantal gebruikers dat dit nuttig vond: 0 van 0