Guía de instalación: WordPress, Next.js, Tilda y más

Inicio rápido

Añade el script de seguimiento de EuroMetrics a tu web en menos de un minuto. Pega el siguiente fragmento antes de la etiqueta de cierre </head> en todas las páginas que quieras medir:

<script defer src="https://app.eurometrics.eu/script.js"
        data-website-id="YOUR_WEBSITE_ID"></script>

Sustituye YOUR_WEBSITE_ID por el ID del sitio web que aparece en tu panel de EuroMetrics. Lo encontrarás en Ajustes → Sitios web → Código de seguimiento.

El script ocupa solo 1,5 KB: se carga de forma asíncrona con defer y no afecta en absoluto al rendimiento de la página. No instala cookies ni necesita banner de consentimiento.

WordPress

EuroMetrics ofrece un plugin oficial de WordPress para que la configuración sea lo más sencilla posible. Si prefieres tener el control total, también puedes integrarlo manualmente.

Opción 1: plugin oficial (recomendado)

1. Descarga la última versión desde GitHub (eurometrics-1.0.0.zip).
2. En el panel de administración de WordPress, ve a Plugins → Añadir nuevo → Subir plugin. Selecciona el archivo ZIP descargado, haz clic en Instalar ahora y después en Activar.
3. Ve a Ajustes → EuroMetrics, pega tu ID del sitio web y guarda. Eso es todo: el seguimiento ya está activo.

Configuración

1. Ve a Ajustes → EuroMetrics.
2. El campo URL de EuroMetrics viene rellenado con https://app.eurometrics.eu. Cámbialo solo si usas una instancia White Label.
3. Introduce tu ID del sitio web (lo encontrarás en tu panel de EuroMetrics, en Ajustes → Sitios web → Código de seguimiento, en formato UUID).
4. Si quieres, activa Excluir administradores para que no se registren tus propias visitas cuando hayas iniciado sesión como administrador.
5. Haz clic en Guardar cambios. El indicador de estado se pone en verde cuando el seguimiento está activo.

Referencia de ajustes del plugin

Opción 2: instalación manual

Si prefieres no usar el plugin, añade el código de seguimiento manualmente en el archivo functions.php de tu tema:

function add_eurometrics_tracking() {
    $website_id = 'YOUR_WEBSITE_ID';
    $host = 'https://app.eurometrics.eu';
    echo '<script defer src="' . esc_url($host . '/script.js') . '" data-website-id="' . esc_attr($website_id) . '"></script>';
}
add_action('wp_head', 'add_eurometrics_tracking');

También puedes usar un plugin como Insert Headers and Footers para pegar la etiqueta del script en la sección <head> sin editar los archivos del tema.

Opción 3: plugin de fragmentos de código

Si usas un plugin de gestión de código como WPCode, Code Snippets o similar:

1. Abre los ajustes o el gestor de fragmentos del plugin.
2. Añade un nuevo fragmento en la sección Cabecera de todo el sitio.
3. Pega el script de seguimiento y sustituye YOUR_WEBSITE_ID por tu ID del sitio web real.
4. Guarda y activa el fragmento.

Comprobar la instalación

• Comprueba que el script se inserta: abre tu web en una ventana de incógnito, haz clic derecho → Ver código fuente de la página y busca eurometrics.
• Comprueba las peticiones de red: abre las herramientas para desarrolladores (F12) → pestaña Red, recarga la página y filtra por script.js.
• Comprueba tu panel: inicia sesión en EuroMetrics y abre tu sitio web. Tu visita a la página debería aparecer en pocos segundos.

Solución de problemas

Avanzado: WordPress Multisite

El plugin de EuroMetrics funciona en instalaciones de WordPress Multisite. Activa el plugin en toda la red y después entra en Ajustes → EuroMetrics en cada subsitio e introduce el ID del sitio web correspondiente.

Avanzado: compatibilidad con cachés

El script de seguimiento es compatible con los principales plugins de caché de WordPress: WP Super Cache, W3 Total Cache, LiteSpeed Cache (sin configuración especial), WP Rocket (asegúrate de que el script no está en la lista “Delay JavaScript Execution”) y Cloudflare (excluye script.js de Rocket Loader).

Avanzado: WooCommerce

EuroMetrics funciona con WooCommerce desde el primer momento. Las visitas a páginas de producto, páginas de categoría, carrito, pago y confirmación de pedido se registran automáticamente.

Next.js

Usa el componente integrado next/script para una carga óptima. Añádelo al layout raíz para que se cargue en todas las páginas:

// app/layout.tsx
import Script from "next/script"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.eurometrics.eu/script.js"
          data-website-id="YOUR_WEBSITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

La estrategia afterInteractive hace que el script se cargue cuando la página ya es interactiva, de forma parecida a defer en HTML normal.

¿Usas Pages Router? Si usas Pages Router en lugar de App Router, añade el componente Script a _app.tsx en lugar de a layout.tsx.

Tilda

Tilda te permite añadir HTML personalizado en el <head> de tu web:

1. Abre tu proyecto de Tilda y ve a Site Settings.
2. Haz clic en la pestaña More y busca HTML code for <head> section.
3. Pega el script de seguimiento.
4. Haz clic en Save y publica tu web. Los datos empezarán a aparecer en tu panel en pocos minutos.

Recomendaciones generales

Content Security Policy (CSP)

Si tu web usa una Content Security Policy, añade estas directivas:

Content-Security-Policy:
  script-src 'self' https://app.eurometrics.eu;
  connect-src 'self' https://app.eurometrics.eu;

Aplicaciones de una sola página

EuroMetrics detecta automáticamente la navegación del lado del cliente en SPA creadas con React, Vue, Svelte y otros frameworks. El script escucha los cambios de pushState y replaceState, así que no necesitas ninguna configuración adicional.

Seguimiento de eventos personalizados

Además de las visitas a páginas, puedes registrar eventos personalizados como clics en botones, envíos de formularios o compras:

// Track a custom event
umami.track("signup_click", {
  plan: "pro",
  source: "pricing_page",
})

Los eventos aparecen en tu panel, en Eventos, y puedes usarlos para crear embudos y objetivos de conversión.

¿Necesitas ayuda? Escríbenos a support@eurometrics.eu.