Trusted Shops gebruiken met de Google Tag Manager

De Trustbadge integreren

Stap 1

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

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

Stap 2

Voor de volgende stap heb je de Trustbadge®-code nodig die bij je webshop hoort. De basis voor je persoonlijke Trustbadge-code is de volgende integratiecode:

<script async 
data-desktop-y-offset="0" 
data-mobile-y-offset="0" 
data-desktop-disable-reviews="false" 
data-desktop-enable-custom="false" 
data-desktop-position="right" 
data-desktop-custom-width="156" 
data-desktop-enable-fadeout="false" 
data-disable-mobile="false" 
data-disable-trustbadge="false" 
data-mobile-custom-width="156" 
data-mobile-disable-reviews="false" 
data-mobile-enable-custom="false" 
data-mobile-position="left" 
data-mobile-enable-topbar="false" 
data-mobile-enable-fadeout="true" 
data-color-scheme="light" 
charset="UTF-8" 
src="//widgets.trustedshops.com/js/YOUR_TSID.js"> 
</script>

Zoek de volgende codestring binnen de integratiecode:

src="//widgets.trustedshops.com/js/YOUR_TSID.js">

Vervang het vetgedrukte gedeelte YOUR_TSID door je Trusted Shops ID.

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).

Je hebt nu je Trustbadge-code aangemaakt. Als je geen verdere aanpassingen doet, zal de Trustbadge...

...jouw verzamelde beoordelingen laten zien en – na succesvolle certificering – het keurmerk.

...rechts in de desktopweergave staan en links in de mobiele weergave.

...54 pixels boven de onderkant van het scherm worden weergegeven in de desktopweergave en 10 pixels boven de onderkant van het scherm in de mobiele weergave.

Op dit punt heb je twee mogelijkheden:

Zijn deze instellingen voor jou in orde? Ga dan naar de volgende stappen in deze handleiding.
Wil je een andere weergave van je Trustbadge of hem ergens anders integreren in jouw webshop? Ga dan verder met het configureren van de Trustbadge-code met behulp van dit artikel: Hoe pas ik de Trustbadge® op mijn vereisten aan? Ga daarna terug naar dit artikel en ga verder met de volgende stappen.

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

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.

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

De volgende stappen zijn afhankelijk van het feit of je alleen shopbeoordelingen of zowel shop- als productbeoordelingen bij Trusted Shops verzamelt. Klik nu op de link die overeenkomt met je website om verder te gaan:

Verzamelen van shopbeoordelingen

De volgende stappen beschrijven hoe je alleen shopbeoordelingen bij Trusted Shops kunt verzamelen. Wil je naast shopbeoordelingen ook productbeoordelingen verzamelen? Volg de hieronder beschreven stappen: Shop- en productbeoordelingen verzamelen

Stap 1

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 vervolgens automatisch de Trustcard voor je klanten op deze pagina, inclusief kopersbescherming van de bestelling en/of toestemming voor het verzenden van een beoordelingsverzoek.

Om het je klanten makkelijker te maken, moeten de gegevens die nodig zijn voor de activering van de kopersbescherming en het beoordelingsverzoek rechtstreeks vanuit je winkelsjabloon naar de Trustbadge worden gestuurd, zodat ze hun bestelgegevens niet opnieuw hoeven in te voeren. 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 2

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" () en klik in het gedeelte "Door de gebruiker gedefinieerde variabelen" op de button "Nieuw" ().

Ken de variabele eerst een naam () toe (bijv. "tsCheckoutOrderNr") en klik vervolgens op "Variabeleconfiguratie" ().

Als je voor de variabelen andere namen wil gebruiken, moet je de code in stap 3 aanpassen.

Kies in het menu dat wordt geopend het menuonderdeel "Variabele voor gegevenslaag" ().

Voer vervolgens in het invoerveld "Naam van variabele voor gegevenslaag" () 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" () om de variabele aan te maken.

