Handleiding voor aangepaste JavaScript-variabelen van Google Tag Manager

Handleiding voor   Naarmate de technologie zich verder ontwikkelde, beseften mensen hoe belangrijk data en hulpmiddelen zijn die ons helpen bij het verzamelen en analyseren van al die data.

Deze vooruitgang heeft er ook toe geleid dat er meer functies beschikbaar zijn in tools zoals Google Tag Manager, waarmee u kunt bijhouden hoe gebruikers met uw website omgaan.

De aangepaste JavaScript-variabele (CJS) van Google Tag Manager is een van die functies die kan helpen bij het verzamelen/opslaan van gegevens die andere variabeletypen niet kunnen. Hoe we die opgeslagen informatie gebruiken, is een ander deel van hetzelfde verhaal.

Vaak denken mensen dat ze geavanceerde JavaScript- kennis of codering nodig hebben om deze variabele te gebruiken. Hoewel voorkennis echter erg nuttig kan zijn, kun je het nog steeds gebruiken nadat je hebt begrepen hoe het werkt.

We gaan het dus hebben over deze coole variabele in GTM, waarbij we de volgende onderwerpen behandelen:

Wat is de aangepaste JavaScript-variabele van Google Tag Manager?

Een aangepaste JavaScript-variabele is een door de gebruiker gedefinieerde variabele in GTM waarmee u waarden kunt retourneren op basis van JavaScript-code.

Het is niet hetzelfde als de door de gebruiker gedefinieerde JavaScript-variabele. De andere plek waar u de JavaScript-code in GTM kunt gebruiken, is de Custom HTML Tag (maar die bespreken we hier niet).

Een CJS is dus in feite een functie die is ingesteld om waarden te retourneren die over het algemeen moeilijk te verkrijgen zijn met de andere ingebouwde en door de gebruiker gedefinieerde variabelen .

Het biedt bovendien veel flexibiliteit wanneer we complexe logica/oplossingen willen implementeren door bepaalde informatie uit DOM te halen, berekeningen uit te voeren, verschillende informatie te combineren en de verzamelde informatie te wijzigen.

In tegenstelling tot andere variabelen kan een aangepaste JavaScript-variabele verschillende gegevenstypen retourneren, bijvoorbeeld een tekenreeks, Booleaanse waarde, getal, matrix en object.

Elke aangepaste JavaScript-variabele van Google Tag Manager bestaat uit twee belangrijke bouwstenen :

Het zou een anonieme of lege functie moeten hebben. Een functie is iets dat wordt aangeroepen door

Variabel pictogram in GTM
Samenvattend kunnen CJS-variabelen voor twee belangrijke doeleinden nuttig zijn:

Aangepaste logica maken waarmee u gegevens kunt ophalen die u met andere variabelen niet kunt benaderen.
Hergebruik de functies die zijn gedefinieerd in aangepaste JavaScript-variabelen voor verschillende tags , triggers en variabelen door eenvoudigweg CJS te gebruiken.

Gebruiksscenario’s van aangepaste JavaScript-variabelen

De veelzijdigheid van de aangepaste JavaScript-variabele van Google Tag Manager betekent dat deze voor veel verschillende redenen/doelen kan worden gebruikt. Het zal lastig zijn om ze hier allemaal op te noemen, maar we zullen enkele van de belangrijkste bespreken.

1. Schrijf de eerste letter van elk woord met een hoofdletter

Over het algemeen vindt u veel voorbeelden van hoe u de CJS kunt gebruiken om de tekst van de waarde naar hoofdletters of kleine letters te veranderen. Dit kan met een eenvoudige functie, zoals hieronder weergegeven:

De dubbele schuine strepen betekenen dat de tekst van commentaar wordt voorzien. Dit betekent dat belangrijke notities op één regel blijven staan, etc. Voor meerdere regels gebruiken we de dit is een comme

Terugkomend op het originele use-case, d.w.z. de eerste letter van het woord met een hoofdletter schrijven. Dit kan worden bereikt door de onderstaande code te gebruiken, waarbij we een auto-event variabele gebruiken die de Element Text vastlegt.

We willen alles uniform houden door de eerste letter van elk woord met een hoofdletter te schrijven.

Hier volgt een korte uitleg van wat er in de code gebeurt:

Maakt de eerste letter van elk woord een hoofdletter en voegt deze samen met de rest van het woord.
Voegt de array met woorden samen tot één enkele string met spaties ertussen
Dit is hoe het eruitziet in de voorbeeldmodus , waarin u kunt zien hoe de waarde van de Auto-Event-variabele wordt getransformeerd met de aangepaste JavaScript-variabele:

De eerste letter van het woord met een hoofdletter schrijven met een aangepaste JavaScript-variabele
Dit werkt goed als het allemaal een simpele string is. Maar als er leestekens of andere speciale tekens in zitten, werkt het niet zo goed omdat het daar geen rekening mee houdt.

JavaScript-hoofdlettergebruik werkt niet met speciale tekens
We kunnen echter 2024 Bijgewerkte telefoonnummerlijst van wereldwijd  de functie replace() gebruiken met een reguliere expressie om met leestekens en
En dit is het resultaat deze keer:

Hoofdlettergebruik in JavaScript bij het werken met speciale tekens bij het gebruik van replace() met regex
Laten we eens kijken wat we er nog meer mee kunnen doen.

2. Het DOM doorkruisen

Dit is een van de handigste manieren waarop een aangepaste JS-variabele kan worden gebruikt, omdat hiermee waarden in de gehele DOM kunnen worden vastgelegd.

Om omhoog te gaan, gebruiken we de nearest()-methode. Deze is speciaal ontworpen om te zoeken naar een voorouderelement dat overeenkomt met een bepaalde CSS-selector .

