El snippet de seguimiento es un pequeño script asíncrono —unos pocos kilobytes servidos desde una ruta propia almacenada en caché perimetral— que identifica la organización detrás de cada sesión. Si está bien instalado, nunca deberías notarlo. Si está mal instalado, pasarás una semana investigando por qué faltan empresas identificadas hasta descubrir que el cargador estaba dentro de un parcial con carga diferida. Esta guía te ahorrará esa semana.
Tres principios antes de pegar nada
- El cargador debe estar en el head del HTML de todo el sitio. No en el footer, ni en una plantilla de página concreta, ni en un componente que solo se renderiza en las páginas de marketing. En el head, en todas las páginas.
- El cargador es asíncrono de forma predeterminada. No añadas ninguna modificación de defer/async que cambie el momento en que se ejecuta; los atributos incluidos son los que hemos probado.
- Instálalo una sola vez, exactamente. Dos copias del cargador en una misma página no duplican tus datos: duplican las solicitudes y complican la depuración.
WordPress
La instalación más limpia en WordPress evita editar el tema. Usa un plugin de scripts de cabecera —cualquiera de los más conocidos servirá—, pega el cargador en el campo «scripts in head», guarda y borra cualquier caché de páginas. Si no quieres utilizar un plugin, añade un pequeño archivo mu-plugin que se enganche a wp_head con prioridad 5 para que el cargador aparezca antes que las etiquetas de analítica. No lo pegues en el cuerpo de una página o entrada: WordPress eliminará la etiqueta script al sanear el contenido.
Una comprobación específica para WordPress: si utilizas una caché de página completa (LiteSpeed, WP Rocket, W3 Total Cache), purga la caché después de la instalación. El HTML almacenado en caché antes de instalarlo no contendrá el cargador.
Shopify
Shopify guarda el HTML del tema en theme.liquid. En el panel de administración de Shopify, abre Tienda online → Temas → Acciones → Editar código → theme.liquid y pega el cargador justo antes de la etiqueta de cierre </head>. Guarda los cambios. Eso es todo: no hace falta ninguna aplicación ni ningún script de pago —el proceso de pago queda fuera del alcance de la identificación de empresas en cualquier caso—.
Duplica primero el tema
Antes de editar theme.liquid, utiliza Acciones → Duplicar. Si algo sale mal, podrás revertirlo con un solo clic. Es un hábito de cinco segundos que ha salvado a todos los equipos de Shopify a los que se lo hemos recomendado.
Webflow
Webflow → Ajustes del sitio → Código personalizado → Código del head. Pega el cargador. Guarda. Publica el sitio. El código del head se aplica globalmente a todas las páginas, que es exactamente lo que necesitas. No pegues el cargador en un elemento insertado en una página concreta: solo harás seguimiento de esa página.
Google Tag Manager
GTM funciona, con dos salvedades. Primero, utiliza una etiqueta HTML personalizada con el activador configurado como «Todas las páginas» para que el cargador se ejecute en cada página vista. Segundo, asigna a la etiqueta una prioridad suficientemente alta para que se active antes que otras etiquetas de analítica que puedan ralentizar la carga útil inicial. Los usuarios de GTM suelen acumular cuatro o cinco etiquetas en el head; el cargador es pequeño, pero el orden de activación importa si quieres identificar desde la primera solicitud.
Salvedad sobre el modo de consentimiento: si utilizas GTM detrás de un banner de consentimiento que solo activa las etiquetas de analítica después de que el usuario acepte, no sometas la identificación de empresas al mismo requisito. No utiliza cookies ni almacena datos en el dispositivo del visitante, por lo que no requiere el mismo mecanismo de consentimiento. Configura la etiqueta para que se active de inmediato, junto con tus etiquetas estrictamente necesarias.
HTML puro / stacks a medida
Para un sitio desarrollado a medida o un framework que no hayamos mencionado, pega el cargador dentro del elemento <head> de tu plantilla base, es decir, el archivo que se renderiza en todas las páginas. Vuelve a compilar y desplegar. En los generadores de sitios estáticos, el cargador debe estar en el archivo de diseño global del sitio (en Next.js, es un <Script> en el diseño de nivel de aplicación con strategy="afterInteractive"; en Astro, el componente <BaseHead>; en 11ty, el parcial de la plantilla base). Si lo has añadido como script de un componente, solo informarán las páginas que incluyan ese componente.
Aplicaciones de página única: el único inconveniente
En una SPA, el cargador registra la página vista inicial cuando esta se carga por primera vez. Desde el punto de vista del navegador, las posteriores navegaciones en el lado del cliente no son nuevas páginas vistas automáticas. Nuestro cargador escucha la API History de forma predeterminada, por lo que las navegaciones hacia atrás o hacia delante y las basadas en pushState se registran como nuevas páginas vistas sin que tengas que añadir código. Si tu SPA utiliza un router no estándar que omite la API History —algo poco frecuente, pero que ocurre—, llama a la pequeña función documentada de página vista cuando cambie la ruta: son tres líneas y aparecen en la documentación.
Verifica la instalación en dos minutos
La verificación no es opcional. Hazla antes de cerrar la pestaña desde la que instalaste el cargador: detectar una instalación defectuosa cinco minutos después de pegarlo es trivial; hacerlo cinco días después, no.
- Abre tu sitio en una ventana privada o de incógnito para que ningún recurso almacenado en caché genere confusión.
- Abre DevTools → pestaña Red y filtra por «l5e» o por la ruta del cargador.
- Recarga la página. Deberías ver una solicitud al cargador y, después, una pequeña baliza de identificación. Ambas deberían tener el estado 200. Las cabeceras de respuesta del cargador deberían incluir una directiva cache-control con s-maxage y stale-while-revalidate.
- Ve a una segunda página. Deberías ver que se activa otra baliza de identificación, sin volver a descargar el cargador —devolverá un 304—.
- Vuelve al panel de lead.box, abre el feed de visitantes en tiempo real y confirma que aparece tu visita de prueba. Si es así, la instalación ha terminado.
Errores comunes: la primera tabla que debes consultar
| Síntoma | Causa probable | Solución |
|---|---|---|
| No aparece ninguna visita en tiempo real | El cargador no está en el head o está en la plantilla equivocada | Mueve el cargador a la plantilla del head de todo el sitio |
| Solo aparecen visitas en tiempo real de una sección | El cargador está insertado en una página concreta, no de forma global | Muévelo al head global o a la cabecera del tema |
| El cargador se carga, pero no hay ninguna baliza de identificación | El banner de consentimiento bloquea los scripts de terceros de forma demasiado agresiva | Configura el banner para permitir los elementos estrictamente necesarios; el cargador no requiere consentimiento |
| Dos balizas por cada página vista | El cargador está instalado dos veces (tema + plugin/etiqueta) | Elimina una de las instalaciones |
| El primer renderizado es lento tras la instalación | El cargador está situado antes del CSS crítico | Confirma que el atributo async está presente; colócalo después de la precarga del CSS crítico |
| La SPA solo registra la primera página | El router personalizado omite la API History | Llama a la función pageview() documentada cuando cambie la ruta |
| Se sirve HTML obsoleto sin el cargador | La caché de página completa no se ha purgado tras la instalación | Purga la caché y compruébalo en modo incógnito |
Nota de rendimiento: cargador en caché perimetral
El cargador se sirve desde una ruta propia redirigida mediante proxy a nuestra caché perimetral, con s-maxage=300 y stale-while-revalidate. En la práctica, esto significa que el cargador se obtiene una vez cada cinco minutos por cada PoP perimetral y, después, se sirve desde la caché a todos los visitantes posteriores. Su peso en bytes y su impacto de bloqueo son lo bastante reducidos como para que no recomendemos añadir ninguna lógica de carga adicional.
Cuándo pedir ayuda
Si has seguido los pasos de verificación y algo sigue sin funcionar correctamente, preferimos que contactes con nosotros a los diez minutos y no a los diez días. Necesitaremos tres cosas: la URL del sitio, una captura de pantalla de la pestaña Red de DevTools filtrada por la ruta del cargador y el nombre de la plataforma en la que lo instalaste. Eso basta para diagnosticar casi cualquier problema de instalación en la primera respuesta.
Published by
lead.box Team
More articles
Vea lead.box sobre su propio tráfico
Empiece gratis, sin tarjeta ni llamada comercial obligatoria. O reserve una demo guiada de 20 minutos si prefiere un recorrido acompañado.