Guias por plataforma

El tracker MetriXs es una sola etiqueta <script> que va en el <head> de tu sitio web. En cada plataforma el fragmento es el mismo, pero donde lo pones difiere.

Aqui tienes tu fragmento. Reemplaza yourdomain.com con el dominio que registraste en MetriXs.

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>

Next.js

En el App Router (recomendado), anade el script a tu layout raiz para que se cargue en cada pagina. Abre app/layout.tsx (o app/layout.jsx) y anade el fragmento dentro del <head> usando next/script:

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          defer
          data-domain="yourdomain.com"
          src="https://app.metrixs.eu/tracker.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Usar strategy="afterInteractive" significa que el tracker se carga justo despues de que la pagina se vuelva interactiva, lo que mantiene tu carga inicial rapida mientras captura vistas de pagina en cambios de ruta del lado del cliente automaticamente.

Si estas en el antiguo Pages Router, anade la misma etiqueta <Script> a pages/_app.tsx.

React

Para apps React construidas con Vite o Create React App, anade el fragmento a tu archivo index.html en el directorio public/. Este es el enfoque mas simple y funciona para todas las configuraciones React de una sola pagina.

Abre public/index.html (o index.html en la raiz del proyecto para Vite) y pega el fragmento dentro de la etiqueta <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

El tracker se engancha en la API History, por lo que los cambios de ruta del lado del cliente en React Router se rastrean automaticamente.

Vue

Para apps Vue, anade el fragmento a tu archivo index.html (situado en la raiz del proyecto o en el directorio public/ segun tu configuracion).

Abre index.html y pega el fragmento dentro de la etiqueta <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

El tracker usa la API History, por lo que la navegacion de Vue Router se rastrea automaticamente sin configuracion adicional.

Angular

Para Angular, anade el fragmento a tu archivo index.html en el directorio src/.

Abre src/index.html y pega el fragmento dentro de la etiqueta <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

El tracker se engancha en la API History, por lo que la navegacion de Angular Router se rastrea automaticamente.

SvelteKit

Para SvelteKit, anade el fragmento a src/app.html, que es la plantilla HTML que envuelve cada pagina.

Abre src/app.html y pega el fragmento dentro de la etiqueta <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width" />
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Astro

Para Astro, anade el fragmento a tu componente de layout base. La mayoria de los proyectos Astro tienen un archivo src/layouts/BaseLayout.astro o similar.

Abre tu archivo de layout y anade el fragmento dentro del <head>:

---
const { title } = Astro.props
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Si tienes multiples layouts, anadelo a cada uno, o crea un componente <head> compartido que importes en todas partes.

Gatsby

Para Gatsby, usa el componente Script integrado en tu layout raiz. Gatsby recomienda esto sobre editar gatsby-ssr.js por rendimiento.

Abre src/pages/index.tsx (o cualquier archivo de pagina) y anade el componente Script de Gatsby. Para seguimiento en todo el sitio, anadelo a tu componente de layout:

import { Script } from 'gatsby'

// Inside your layout component's return:
<Script
  defer
  data-domain="yourdomain.com"
  src="https://app.metrixs.eu/tracker.js"
  strategy="idle"
/>

Alternativamente, puedes anadir el fragmento bruto a gatsby-ssr.js:

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="metrixs"
      defer
      data-domain="yourdomain.com"
      src="https://app.metrixs.eu/tracker.js"
    />,
  ])
}

WordPress

Hay dos formas de anadir el tracker a WordPress. Ambas requieren un tema hijo para que el tracker sobreviva a las actualizaciones del tema.

Opcion A: Usar functions.php (recomendado)

Abre el functions.php de tu tema hijo y anade:

add_action('wp_head', function () {
    ?>
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>
    <?php
});

Esto se engancha en wp_head, que se ejecuta dentro de la etiqueta <head> de cada pagina.

Opcion B: Usar un plugin

Instala el plugin “WPCode” o “Insert Headers and Footers”, luego pega el fragmento en la seccion “Header”. Esto es mas facil si no quieres editar archivos de tema.

Shopify

MetriXs tiene una aplicacion Shopify dedicada, instalacion en un clic, sin editar codigo necesaria. La aplicacion verifica automaticamente tu dominio, inyecta el tracker via un bloque App Embed y activa un pixel web para el seguimiento de pago.

No edites theme.liquid manualmente. Instala la aplicacion en su lugar:

Ve a la aplicacion MetriXs en Shopify
Haz clic en Instalar
Activa el bloque “MetriXs Analytics” App Embed en tu editor de tema (un clic, la aplicacion te da un enlace directo)
Elige un plan (Free, Basic, Team o Pro)
Listo, las vistas de pagina de la tienda + eventos de pago + ingresos aparecen automaticamente en tu panel

Consulta la guia de integracion de Shopify para el desglose completo del seguimiento de tienda, pixel de pago, ingresos y embudo de conversion.

Si prefieres rastrear solo la tienda (sin pago/ingresos) sin instalar la aplicacion, todavia puedes pegar el fragmento en theme.liquid como se describe para otras plataformas arriba, pero te perderas el pixel de pago y las metricas de comercio.

Webflow

Para Webflow, usa la funcion Custom Code (requiere un plan de sitio de pago).

Ve a Project Settings > Custom Code
Pega el fragmento en la seccion Head code:

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>

Haz clic en Save Changes
Publica tu sitio

El tracker se carga en cada pagina publicada.

Squarespace

Para Squarespace, usa Code Injection (requiere un plan Business o Commerce).

Ve a Settings > Advanced > Code Injection
Pega el fragmento en la seccion Header:

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>

Haz clic en Save

El tracker se carga en cada pagina de tu sitio.

Wix

Para Wix, usa la funcion Custom Code (requiere un plan de pago).

Ve a tu Wix Dashboard > Settings > Custom Code
Haz clic en + Add Custom Code
Nombralo “MetriXs”
Pega el fragmento:

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>

Establece Place code in en Head
Establece Apply code to en All pages
Haz clic en Apply

Plain HTML

Para un sitio en HTML simple, pega el fragmento dentro de la etiqueta <head> de cada pagina que quieras rastrear:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

Si tu sitio usa un archivo de encabezado o plantilla compartida (como includes de PHP), anadelo alli una sola vez en lugar de en cada pagina.