Dit is handig in scenario’s waarin het element waarmee de automatische gebeurtenislisteners van GTM interacteren (klik, zichtbaarheid 9 blog name generators to find the best blog name …  van element, enz.), geen eigen betekenisvolle waarde heeft, maar de bovenliggende waarde, ook wel voorouder genoemd, wel iets heeft dat meer context biedt.

Hiermee worden de Developer Tools in Chrome geopend en zou u uw DOM/HTML-structuur moeten kunnen zien onder het tabblad Elementen.

Tabblad Elementen in de asia phone number  Developer Tools
We hebben gekeken hoe je omhoog kunt reizen in de DOM, maar de volgende code kan je helpen omlaag te reizen.

Er zijn andere manieren om naar beneden te gaan met behulp van queryselectoren: first child, last child, nth-of-type, nth-child, nextSibling en previousSibling.

3. Google Analytics 4 Gebeurtenistijdstempel

Laten we het afronden met een eenvoudig gebruiksvoorbeeld, namelijk het gebruik van de aangepaste JavaScript-variabele van Google Tag Manager om de tijdstempel van elke gebeurtenis op te halen die naar Google Analytics 4 kan worden verzonden .

function() {
return new Date().getTime();
}
Dat is alles! Dit zal de tijdstempel krijgen wanneer een bepaalde gebeurtenis plaatsvindt. Het is voordelig omdat client-side GA4 gebeurtenissen in batches verzamelt en de tijdstempel van de batch toewijst, niet wanneer de individuele gebeurtenis plaatsvindt.

Een recente release van Google toonde echter “batch_event_index” in het exportschema van GA4 naar GA4.

Hierdoor worden er waarschijnlijk volgnummers aan de gebeurtenissen toegevoegd, omdat ze in een batch worden verzameld. Als de volgnummers al voldoende zijn, hebt u dit proces mogelijk niet zo vaak nodig.

Deze drie use cases doen nauwelijks recht aan de Custom JavaScript-variabele, omdat er een hoop dingen zijn die je ermee kunt doen die we hier niet konden behandelen. Het kan immers overweldigend zijn.

Deze variabele kan veel use cases hebben, afhankelijk van wat u wilt bereiken en omdat het zeer aanpasbaar is, is de sky the limit! Hieronder staan ​​nog wat andere voorbeelden:

Controleren of een waarde leeg is of niet
Verzamel formulierveldwaarden​
Vind specifieke tekst/elementen op de pagina
Cookies lezen
Aangepaste foutbehandeling
Informatie over gebruikersagenten vinden
De verzamelde data kan worden gebruikt om meer info over de events te sturen en/of om te worden gebruikt als voorwaarden voor de triggers. U ziet, veel mogelijkheden!

Nu we hebben gezien wat u allemaal kunt bereiken met de aangepaste JavaScript-variabele van Google Tag Manager, is het belangrijk om wat praktische tips te leren, zodat u deze efficiënt kunt gebruiken en geen fouten tegenkomt.

Aanbevolen werkwijzen voor aangepaste JavaScript-variabelen

De onderstaande lijst is een goed startpunt om gewoontes te ontwikkelen die nuttig kunnen zijn voor uzelf en iedereen die vandaag of in de toekomst met dezelfde GTM-container werkt – niet in een bepaalde volgorde:

JavaScript is hoofdlettergevoelig, dus bepaalde methoden moeten op de juiste manier worden gebruikt. Zo kan toUpperCase() niet ToUppercase() zijn.
Als u een wat complexere code schrijft of belangrijke informatie wilt delen met anderen die dezelfde container beheren, kunt u gebruikmaken van de functie voor opmerkingen.
Gebruik consistente variabelenamen. Als u bijvoorbeeld een variabele myString noemt, dan zal mystring niet werken als u het ergens anders gebruikt, of het nu in een functie is of als referentie in andere delen van GTM.
Foutafhandeling/controles kunnen erg nuttig zijn, vooral omdat bepaalde code functionaliteit op de pagina kan verstoren. Gebruik daarom waar nodig de try-catch logica.
Wijzig de DOM niet, omdat dit prestatieproblemen kan veroorzaken.
Retourneer standaardwaarden als de verwachte waarden niet worden geretourneerd.
Houd rekening met het bereik van variabelen om onbedoelde globale variabelen te voorkomen.
Het is beter om niet te vertrouwen op externe bibliotheken of scripts binnen uw variabelen, tenzij dit noodzakelijk is.
Houd de logica simpel om prestatieproblemen te voorkomen. Zware berekeningen kunnen de laadtijd van de pagina vertragen. Het maakt het ook makkelijker om te beheren als de code beknopt is.
Vermijd het pushen van waarden naar de dataLayer en het opnieuw definiëren van waarden van dataLayer-variabelen.
Vermijd overmatig gebruik van synchrone bewerkingen die de hoofdthread kunnen blokkeren. Gebruik indien nodig asynchrone bewerkingen.

Dat was het voor vandaag, mensen!

Samenvatting

Dit bericht is misschien wel overweldigend, maar wees niet te streng voor jezelf, want we hebben behoorlijk veel behandeld!

We begonnen met kijken naar wat de aangepaste JavaScript-variabele van Google Tag Manager is (niet te verwarren met de JavaScript-variabele).

Wat zijn enkele unieke manieren waarop u de Custom JavaScript-variabele hebt gebruikt? Laat het ons en onze lezers weten in de reacties hieronder!

Usman Qureshi
Usman is een web analytics content creator bij MeasureSchool. Hij heeft een masterdiploma in digitale marketing van de UCD Michael Smurfit Graduate Business School. Hij is een data-enthousiasteling die van verschillende tinten ervan houdt, of het nu gaat om analyse, implementatie of visualisatie.

Gerelateerde berichten

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top