Google Tagmanager Integratie gids

Handleiding van Trusted Shops voor de integratie van Google Tag Manager

Met de unieke Trustbadge®-technologie en Google Tag Manager kunt u in uw webwinkel volledig probleemloos uw klantbeoordelingen verzamelen, beheren en weergeven. Zodra de Trustbadge is geïntegreerd, zal de technologie alles automatisch actualiseren. Bovendien kunt u het Trusted Shops keurmerk integreren en de kopersbescherming aanbieden.

Als u nog geen account hebt, kunt u zich hier aanmelden.

Integratie van de Google Tag Manager

Het is noodzakelijk om de code van Google Tag Manager aan alle pagina's van uw webwinkel toe te voegen, om via de Google Tag Manager extra elementen op deze pagina's te plaatsen. Google adviseert om deze direct na het openen van de BODY-Tag <body> te integreren.

Stap 1

Ga naar het beheren van uw account bij Google Tag Manager en maak bij 'Tags' en 'Door gebruiker gedefinieerde HTML-tag' een nieuwe tag aan.

Stap 2:

Voer de URL van uw webwinkel in om uw persoonlijke Trustbadge^®-code te genereren.

In het veld 'HTML' kopieert u de zojuist gegenereerde Trustbadge-code en activeert u het daaronder weergegeven selectievakje '‘document.write‘ ondersteunen'.

Vervolgens geeft u aan op welke pagina's van uw webwinkel de Trustbadge moet worden weergegeven. Selecteer de knop 'Alle pagina's' en vervolgens 'Tag aanmaken'.

Op deze manier is de Trustbadge^® op elke pagina van uw webwinkel beschikbaar, met name ook op de bevestigingspagina voor de bestelling. U bent bijna klaar, maar een belangrijk deel ontbreekt nog.

Stap 3

Voor het automatisch verzamelen van klantbeoordelingen en het afsluiten van de kopersbescherming heeft de Trustbadge^® geen assistentie 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). Daar opent de Trustbadge^® voor uw klanten automatisch de Trustcard voor het aanmelden bij de kopersbescherming en/of het verlenen van toestemming voor een beoordelingsherinnering.

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.

Voorbeeld:

<script> dataLayer = [{
'tsCheckoutOrderNr': '123456',
'tsCheckoutOrderAmount': 12.34,
'tsCheckoutBuyerEmail': 'kunde@provider.nl',
'tsCheckoutOrderPaymentType': 'Kreditkarte',
'tsCheckoutOrderCurrency': 'EUR', 
}; 
<!-- product reviews start -->
<!-- for each product in the basket full set of data is required -->

'tsCheckoutProductUrl': 'http://www.shop.url/product_page.html',
'tsCheckoutProductImageUrl': 'http://www.shop.url/image.png',
'tsCheckoutProductName': 'Product Name',
'tsCheckoutProductSKU': '0123456789',
'tsCheckoutProductGTIN': '0123456789',
'tsCheckoutProductBrand': 'ABCDEFGHIJ',

<!-- product reviews end -->
}]
</script>

Hierbij is het volgende belangrijk: u kunt de hierboven als voorbeeld getoonde waarde vervangen door de betreffende gegevens van een bestelling. Dit kunt u realiseren door de waarde van de parameter van de programmeertaal van het door uw winkel gebruikte systeem dynamisch in te laten vullen.

Vervolgens kunt u nog een tag van het type 'Door de gebruiker gedefinieerde HTML-tag' invoeren in de
Google Tag Manager. Voer in het veld HTML de volgende code in:

<script>
strOut = '
<div id="trustedShopsCheckout" style="display: none;">
<span id="tsCheckoutOrderNr">' + dataLayer[0]. tsCheckoutOrderNr + '</span>
<span id="tsCheckoutBuyerEmail">' + dataLayer[0]. tsCheckoutBuyerEmail + '</span>
<span id="tsCheckoutOrderAmount">' + dataLayer[0]. tsCheckoutOrderAmount + '</span>
<span id="tsCheckoutOrderCurrency">' + dataLayer[0]. tsCheckoutOrderCurrency + '</span>
<span id="tsCheckoutOrderPaymentType">' + dataLayer[0]. tsCheckoutOrderPaymentType + '</span>';
<!-- product reviews start -->
<!-- for each product in the basket full set of data is required -->

 strOut += '<span class="tsCheckoutProductItem">';
 strOut += '<span class="tsCheckoutProductUrl">' + dataLayer[0]. tsCheckoutProductUrl + '</span>';
 strOut += '<span class="tsCheckoutProductImageUrl">' + dataLayer[0]. tsCheckoutProductImageUrl + '</span>';
 strOut += '<span class="tsCheckoutProductName">' + dataLayer[0]. tsCheckoutProductName + '</span>';
 strOut += '<span class="tsCheckoutProductSKU">' + dataLayer[0]. tsCheckoutProductSKU + '</span>';
 strOut += '<span class="tsCheckoutProductGTIN">' + dataLayer[0]. tsCheckoutProductGTIN + '</span>';
 strOut += '<span class="tsCheckoutProductBrand">' + dataLayer[0]. tsCheckoutProductBrand + '</span>';
 strOut += '</span>';

<!-- product reviews end -->
strOut = strOut + '</div>';
document.write(strOut);
</script>

Nogmaals het selectievakje '‘document.write‘ ondersteunen' aanvinken.

Selecteer wanneer de tag moet worden geactiveerd. Klik daarvoor op de knop 'Page View' en voeg daar een nieuwe regel toe om uw bevestigingspagina voor bestelling te identificeren.

In het bovengenoemde voorbeeld kan de regel bijvoorbeeld als volgt luiden:
"Page URL - ends with - *checkout_success.html"

Vervolgens kunt u uw instellingen opslaan.

Wij verzoeken u alert te zijn op de juiste volgorde van de weergegeven tag:
Voordat de Trustbadge wordt geactiveerd en weergegeven, dient de Checkout-Tag geactiveerd te worden

Met de knop 'Publiceren' die u rechtsboven aantreft, kunt u de beide opgestelde tags publiceren.

Op deze manier hebt u de Trustbadge^® met succes geïntegreerd! U kunt de functie van uw Trustbadge^®nu testen, als u bij wijze van test een bestelling in uw shop plaatst. Afhankelijk van de instellingen, zou aan het einde van de bestelling de Trustcard verschijnen, waarmee uw kopers door het klikken op de knop beoordelingtoestemming geven voor een beoordelingsverzoek per mail.

Vanaf dit moment heeft u de Trustbadge juist geïntegreerd. (Nu hebben uw klanten direct na de aankoop, de mogelijkheid om de kopersbescherming te boeken en/of zich te laten herinneren om een beoordeling te schrijven.) Om uw huidige klantengroep een beoordelingsverzoek toe te sturen, kunt u ook de Review Collector gebruiken.