Gratis UTM-campagnelinkbouwer

Hoe het werkt

De UTM-bouwer stelt tracking-URL's volledig in de browser samen met de standaard URL- en URLSearchParams-API's — geen server, geen upload. Terwijl je typt, parseert een live useMemo-hook je basis-URL, controleert de hostnaam en voegt alleen de UTM-parameters toe die je hebt ingevuld.

1. 1
   URL parsen en controleren

   Je basis-URL gaat naar de ingebouwde URL-constructor van de browser. De tool zet er automatisch https:// voor als er geen schema is, en controleert of de hostnaam minstens één punt bevat (of localhost is) — zo wordt vrije tekst geweigerd voordat die de uitvoer kan bederven.
2. 2
   UTM-parameters toegevoegd via URLSearchParams

   Elk ingevuld veld (source, medium, campaign, term, content) wordt met URLSearchParams.set() naar het searchParams-object van de URL geschreven. Als de schakelaar voor kleine letters aan staat, worden de waarden op dit punt naar kleine letters omgezet, wat verkeerde toeschrijving door verschillen in hoofdletters voorkomt.
3. 3
   QR-code weergegeven met de qrcode-bibliotheek

   Telkens als de uiteindelijke URL verandert, maakt de qrcode-bibliotheek een data-URL van 256 px voor het inline voorbeeld en tekent tegelijk een versie van 1024 px op een onzichtbaar canvas. Dat canvas wordt daarna via canvas.toBlob() omgezet naar een PNG-Blob, zodat de downloadknop die synchroon kan opslaan — nodig op iOS, waar het asynchroon maken van een Blob binnen een klikhandler wordt geblokkeerd.
4. 4
   Deelbaar sjabloon via de pagina-hash

   De formulierstatus (basis-URL plus eventuele UTM-waarden) wordt doorlopend in het URL-fragment van de pagina gecodeerd met window.history.replaceState. Wie die URL met hash opent, krijgt het formulier vooraf ingevuld, zodat je een campagnesjabloon kunt opslaan of delen zonder opslag op een server.

Gerelateerde tools