Sla de bron via UTM van je klant op in bijv. Gravity Forms, Formidable, Ninja Forms, WPForms en CF7
Regelmatig kreeg ik de vraag: kunnen we in onze CRM of Emailtool achterhalen waar onze downloads of aanvragen vandaan komen? Een terechte vraag. Vaak wordt hier Google Analytics voor gebruikt, een tool die attributie hoog heeft staan. Een CRM of Emailtool als Pipedrive, ActiveCampaign of Moosend heeft dit echter niet.
Maar goed, het is zeker mogelijk. Door de herkomst vast te stellen via UTM parameters, kun je deze meesturen in je formulieren. Het idee van mij kwam van attributer.io, maar toen ik hun prijzen zag, dacht ik: dat kan ik ook 😉
Dat bleek ik te kunnen, en nog gratis ook. Ik neem je graag mee in hoe je dit voor elkaar krijgt!
De casus voor je utm-tracking in je CRM
Wat we in dit scenario gaan doen, is UTM waardes opslaan in je wordpress formulieren. Op deze manier leggen we vast waar iemand vandaan komt. En in de tweede fase schieten we deze data door naar je gewenste systeem.
Naast meesturen in de formulieren, kun je de data namelijk ook weer koppelen aan je tool waar je inzending verwerkt, zoals je e-mail of projectmanagementsysteem of juist CRM of Emailsoftware, zoals HubSpot, ActiveCampaign, Pipedrive, Brevo, Mailerlite, Moosend, etc.
In deze casus gebruiken we de volgende tools:
- WordPress + Tag Manager
- Gravity Forms
- ActiveCampaign
Let wel, in principe werkt deze methode met bijna ieder systeem. De werkwijze is zelfs vaak hetzelfde.
Werkwijze per stap uitgelegd:
We beginnen met het afvangen van UTM tags en deze op te slaan. We gebruiken hiervoor Tag Manager, maar je kan ook gebruik maken van PHP binnen WordPress uiteraard.
1. UTM-tags opslaan in browser webbezoeker
Hiervoor zullen we een beetje moeten coderen. We gaan een tag, een trigger en variabelen aanmaken in Tag Manager:
- Maak 4 variabelen aan in GTM, type URL en subtype Query.
- Geef vervolgens de UTM keys mee per variabele: utm_source, utm_medium, utm_campaign, utm_content
- Maak een trigger aan, gebruik DOM ready met voorwaarden. De voorwaarden is dat de bovenstaande variabelen aanwezig zijn, zodat het niet onnodig vaak afgevuurd wordt. Ik kies meestal voor de utm_source en utm_ medium, maar je mag ook meer voorwaarden stellen uiteraard. You do you.
- Maak een tag aan, met custom HTML. Via de volgende code slaan we UTM-tags op in de local storage van de gebruiker. De code vind je hieronder
Note: je kan ook cookies gebruiken, maar ik prefereer local storage i.v.m. cookie-meldingen. - Gebruik je een cookie-keuze selector als Cookiebot binnen TagManager? Dan zul je even moeten opletten dat je bijv. toestemming hebt voor analytische cookies (wel zo netjes). Zorg dan dat je trigger op cookieconsent hebt en niet op DOM ready. Want bij een nieuwe pagina, zijn de UTM tags weg!
<script>
(function() {
// Map of UTM tags to corresponding GTM variables
var utmTags = {
'utm_source': '{{URL - utm_source}}',
'utm_medium': '{{URL - utm_medium}}',
'utm_campaign': '{{URL - utm_campaign}}',
'utm_content': '{{URL - utm_content}}'
};
// Iterate over each UTM tag and store its value in local storage
for (var tag in utmTags) {
if (utmTags.hasOwnProperty(tag)) {
var value = utmTags[tag];
if (value) {
localStorage.setItem(tag, value);
}
}
}
})();
</script>Hiermee wordt het opgeslagen én kunnen we dus in de volgende stap dit afvangen!
Tip: je kunt ook de landingspagina opslaan wanneer deze getriggerd wordt, door een stukje code toe te voegen. Zo weet je ook waar je conversie het eerste terechtkwam.
2. Gravity Forms hidden fields aanmaken en dynamisch inladen
Voor iedere form waar je data in wilt hebben (en wilt meesturen), zul je 4 hidden fields moeten aanmaken. Geef ze een duidelijke naam, het liefste hetzelfde als de UTM-variabelen. Dat maakt het script eenvoudiger 😉
Vervolgens maken we weer een custom HTML tag aan in Tag Manager. Gebruik het onderstaande script om de hidden fields te vullen met de waardes uit de LocalStorage.
<script>
function updateHiddenFields() {
var variables = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content'];
variables.forEach(function(variable) {
var storedValue = localStorage.getItem(variable);
if (storedValue) {
var fields = document.querySelectorAll('input[type="hidden"]');
fields.forEach(function(field) {
if (field.value === variable) {
field.value = storedValue;
}
});
}
});
}
updateHiddenFields();
</script>De trigger zit je op pageview voor de pagina’s waar je gravity form zit. Wil je dit niet handmatig doen? Maar dan een custom Javascript variabele (zie onderstaande code) die checkt of er een gravity forms aanwezig is op de pagina. Je trigger voorwaarde is dan bijvoorbeeld {isGravityFormPresent} = true
function isGravityFormPresent() {
return document.querySelector('.gform_wrapper') !== null;
}Zo. Deel 1 is voltooid. Bij iedere verzending worden de hidden fields namelijk meegestuurd en kun je de bron zien! Wil je dit echter ook naar je CRM of Emailsysteem sturen, dan is er nog een stap nodig:
3. Gravity Forms koppelen aan je CRM of Emailsysteem
Mogelijk heb je deze stap al gedaan, maar het is afhankelijk van het systeem dat je gebruikt, wat de beste route is.
In deze casus (Gravity Forms + ActiveCampaign), gebruiken we een add-on van Gravity Forms die velden koppelt met ActiveCampaign bij iedere inzending. Hiervoor maken we in AC 4 custom velden aan, waar de informatie in opgeslagen kan worden. In de add-on van gravity forms geven we aan dat de velden aan elkaar gelinkt zijn en voila!
Is er geen add-on beschikbaar voor je tool? Kies dan voor een API-connector, zoals zapier of make.com. Wil je daar hulp bij? Laat het gerust weten!
4. Bonus! Ook je Google Ads goed opslaan.
Voor de oplettende lezer hier: Google Ads gebruikt geen standaard UTM tags. Maar wel een ‘gclid’, ofwel Google Click Identifier. Deze is helaas geanonimiseerd, dus je kunt geen campagne of specifieke informatie achterhalen. Maar we weten wel dat het om google ads gaat.
Via de onderstaande code, kun je de gclid parameter in ieder geval omzetten in een source en medium. Zo is er nog wel wát data.
<script>
var urlParams = new URLSearchParams(window.location.search);
var gclid = urlParams.get('gclid');
if (gclid) {
localStorage.setItem('gclid', gclid);
// Set UTM parameters based on gclid
localStorage.setItem('utm_source', 'google');
localStorage.setItem('utm_medium', 'cpc');
}
</script>Ik dit geval maken we dus een Tag aan in Google Tag Manager en een DOM ready trigger (met in dit geval een voorwaarde = gclid present als parameter).
Je kunt uiteraard ook een GTM variabele gebruiken in plaats van de window.location.search en denk uiteraard ook hier aan de cookies-consent!
Afrondend: aan de slag met je utm-tracking?
Wil jij door dit verhaal zelf aan de slag met deze tracking instellen? Neem dan gewoon even contact op en dan stuur ik je de GTM templates op. Waar nodig help ik je met de implementatie.
Of bekijk wpleadsourcer.com als betaald alternatief voor een plug&play optie!
