Guardar parámetros UTM en Elementor permite saber desde qué campaña, anuncio o canal llegó una persona antes de completar un formulario en WordPress. Con un pequeño código JavaScript podemos capturar esta información, conservarla durante 14 días y enviarla junto con los datos de cada lead.
Este método resulta especialmente útil para campañas de Google Ads, Meta Ads, email marketing, redes sociales y cualquier otra fuente en la que utilices parámetros UTM para medir el tráfico.
El sistema utiliza campos ocultos de Elementor, cookies y JavaScript. Una vez configurado, funciona automáticamente mientras el usuario navega por diferentes páginas del sitio antes de completar el formulario.
¿Qué son los parámetros UTM?
Los parámetros UTM son valores que se agregan a una URL para identificar el origen de una visita.
Por ejemplo:
https://ejemplo.com/contacto/?utm_source=facebook&utm_medium=social&utm_campaign=campana_agostoEn esta URL podemos identificar:
utm_source = facebook
utm_medium = social
utm_campaign = campana_agostoLos cinco parámetros UTM que utilizaremos son:
utm_source: identifica la fuente del tráfico.utm_medium: identifica el medio utilizado.utm_campaign: identifica la campaña.utm_term: puede utilizarse para palabras clave u otros criterios.utm_content: permite diferenciar anuncios, botones, creatividades o variantes.
Una campaña más detallada podría utilizar una URL como esta:
https://ejemplo.com/contacto/?utm_source=google&utm_medium=cpc&utm_campaign=desarrollo_web&utm_term=wordpress&utm_content=anuncio_01El objetivo es conseguir que Elementor capture automáticamente todos estos datos cuando el visitante envía un formulario.
¿Por qué guardar los parámetros UTM en Elementor?
Leer los UTM únicamente desde la página donde está el formulario puede ser insuficiente.
Imagina este recorrido:
Google Ads
↓
Página de servicio
↓
Página de inicio
↓
Artículo del blog
↓
Página de contacto
↓
FormularioLos parámetros UTM estaban presentes cuando el usuario llegó a la primera página, pero probablemente ya no estarán en la URL cuando visite la página de contacto.
Por eso vamos a guardar temporalmente esta información en cookies.
Nuestro sistema tendrá este funcionamiento:
- Detecta los UTM de la URL.
- Guarda cada valor en una cookie.
- Conserva las cookies durante 14 días.
- Busca campos UTM en los formularios de Elementor.
- Introduce automáticamente los valores guardados.
- Comprueba nuevamente los campos antes de enviar el formulario.
De esta manera podemos relacionar un lead con la campaña que generó la visita aunque el usuario haya recorrido varias páginas antes de convertir.
Crear los campos UTM en el formulario de Elementor
Primero debemos preparar el formulario.
Edita con Elementor la página que contiene el formulario y selecciona el widget Form.
Agrega cinco campos adicionales y selecciona como tipo:
HiddenEstos campos serán invisibles para el visitante, pero Elementor podrá enviarlos junto con los demás datos del formulario.
Configura los IDs de la siguiente manera:
Campo para utm_source
Type: Hidden
ID: utm_sourceCampo para utm_medium
Type: Hidden
ID: utm_mediumCampo para utm_campaign
Type: Hidden
ID: utm_campaignCampo para utm_term
Type: Hidden
ID: utm_termCampo para utm_content
Type: Hidden
ID: utm_contentLos IDs deben escribirse exactamente de esta manera, en minúsculas y sin espacios.
Elementor genera internamente campos similares a:
<input type="hidden" name="form_fields[utm_source]">Nuestro código localizará esos campos mediante su atributo name y agregará automáticamente el valor correspondiente.
La documentación de Elementor también recomienda utilizar identificadores de campos sin espacios. Puedes consultar más información sobre los formularios en la documentación oficial de Elementor.
Agregar el código UTM en Elementor Custom Code
Ahora debemos agregar el JavaScript encargado de guardar los parámetros UTM en Elementor.
Desde el escritorio de WordPress dirígete a:
Elementor → Custom CodeSelecciona la opción para añadir un nuevo código personalizado.
Puedes utilizar este nombre:
UTM Tracking FormsEn Location selecciona:
<body> – EndEl código puede ejecutarse al final del body, ya que no necesitamos bloquear la carga inicial de la página para realizar el seguimiento.
En las condiciones de visualización selecciona:
Entire SiteEsto es importante porque el visitante puede llegar mediante una campaña a cualquier página del sitio.
Si el código estuviera activo únicamente en la página de contacto, perderíamos los parámetros de usuarios que llegan primero a otra URL.
Elementor dispone de una función específica para introducir HTML y JavaScript mediante Custom Code. Puedes consultar su documentación oficial sobre Custom Code.
Si también necesitas implementar etiquetas de seguimiento publicitario, puedes consultar este tutorial sobre cómo añadir la etiqueta de Google Ads a un sitio web con Elementor.
Código para guardar parámetros UTM en Elementor
Copia y pega el siguiente código completo:
<script>
(function () {
'use strict';
/**
* CAPTURA Y PERSISTENCIA DE PARÁMETROS UTM PARA ELEMENTOR
*
* Este script:
*
* 1. Detecta parámetros UTM presentes en la URL.
* 2. Los guarda en cookies durante 14 días.
* 3. Rellena automáticamente los campos UTM de Elementor.
* 4. Funciona con formularios cargados dinámicamente.
* 5. Es compatible con formularios dentro de popups.
*/
const UTM_KEYS = [
'utm_source',
'utm_medium',
'utm_campaign',
'utm_term',
'utm_content'
];
/**
* Número de días durante los que se conservarán
* los parámetros UTM.
*/
const COOKIE_DAYS = 14;
/**
* Guarda un valor en una cookie.
*/
function setCookie(name, value, days) {
const maxAge = days * 24 * 60 * 60;
/**
* Agrega Secure automáticamente cuando
* el sitio funciona mediante HTTPS.
*/
const secure = window.location.protocol === 'https:'
? '; Secure'
: '';
document.cookie =
name + '=' + encodeURIComponent(value) +
'; Max-Age=' + maxAge +
'; Path=/' +
'; SameSite=Lax' +
secure;
}
/**
* Obtiene el valor de una cookie por su nombre.
*/
function getCookie(name) {
const prefix = name + '=';
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.indexOf(prefix) === 0) {
try {
return decodeURIComponent(
cookie.substring(prefix.length)
);
} catch (error) {
return cookie.substring(prefix.length);
}
}
}
return '';
}
/**
* Detecta los parámetros UTM presentes en
* la URL que está visitando el usuario.
*/
function captureUTMs() {
const params =
new URLSearchParams(window.location.search);
UTM_KEYS.forEach(function (key) {
/**
* Si el parámetro no existe en la URL,
* conservamos cualquier cookie anterior.
*/
if (!params.has(key)) {
return;
}
const value = params.get(key);
/**
* Evitamos almacenar valores vacíos.
*/
if (value && value.trim() !== '') {
setCookie(
key,
value.trim(),
COOKIE_DAYS
);
}
});
}
/**
* Busca los campos UTM de Elementor y coloca
* dentro de ellos el valor almacenado.
*/
function populateUTMFields(root) {
root = root || document;
UTM_KEYS.forEach(function (key) {
const value = getCookie(key);
/**
* Si no tenemos un valor almacenado
* para este UTM, no hacemos nada.
*/
if (!value) {
return;
}
/**
* Elementor genera nombres similares a:
*
* form_fields[utm_source]
*/
const selector =
'input[name="form_fields[' + key + ']"]';
const fields = [];
/**
* Comprobamos si el propio elemento
* recibido es un campo UTM.
*/
if (
root instanceof Element &&
root.matches(selector)
) {
fields.push(root);
}
/**
* Buscamos también campos UTM dentro
* del elemento recibido.
*/
if (root.querySelectorAll) {
const foundFields =
root.querySelectorAll(selector);
foundFields.forEach(function (field) {
fields.push(field);
});
}
/**
* Introducimos el valor correspondiente
* dentro de cada campo encontrado.
*/
fields.forEach(function (field) {
if (field.value !== value) {
field.value = value;
/**
* Disparamos los eventos para que
* Elementor u otros scripts detecten
* correctamente el cambio.
*/
field.dispatchEvent(
new Event('input', {
bubbles: true
})
);
field.dispatchEvent(
new Event('change', {
bubbles: true
})
);
}
});
});
}
/**
* Inicializa el sistema de seguimiento UTM.
*/
function initUTMTracking() {
/**
* Primero capturamos cualquier UTM
* presente en la URL actual.
*/
captureUTMs();
/**
* Después rellenamos los formularios
* que ya existen en la página.
*/
populateUTMFields(document);
/**
* Elementor puede cargar formularios
* dinámicamente, por ejemplo dentro
* de un popup.
*
* MutationObserver permite detectar
* nuevos elementos añadidos al DOM.
*/
if (document.body) {
const observer = new MutationObserver(
function (mutations) {
mutations.forEach(
function (mutation) {
mutation.addedNodes.forEach(
function (node) {
if (node.nodeType !== 1) {
return;
}
populateUTMFields(node);
}
);
}
);
}
);
observer.observe(document.body, {
childList: true,
subtree: true
});
}
/**
* Como medida adicional, volvemos a comprobar
* los UTM justo antes de enviar cualquier
* formulario de Elementor.
*/
document.addEventListener(
'submit',
function (event) {
const form = event.target;
if (
form &&
form.classList &&
form.classList.contains('elementor-form')
) {
populateUTMFields(form);
}
},
true
);
}
/**
* Ejecutamos el sistema cuando el DOM
* esté preparado.
*
* Esta comprobación permite que el código
* siga funcionando correctamente incluso
* si cambia su posición de carga.
*/
if (document.readyState === 'loading') {
document.addEventListener(
'DOMContentLoaded',
initUTMTracking
);
} else {
initUTMTracking();
}
})();
</script>Después de pegar el código, publícalo y asegúrate de que la condición sea Entire Site.
¿Cómo funciona el seguimiento UTM?
Supongamos que una persona entra mediante Google Ads utilizando esta URL:
https://ejemplo.com/?utm_source=google&utm_medium=cpc&utm_campaign=desarrollo_webEl código detectará los siguientes datos:
utm_source = google
utm_medium = cpc
utm_campaign = desarrollo_webA continuación, guardará cada valor en una cookie durante 14 días.
El visitante puede continuar navegando por páginas que ya no incluyen parámetros UTM:
https://ejemplo.com/servicios/Después:
https://ejemplo.com/blog/Y finalmente:
https://ejemplo.com/contacto/Cuando llegue al formulario de contacto, el script recuperará los parámetros almacenados y los colocará en los campos ocultos correspondientes.
Guardar UTM en formularios dentro de popups de Elementor
Un formulario no siempre está presente desde el momento en que se carga la página.
Elementor puede mostrar formularios dentro de:
- Popups.
- Ventanas modales.
- Contenido cargado posteriormente.
- Elementos dinámicos.
Por esta razón el código utiliza:
MutationObserverEl observador detecta nuevos elementos que aparecen en el DOM y comprueba si contienen campos UTM.
Así evitamos depender de soluciones como:
setTimeout()Un retraso fijo podría funcionar si el formulario aparece después de uno o dos segundos, pero no serviría correctamente si el usuario abre un popup varios minutos después de cargar la página.
Cómo comprobar que los parámetros UTM funcionan
Una vez publicado el código, es recomendable realizar una prueba completa.
Puedes utilizar una URL como:
https://zlccorp.com/contact/?utm_source=facebook&utm_medium=social&utm_campaign=prueba_utm&utm_term=contacto&utm_content=boton_pruebaCon esta URL deberían almacenarse los siguientes valores:
utm_source = facebook
utm_medium = social
utm_campaign = prueba_utm
utm_term = contacto
utm_content = boton_pruebaCompleta y envía el formulario de Elementor.
En los datos recibidos deberías encontrar también los campos UTM.
Cómo comprobar las cookies UTM desde Chrome
También podemos comprobar directamente si el navegador almacenó la información.
Abre las herramientas de desarrollador de Google Chrome utilizando:
F12Después dirígete a:
Application → Storage → CookiesSelecciona el dominio de tu sitio.
Deberías encontrar:
utm_source
utm_medium
utm_campaign
utm_term
utm_contentCada cookie debe contener el valor enviado mediante la URL de prueba.
¿Qué ocurre si un usuario llega desde una campaña diferente?
Este código utiliza un modelo sencillo de atribución de última campaña o last touch.
Por ejemplo, una persona puede llegar inicialmente desde:
utm_source=facebookCinco días después vuelve mediante un anuncio de Google:
utm_source=googleComo existe un nuevo parámetro UTM en la URL, el script actualizará la cookie y almacenará:
utm_source=googleCuando el usuario complete el formulario, se registrará Google como la fuente más reciente.
Si vuelve a la página sin ningún parámetro UTM, los valores almacenados anteriormente no se reemplazan.
Cambiar la duración de las cookies UTM
La duración se controla mediante esta línea:
const COOKIE_DAYS = 14;Para guardar los parámetros durante 30 días:
const COOKIE_DAYS = 30;Para conservarlos durante 7 días:
const COOKIE_DAYS = 7;Puedes adaptar este valor al ciclo de conversión habitual de tu sitio o de tus campañas.
Qué información recibirás en Elementor
Una vez configurado correctamente, un formulario podría registrar información similar a:
Nombre: Carlos
Email: carlos@ejemplo.com
Teléfono: +57 300 000 0000
utm_source: google
utm_medium: cpc
utm_campaign: desarrollo_web
utm_term: wordpress
utm_content: anuncio_01Los campos UTM pueden utilizarse posteriormente para analizar qué canales, campañas y anuncios están generando formularios enviados.
También puedes enviar estos datos mediante las acciones disponibles en tu formulario hacia otras herramientas de marketing, automatización o gestión de clientes.
Conclusión
Guardar parámetros UTM en Elementor ayuda a conservar el origen de los contactos incluso cuando el usuario navega por varias páginas antes de enviar un formulario.
La combinación de campos ocultos, cookies y JavaScript permite mantener los datos durante 14 días, rellenar automáticamente los formularios y trabajar también con formularios cargados dinámicamente o dentro de popups.
Con esta implementación puedes registrar utm_source, utm_medium, utm_campaign, utm_term y utm_content junto con cada lead y obtener información más útil para evaluar el rendimiento de tus campañas.