Hiermee heb je de gegevens uit de bestelnummerparameter toegankelijk gemaakt. Herhaal deze stap nu ook voor de andere parameters. Gebruik de volgende lijst om de Google Tag Manager-variabelen een naam te geven op basis van de namen van de gegevenslaagvariabelen:

Naam variabele Google Tag Manager	Naam variabele voor gegevenslaag
tsCheckoutOrderNr	ts_checkout.tsCheckoutOrderNr
tsCheckoutOrderAmount	ts_checkout.tsCheckoutOrderAmount
tsCheckoutBuyerEmail	ts_checkout.tsCheckoutBuyerEmail
tsCheckoutOrderPaymentType	ts_checkout.tsCheckoutOrderPaymentType
tsCheckoutOrderCurrency	ts_checkout.tsCheckoutOrderCurrency

Stap 3

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" () in het hoofdmenu en klik op de knop "Nieuw" ().

Bepaal eerst een naam voor de tag (bijv. "Trustcard") () en klik vervolgens op "Tagconfiguratie" (). Kies nu het menuonderdeel "Aangepaste HTML" () uit.

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

<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);

if ("undefined" !== typeof trustbadge) {
trustbadge.remove();
trustbadge.reInitialize();
}
</script>

Activeer ook weer "document.write ondersteunen" () met een vinkje. 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 - DOM klaar" () als Type trigger. De Trustcardtag moet echter niet op alle pagina's worden getoond. Kies daarom de optie "Sommige gebeurtenissen die worden geactiveerd bij 'DOM klaar'" (). Vervolgens kun je een regel definiëren (). 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" ().

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

Shop- en productbeoordelingen verzamelen

De volgende stappen beschrijven hoe je shop- en productbeoordelingen kunt verzamelen bij Trusted Shops. Wil je alleen shopbeoordelingen verzamelen? Volg de hieronder beschreven stappen: Verzamelen van shopbeoordelingen

Stap 1

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'
    'tsCheckoutProducts': [{
      'tsCheckoutProductUrl': 'http://www.shop.url/product1_page.html',
       'tsCheckoutProductImageUrl': 'http://www.shop.url/image1.png',
       'tsCheckoutProductName': 'Product Name 1',
       'tsCheckoutProductSKU': '0123456789',
       'tsCheckoutProductGTIN': '0123456789',
       'tsCheckoutProductBrand': 'Mega Corp.',
     },
     {
       'tsCheckoutProductUrl': 'http://www.shop.url/product2_page.html',
       'tsCheckoutProductImageUrl': 'http://www.shop.url/image2.png',
       'tsCheckoutProductName': 'Product Name 2',
       'tsCheckoutProductSKU': '987654321',
       'tsCheckoutProductGTIN': '987654321',
       'tsCheckoutProductBrand': 'Mega Corp.',
     }
   ]
  }});
</script>

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

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

'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',

'tsCheckoutProducts'

Deze parameter vat de volgende parameters samen die nodig zijn om productbeoordelingen te verzamelen.

'tsCheckoutProductUrl': 'http://www.shop.url/product1_page.html',

Met deze parameter wordt de complete link naar de productpagina overgebracht.

'tsCheckoutProductImageUrl': 'http://www.shop.url/image1.png',

Met deze parameter kun je de URL van een productafbeelding doorgeven. Het productafbeelding wordt getoond in de beoordelingsvragenlijst en maakt het voor je klanten gemakkelijker om het product te herinneren. We raden je aan om de bijbehorende URL's te verzenden, omdat de conversie volgens onze ervaring aanzienlijk hoger is.

'tsCheckoutProductName': 'Product Name 1',

Deze parameter draagt de productnaam over.

'tsCheckoutProductSKU': '0123456789',

Met deze parameter wordt de SKU (Stock Keeping Unit) doorgegeven - het artikelnummer dat je in je webshop gebruikt.

