Saltar al contenido principal
Zenovaydocs
8 min de lectura

Seguimiento de Primera Parte con Netlify

Configura un proxy de primera parte en Netlify usando reglas de redirección simples. Funciona con cualquier sitio estático o framework.

Dificultad: Fácil - Solo agrega algunas líneas a un archivo de configuración.

Por qué Funciona (Mismo Origen)

Este enfoque utiliza /api/_z/script.js que está en el mismo origen que tu sitio web. Firefox ETP y otras protecciones de seguimiento solo bloquean solicitudes de origen cruzado.

  • El navegador ve: tudominio.com/api/_z/script.js → Mismo origen ✅
  • Netlify redirige la solicitud al servidor de Zenovay (el navegador nunca ve esto)
  • Toda la protección de seguimiento se evita porque la solicitud es de primera parte

Antes de Comenzar

Asegúrate de tener:

  • Un proyecto implementado en Netlify
  • Tu código de seguimiento de Zenovay (se encuentra en Dominios → tu sitio → General, en la tarjeta de script de seguimiento)
  • Acceso a la configuración de compilación de tu proyecto

Formato de tu Código de Seguimiento

Tu código de seguimiento se ve así: ZV_XXXXXXXXXX

  • Comienza con ZV_
  • Seguido por 10 caracteres (letras y números)
  • SENSIBLE A MAYÚSCULAS - cópialo exactamente

Ejemplo: ZV_Q8U0GYD70WR

Página de configuración general de dominios mostrando la tarjeta de script de seguimiento con el fragmento de script y la pestaña de Primera Parte
Encuentra tu código de seguimiento y la pestaña de Primera Parte en Dominios → tu sitio → General.

Opción 1: Usando Archivo _redirects (Lo Más Simple)

La forma más fácil de configurar el proxy es usar el archivo _redirects de Netlify.

Paso 1: Crear el Archivo de Redirecciones

Crea un archivo _redirects en tu carpeta public/ (o donde sea que vayan tus activos estáticos):

