Follago tracking implementatie met Google Tag Manager
In deze handleiding wordt uitgelegd hoe je het Google Tag Manager (GTM)-systeem van Follago instelt en aanpast om correct te werken met Follago. Als je al ervaring hebt met GTM, kun je een eigen opzet maken, zolang de data uiteindelijk correct in de Follago Tag wordt verwerkt. Voor vragen over de implementatie, neem gerust contact op met ons supportteam.
Stap 1: GTM toevoegen aan je website
Indien GTM nog niet aan je website is gekoppeld, stel dit dan eerst in. Instructies hoe je GTM kunt instellen is te vinden via Google Support.
Stap 2: Follago-link instellen
Plaats de volgende code in de <head>. Hier ontvang je een ID die wordt doorgegeven aan Follago:
<script>
(function() {
const p = new URLSearchParams(window.location.search);
if (p.has("fllg")) {
localStorage.setItem("fllg", btoa(p.get('fllg'))); // Sla base64-versie van het token op
const u = new URL(window.location.href);
u.search = '';
window.history.replaceState({}, document.title, u.toString());
}
})();
</script>Uitleg:
Deze code haalt de unieke waarde van de Follago-interactie (fllg) op uit de URL en slaat deze gecodeerd op in localStorage.
Stap 3: Variabelen instellen in GTM
In GTM maak je de volgende variabelen aan. Zorg ervoor dat deze waarden dynamisch worden ingevuld, bijvoorbeeld via de DataLayer of JavaScript-macro’s.
- currency:
De valuta voor de aankoop (bijv. EUR of USD). - items:
Een lijst met gekochte producten, opgeslagen als JSON:[ { "name": "Productnaam 1", "amount": 1, "item_id": 0 }, { "name": "Productnaam 2", "amount": 5, "item_id": 5 } ] - payment_method:
De gebruikte betaalmethode (bijv. credit card, iDeal), etc. - purchaseAmount:
Totaalprijs van alle producten (exclusief BTW). - purchaseAmountTax:
Totaalprijs van alle producten (inclusief BTW). - status:
Status van de transactie (bijv. complete of pending). - token:
De eerder opgeslagen fllg-waarde, bijvoorbeeld opgehaald via een JavaScript-macro:
function getToken() { return localStorage.getItem(“fllg”); } - transaction_id:
Een unieke ID van de transactie. - TransactionURL:
De URL waarnaar de data wordt verzonden:
https://app.follago.com/api/transactions/log
Stap 4: Tag en trigger aanmaken
Maak een nieuwe Tag in GTM met de volgende code:
<script>
(function() {
var payload = {
"token": {{token}}, // base64 versie van de click-id.
"transaction": {
"transaction_id": {{transaction_id}}, // string
"currency": {{currency}}, // string
"payment_method": {{payment_method}}, // string
"amount": {{purchaseAmount}}, // int
"amount_tax": {{purchaseAmountTax}}, // int
"items": {{items}}, // array[object] [ { name: "string", amount: int, item_id: int }, {......} ]
"status": {{status}} // "complete" of "pending"
}
};
var xhr = new XMLHttpRequest();
xhr.open("POST", '{{TransactionURL}}', true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 204) {
console.log('Success');
} else {
console.error('Error response:', xhr.status, xhr.statusText);
}
}
};
xhr.send(JSON.stringify(payload));
})();
</script>Trigger aanmaken:
Creëer een trigger die de tag activeert, bijvoorbeeld:
- Bij het laden van een specifieke thank you-pagina.
- Of bij een custom aankoop-gebeurtenis in je datalayer.
Belangrijk
Zorg ervoor dat alle variabelen en gegevens correct en dynamisch worden ingevuld.