'tsCheckoutProductGTIN': '0123456789',

Met deze parameter wordt het Global Trade Item Number (GTIN) doorgegeven. Omdat de GTIN wereldwijd wordt gebruikt om producten te identificeren, maakt de overdracht van de GTIN het voor Google veel gemakkelijker om je verzamelde productbeoordelingen aan het juiste product toe te wijzen. Als je dus onze Google-integratie hebt geboekt en reclamecampagnes op Google Shopping en Google Ads maakt, is het gebruik van deze parameter vereist.

'tsCheckoutProductBrand': 'Mega Corp.',

Deze parameter draagt het merk van het product over. Net als de GTIN, draagt dit ertoe bij dat producten worden geïdentificeerd en dat de verzamelde beoordelingen correct aan Google worden verzonden.

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

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 2

Ken de variabele eerst een naam () toe (bijv. "tsCheckoutOrderNr") en klik vervolgens op "Variabeleconfiguratie" ().

Als je voor de variabelen andere namen wil gebruiken, moet je de code in stap 3 aanpassen.

Kies in het menu dat wordt geopend het menuonderdeel "Variabele voor gegevenslaag" ().

Naam variabele Google Tag Manager	Naam variabele voor gegevenslaag
tsCheckoutOrderNr	ts_checkout.tsCheckoutOrderNr
tsCheckoutOrderAmount	ts_checkout.tsCheckoutOrderAmount
tsCheckoutBuyerEmail	ts_checkout.tsCheckoutBuyerEmail
tsCheckoutOrderPaymentType	ts_checkout.tsCheckoutOrderPaymentType
tsCheckoutOrderCurrency	ts_checkout.tsCheckoutOrderCurrency
tsCheckoutProducts	ts_checkout.tsCheckoutProducts

Stap 3

Bepaal eerst een naam voor de tag (bijv. "Trustcard") () en klik vervolgens op "Tagconfiguratie" (). Kies nu het menuonderdeel "Aangepaste HTML" () uit.

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

<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>';

var list = {{tsCheckoutProducts}}
list.forEach(function perProduct(product) {
  strOut += '<span class="tsCheckoutProductItem">';
  strOut += '<span class="tsCheckoutProductUrl">' + product.tsCheckoutProductUrl + '</span>';
  strOut += '<span class="tsCheckoutProductImageUrl">' + product.tsCheckoutProductImageUrl + '</span>';
  strOut += '<span class="tsCheckoutProductName">' + product.tsCheckoutProductName + '</span>';
  strOut += '<span class="tsCheckoutProductSKU">' + product.tsCheckoutProductSKU + '</span>';
  strOut += '<span class="tsCheckoutProductGTIN">' + product.tsCheckoutProductGTIN + '</span>';
  strOut += '<span class="tsCheckoutProductBrand">' + product.tsCheckoutProductBrand + '</span>';
  strOut += '</span>';
});

strOut += '</div>';

document.write(strOut);

if ("undefined" !== typeof trustbadge) {
  trustbadge.remove();
  trustbadge.reInitialize();
}
</script>

Activeer ook weer "document.write ondersteunen" () met een vinkje. 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 "+".

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

Trusted Shops gebruiken met de Google Tag Manager

De Trustbadge integreren

Stap 1

Stap 2

Verzamelen van shopbeoordelingen

Stap 1

Stap 2

Stap 3

Shop- en productbeoordelingen verzamelen

Stap 1

Stap 2

Stap 3

Op deze pagina

Heb je een vraag, of wens je een functie?

Laat het ons weten!

De Trustbadge integreren

Stap 1

Stap 2

Verzamelen van shopbeoordelingen

Stap 1

Stap 2

Stap 3

Shop- en productbeoordelingen verzamelen

Stap 1

Stap 2

Stap 3

Verwante artikelen

Op deze pagina

Heb je een vraag, of wens je een functie?

Laat het ons weten!