public/_redirectsTEXT
# Proxy de seguimiento de primera parte de Zenovay
/api/_z/*  https://api.zenovay.com/fp/:splat  200

Cómo funciona: El código de estado 200 hace que esto sea una reescritura (proxy) en lugar de una redirección. El navegador ve tu dominio, pero Netlify obtiene datos del API de Zenovay detrás de escenas.

Paso 2: Agregar el Script de Seguimiento

Tu HTMLHTML
<script defer
data-tracking-code="TU_CODIGO_DE_SEGUIMIENTO"
src="/api/_z/script.js">
</script>

Paso 3: Implementar

TerminalBash
netlify deploy --prod

O empuja a tu repositorio de Git si tienes implementación continua configurada.

Opción 2: Usando netlify.toml (Más Explícito)

Para configuraciones más complejas, usa netlify.toml:

Paso 1: Crear o Actualizar netlify.toml

Agrega la regla de redirección a tu netlify.toml en la raíz de tu proyecto:

netlify.tomlTOML
# Proxy de seguimiento de primera parte de Zenovay
[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true

Si ya tienes un netlify.toml, agrega la redirección a tu archivo existente:

netlify.toml (con configuración existente)TOML
[build]
command = "npm run build"
publish = "dist"

# Proxy de seguimiento de primera parte de Zenovay
[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true

# Tus otras redirecciones...
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

¡El orden importa! Pon la redirección de Zenovay ANTES de cualquier redirección general (como alternativas SPA). Netlify procesa las redirecciones en orden.

Paso 2: Agregar el Script de Seguimiento

Tu HTMLHTML
<script defer
data-tracking-code="TU_CODIGO_DE_SEGUIMIENTO"
src="/api/_z/script.js">
</script>

Paso 3: Implementar

TerminalBash
netlify deploy --prod

Ejemplos Específicos del Framework

React (Create React App)

public/_redirectsTEXT
/api/_z/*  https://api.zenovay.com/fp/:splat  200
public/index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
  <script defer data-tracking-code="TU_CODIGO_DE_SEGUIMIENTO" src="/api/_z/script.js"></script>
  <!-- otros elementos head -->
</head>
<body>
  <div id="root"></div>
</body>
</html>

Vue.js (Vite)

public/_redirectsTEXT
/api/_z/*  https://api.zenovay.com/fp/:splat  200
index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
  <script defer data-tracking-code="TU_CODIGO_DE_SEGUIMIENTO" src="/api/_z/script.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

Gatsby

netlify.tomlTOML
[build]
command = "gatsby build"
publish = "public"

[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true
gatsby-ssr.jsJSX
import React from 'react'

export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
  <script
    key="zenovay"
    defer
    data-tracking-code="TU_CODIGO_DE_SEGUIMIENTO"
    src="/api/_z/script.js"
  />
])
}

Hugo

static/_redirectsTEXT
/api/_z/*  https://api.zenovay.com/fp/:splat  200
layouts/partials/head.htmlHTML
<script defer data-tracking-code="TU_CODIGO_DE_SEGUIMIENTO" src="/api/_z/script.js"></script>

11ty (Eleventy)

src/_redirectsTEXT
/api/_z/*  https://api.zenovay.com/fp/:splat  200

Asegúrate de que _redirects se copie a la salida agregando a tu .eleventy.js:

.eleventy.jsJavaScript
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("src/_redirects");
// ... resto de la configuración
}

Verificar que Funcione

Verificar en el Panel de Netlify

  1. Ve a tu sitio en el Panel de Netlify
  2. Haz clic en Configuración del sitio → Redirecciones
  3. Deberías ver tu redirección /api/_z/* listada

Verificar la Pestaña de Red

  1. Visita tu sitio implementado
  2. Abre DevTools (F12)
  3. Ve a la pestaña Network
  4. Recarga la página
  5. Busca /api/_z/script.js

Deberías ver:

  • Estado: 200
  • Dominio: Tu dominio de Netlify
  • Respuesta: Código JavaScript

Probar en Modo Estricto de Firefox

  1. Abre Firefox
  2. Configuración → Privacidad y Seguridad → Protección de Seguimiento Mejorada: Estricto
  3. Visita tu sitio
  4. Verifica que el script se cargue correctamente

Solución de Problemas

La Redirección Devuelve 404

Causa: El archivo _redirects no se está publicando o está en el lugar equivocado.

Solución:

  1. Asegúrate de que _redirects esté en tu directorio de publicación (generalmente public/ o dist/)
  2. Para herramientas de compilación, asegúrate de que el archivo se copie durante la compilación
  3. Revisa el Panel de Netlify → Redirecciones para ver si se reconoce

La Redirección Causa un Bucle

Causa: Otra redirección está interfiriendo.

Solución:

  1. Usa force = true en netlify.toml para anular otras reglas
  2. Asegúrate de que la redirección de Zenovay venga ANTES de las reglas generales
  3. Busca reglas conflictivas en _redirects y netlify.toml

El Script se Carga Pero Devuelve HTML

Causa: Una redirección general de SPA está interceptando la solicitud.

Solución: Pon la redirección de Zenovay ANTES de tu alternativa SPA:

netlify.tomlTOML
# Esto DEBE venir primero
[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true

# La alternativa SPA viene después
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

La Geolocalización Muestra una Ubicación Incorrecta

Causa: El proxy de Netlify no reenvía automáticamente la IP del cliente.

Solución: Desafortunadamente, las redirecciones simples de Netlify no admiten encabezados personalizados. La geolocalización se basará en la ubicación del servidor edge de Netlify. Para una geolocalización precisa, considera:

  1. Usar Netlify Functions (Edge Functions) - configuración más compleja
  2. Usar Cloudflare Workers frente a Netlify

Avanzado: Usando Netlify Edge Functions

Para más control (incluido el reenvío de IP), puedes usar Netlify Edge Functions:

netlify/edge-functions/zenovay-proxy.tsTypeScript
import type { Context } from '@netlify/edge-functions'

export default async (request: Request, context: Context) => {
const url = new URL(request.url)
const path = url.pathname.replace('/api/_z/', '')
const targetUrl = `https://api.zenovay.com/fp/${path}${url.search}`

// Obtener IP del cliente
const clientIP = context.ip || ''

const headers = new Headers(request.headers)
headers.set('X-Zenovay-Real-IP', clientIP)
headers.delete('Host')

const response = await fetch(targetUrl, {
  method: request.method,
  headers: headers,
  body: request.body,
})

const responseHeaders = new Headers(response.headers)
responseHeaders.set('Access-Control-Allow-Origin', '*')

return new Response(response.body, {
  status: response.status,
  headers: responseHeaders,
})
}

export const config = {
path: '/api/_z/*',
}

Ejemplo Completo

Estructura del ProyectoTEXT
my-netlify-site/
├── netlify.toml
├── public/
│   ├── _redirects
│   └── index.html
├── src/
│   └── ...
└── package.json
netlify.tomlTOML
[build]
command = "npm run build"
publish = "dist"

[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true
public/index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Site</title>
  <script defer data-tracking-code="TU_CODIGO_DE_SEGUIMIENTO" src="/api/_z/script.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Lista de Verificación Final

Antes de terminar, verifica TODO esto:

  • _redirects o netlify.toml tiene la regla de redirección de Zenovay
  • La regla de redirección viene ANTES de cualquier regla general de SPA
  • La etiqueta de script usa /api/_z/script.js (no la URL directa de Zenovay)
  • El atributo data-tracking-code contiene tu código de seguimiento correcto
  • El proyecto está implementado (no solo ejecutándose localmente)
  • Probado en Firefox con la Protección de Seguimiento Mejorada establecida en Estricto
  • Las visitas aparecen en el panel de Zenovay

Próximos Pasos

¿Fue útil esta página?