paulkaufman.nl

Handige JavaScript “hacks” en macro's voor Google Tag Manager

Google Tag Manager is een fantastische tool om te meten wat er op je website gebeurt. En het mooiste is: je hebt er geen programmeer-skills voor nodig!

Toch is het soms handig om wat basic javascript-trucjes achter de hand te hebben.

Daarom heb ik een lijst gemaakt met handige javascript hacks en macro’s die ik regelmatig (of minder regelmatig) in Google Tag Manager gebruik.

Daar gaat ‘ie dan!

Hoe kan ik van een string een cijfer maken?​

Het komt wel eens voor dat de variabele die je uitleest van een string naar een cijfer omgezet moet worden. Gebruik hiervoor de parseFloat() functie:

function (){
  return parseFloat({{variableX}};
}

Het script voeg je toe aan een Aangepaste JavaScript-macro.

Het resultaat is een variabele die je direct kunt gebruiken bij het maken van triggers of het instellen van tags.

Hoe kan ik van hoofdletters kleine letters maken?

Krijg je data binnen in uppercase, maar moet het eigenlijk lowercase zijn? Gebruik het volgende scriptje:

function () {
 return {{variableX}}.toLowerCase();
 }

Plaats het script in een Aangepaste JavaScript-macro en vervang variabeleX door de variabele die je aan wilt passen.

Hoe kan ik een euro- of dollarteken verwijderen?

Met het onderstaande script kun je een euro- of dollarteken verwijderen, zodat je alleen nog het bedrag als cijfer overhoudt. Handig voor het uitlezen van DOM-elementen die valutatekens bevatten.

function (){
  return parseFloat({{variableX}}.substring(1));
}

Hoe kan ik de verzendkosten van het totale bestelbedrag aftrekken?​

Simpel! Zorg dat je beide variabelen paraat hebt en maak er een rekensom van. De uitkomst is een nieuwe variabele die je voor je conversiemetingen kunt gebruiken.

function() {
 return parseFloat({{totaleBestelbedrag}}) - parseFloat({{verzendkosten}});
}

De bovenstaande functie plaats je in een Aangepaste Javascript-macro. De parseFloat()-functie gebruik ik om er zeker van te zijn dat het om cijfers gaat.

Hoe kan ik een array uitlezen?

Bij het uitlezen van dataLayers kom je nog wel eens een array tegen. Als je die vervolgens met een dataLayer-variabele wilt uitlezen, krijg je de volledige array te zien. Erg vervelend, want je wilde bijvoorbeeld alleen de productwaarde uitlezen.

Hier is een handig trucje om via de dataLayer variabele een enkel object uit een array te selecteren.

Met een punt (“.”) geef je de diepte van een dataLayer aan en selecteer je het object dat je uit wilt lezen. Zo wil ik de product-ID uit de onderstaande dataLayer halen:

{
    event: 'addToCart',
    ecommerce: {
        currencyCode: 'EUR',
        add: {
            products: [
                {
                    name: 'product name',
                    id: 1111,
                    price: 100.00,
                    category: 'all products',
                    stocklevel: 8,
                    quantity: 1

                }
            ]
        }
    },
    gtm.uniqueEventId: 63
}

Er staat één array in deze dataLayer (het gedeelte tussen “[…]”) en daar staat de product-ID in.

Als ik ecommerce.add.products nu als naam van variabele voor de gegevenslaag opgeef, wordt alle data uit de array geselecteerd. Maar ik wil alleen de waarde achter id uitlezen.

De gouden tip: met een cijfer kun je de gewenste array selecteren. In dit geval is het cijfer 0 omdat het de eerste array betreft (je begint met 0, de tweede array is 1, etc.).

Vervolgens definieer je het volgende object zoals je normaal zou doen en je krijgt de waarde van id terug. Die is 1111 in dit voorbeeld.

De dataLayer variabele in Tag Manager ziet er dan zo uit:

dataLayer variabele object uit array uitlezen

Deze tip werd mede mogelijk gemaakt door de alwetende Simo Ahava.

Hoe kan ik een cookie verwijderen?

Als ik via Google Tag Manager een cookiemelding installeer, wil ik de gebruiker de mogelijkheid geven om zijn voorkeur aan te passen. Hiervoor moet de cookie die door de melding geplaatst werd verwijderd worden.

Met dit script verwijder je een specifieke cookie en herlaadt de pagina direct:

function delete_cookie(name) {
  document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
  delete_cookie('cookieconsent_status');
  window.location.reload(); 

Plaats dit script in een aangepaste HTML-tag en vervang cookienaam X door de naam van de cookie die je wilt verwijderen.

De tag kun je vervolgens met elke trigger activeren.

Een waarschuwing: dit script herlaadt een pagina eindeloos, dus let goed op welke trigger je hiervoor gebruikt!

Hoe kun je een specifiek woord op een pagina vinden?

Aleksandrs Pasters publiceerde nog een andere leuke javascript-macro op zijn blog, waarmee je kunt controleren of een specifieke woord (of zin) op een pagina staat.

De variabele geeft de waarde true als de tekst op de pagina staat en false als dat niet het geval is.

function () {
var content = document.body.innerText;
var query="zoekterm X";
if (content.search(query) > -1 ) {
 return true;
} else {
 return false;
}
}

Vervang zoekterm X door de tekst die je op wilt zoeken.

Nog meer handige hacks en macro’s?

Deze pagina wordt geupdate als ik nieuwe scripts heb gevonden. Heb jij nog handige hacks voor Google Tag Manager?

Stuur me een bericht, dan voeg ik hem aan deze lijst toe.

Ik en het internet zullen je er dankbaar voor zijn!

Bekijk meer blogs