Creador de enlaces de campaña UTM gratis

Cómo funciona

El constructor de UTM ensambla URL de seguimiento enteramente en el navegador usando las API estándar URL y URLSearchParams: sin servidor, sin subida. Mientras escribes, un hook useMemo en vivo analiza tu URL base, valida el nombre de host, y añade solo los parámetros UTM que has rellenado.

1. 1
   Análisis y validación de URL

   Tu URL base se pasa al constructor URL integrado del navegador. La herramienta antepone automáticamente https:// si no hay ningún esquema presente, y luego comprueba que el nombre de host contenga al menos un punto (o sea localhost), rechazando texto libre antes de que pueda corromper la salida.
2. 2
   Los parámetros UTM se añaden mediante URLSearchParams

   Cada campo rellenado (source, medium, campaign, term, content) se escribe en el objeto de parámetros de búsqueda de la URL con URLSearchParams.set(). Si el interruptor de minúsculas está activado, los valores se convierten a minúsculas en este punto, lo que evita atribuciones no coincidentes causadas por inconsistencias de mayúsculas.
3. 3
   El código QR es renderizado por la biblioteca qrcode

   Cada vez que cambia la URL final, la biblioteca qrcode renderiza una URL de datos de 256 px para la vista previa en línea y simultáneamente dibuja una versión de 1024 px en un lienzo fuera de pantalla. El lienzo se serializa luego a un Blob PNG mediante canvas.toBlob() para que el botón de descarga pueda guardarlo de forma síncrona, requerido en iOS, donde la creación asíncrona de Blob dentro de un manejador de clic está bloqueada.
4. 4
   Plantilla compartible mediante el hash de la página

   El estado del formulario (URL base más cualquier valor UTM) se codifica continuamente en el fragmento de URL de la página usando window.history.replaceState. Cualquiera que abra esa URL con hash obtiene el formulario prellenado, así puedes guardar o compartir una plantilla de campaña sin ningún almacenamiento del lado del servidor.

Herramientas relacionadas