Tracking van Parameters uit de URL
Zonder tracking is marketing sturen op gevoel. Je hebt data nodig om te weten welke campagne leads oplevert.
In deze documentatie leggen we uit hoe je parameters ophaalt uit de URL om deze automatisch mee te sturen met je aanvragen. Hierdoor zie je exact de stappen die we doorlopen om dit uit te lezen.
ID's Achterhalen
Voordat je begint, heb je de onderstaande twee ID's nodig om de tracking correct te configureren.
BedrijfsID
Dit ID is gekoppeld aan je gehele omgeving en vind je in je instellingen.
- Klik op je Profielfoto rechtsboven.
- Selecteer Bedrijfsinstellingen.
- Klik op je Bedrijfsnaam om het ID te kopiëren.
FormulierID
Dit is de unieke code van het specifieke formulier waar je aan werkt.
- Bij het Publiceren van je formulier.
- In de URL van de editor.
- Aan het eind van de Landingspagina URL.
Eigen website (Iframe + Prefill)
Gebruik deze methode als het formulier op je eigen domein staat.
De Code Implementatie
Plaats onderstaande code in de <head> van je pagina. Vervang BEDRIJFS_ID en FORMULIER_ID door je eigen unieke codes.
<script>
// 1. Laden van de Reuzenpanda snippet
(function() {
const load = () => {
var e = window.location.hostname;
var a = document.createElement("script");
a.src = "https://snippet.reuzenpanda.nl/api/snippet/v1/js/BEDRIJFS_ID/" + e, document.head.appendChild(a)
};
"loading" === document.readyState ? document.addEventListener("DOMContentLoaded", async function(e) { load() }) : load();
})();
// 2. Parameters verzamelen uit de URL
function getUrlParams() {
const params = new URLSearchParams(window.location.search);
return {
gclid: params.get("gclid"),
fbclid: params.get("fbclid"),
gbraid: params.get("gbraid"),
wbraid: params.get("wbraid"),
utm_source: params.get("utm_source")
};
}
// 3. Data naar het iframe sturen via postMessage
function sendPrefillToIframe(iframe, data) {
if (!iframe.contentWindow) return;
iframe.contentWindow.postMessage({ id: "prefill", data }, "https://directsamenstellen.nl");
}
function waitForIframesAndSend(data) {
let attempts = 0;
const interval = setInterval(() => {
const iframes = document.querySelectorAll('iframe[src*="directsamenstellen.nl"]');
if (iframes.length > 0) {
iframes.forEach(iframe => sendPrefillToIframe(iframe, data));
}
if (++attempts >= 10) clearInterval(interval);
}, 1000);
}
document.addEventListener("DOMContentLoaded", () => {
const data = getUrlParams();
if (!data.gclid && !data.fbclid && !data.gbraid && !data.wbraid && !data.utm_source) return;
waitForIframesAndSend(data);
});
</script>
<div style="height: 80svh" data-rp-configurator-id="FORMULIER_ID"></div>De lijst in de functie
getUrlParams is een voorbeeld. Je kunt hier eenvoudig parameters aan toevoegen (zoals utm_content) of weghalen. Let op: Als je een parameter toevoegt, moet je deze ook toevoegen aan de check in de DOMContentLoaded listener (if (!data.gclid && ...)), anders wordt de data niet verzonden als alleen die nieuwe parameter aanwezig is.
De Editor instellen
De data komt alleen in je dashboard terecht als het formulier weet waar het de data moet laten.
- Voeg op pagina 1 een Korte tekstvraag toe.
- Cruciaal: De Naam van de vraag moet exact gelijk zijn aan de naam in de code (bijv.
gbraid). - Zet Vraag verbergen op 'ja'.
- Zet Verplicht op 'nee'.
- Herhaal deze stap voor iedere parameter die je wilt meesturen (bijv. gclid, utm_source, etc.).
Directe Landingspagina
De URL voor een directe landingspagina wordt opgebouwd met de prefix pf_ voor elke parameter. Dit zorgt ervoor dat het formulier de data herkent en in de juiste velden plaatst.
1. De Structuur
https://directsamenstellen.nl/FORMULIER_ID?pf_PARAMETER=WAARDE2. Stappenplan
- Basis-URL: Gebruik
https://directsamenstellen.nl/gevolgd door het unieke ID van het formulier. - Prefix: Plaats pf_ voor de naam van elke parameter die je wilt opslaan.
- Scheiding: Gebruik een vraagteken ? voor de eerste parameter en een ampersand & voor elke volgende parameter.
3. Live Voorbeeld
https://directsamenstellen.nl/FORMULIER_ID?pf_gclid=abc123&pf_utm_source=googleGebruik de onderstaande link om te zien hoe de parameters worden opgevangen door het formulier. Verander de waardes na de
= in de URL-balk om het effect direct te testen.Open Test Formulier →
4. Koppeling met de editor
In de editor moet een verborgen veld aanwezig zijn op de eerste pagina.
- De Naam van de vraag moet exact overeenkomen met de parameter, maar zonder de
pf_prefix. - Voor bovenstaand voorbeeld gebruik je dus de namen gclid en utm_source.
