UTM-Kampagnen-Link-Builder – kostenlos

So funktioniert es

Der UTM-Builder setzt Tracking-URLs vollständig im Browser mit den Standard-APIs URL und URLSearchParams zusammen – kein Server, kein Upload. Während Sie tippen, parst ein Live-useMemo-Hook Ihre Basis-URL, prüft den Hostnamen und hängt nur die UTM-Parameter an, die Sie ausgefüllt haben.

1. 1
   URL-Parsing und Prüfung

   Ihre Basis-URL wird an den integrierten URL-Konstruktor des Browsers übergeben. Das Tool stellt automatisch https:// voran, wenn kein Schema vorhanden ist, und prüft dann, ob der Hostname mindestens einen Punkt enthält (oder localhost ist) – so wird Freitext abgelehnt, bevor er die Ausgabe verfälschen kann.
2. 2
   UTM-Parameter werden über URLSearchParams angehängt

   Jedes ausgefüllte Feld (source, medium, campaign, term, content) wird mit URLSearchParams.set() in das Search-Params-Objekt der URL geschrieben. Ist der Schalter für Kleinschreibung aktiv, werden die Werte an dieser Stelle kleingeschrieben, was fehlerhafte Zuordnungen durch uneinheitliche Groß-/Kleinschreibung verhindert.
3. 3
   QR-Code wird von der Bibliothek qrcode gerendert

   Immer wenn sich die endgültige URL ändert, rendert die Bibliothek qrcode eine 256-px-Data-URL für die Vorschau und zeichnet gleichzeitig eine 1024-px-Version auf ein nicht sichtbares Canvas. Das Canvas wird dann per canvas.toBlob() in ein PNG-Blob serialisiert, damit die Download-Schaltfläche synchron speichern kann – erforderlich unter iOS, wo die asynchrone Blob-Erstellung in einem Klick-Handler blockiert wird.
4. 4
   Teilbare Vorlage über den Seiten-Hash

   Der Formularzustand (Basis-URL plus alle UTM-Werte) wird laufend per window.history.replaceState in das URL-Fragment der Seite kodiert. Wer diese URL mit Hash öffnet, erhält das Formular vorausgefüllt – so können Sie eine Kampagnenvorlage ohne serverseitige Speicherung speichern oder teilen.

Ähnliche Tools