Primeros pasos

Configuración del script

Todas las opciones y atributos de datos del script de seguimiento

El script de seguimiento de Flowsery Analytics admite varios atributos de datos para personalizar el comportamiento del seguimiento. Esta guia cubre todas las opciones de configuracion disponibles.

Nuevo en Flowsery Analytics?

Comience primero con la guia de instalacion para agregar el script de seguimiento a su sitio web.

Atributos del script

ID del sitio web -- data-fl-website-id (obligatorio)

Su identificador unico de sitio web de Flowsery Analytics.

Etiqueta script basica
<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  src="https://analytics.flowsery.com/js/script.js"
></script>

Dominio -- data-domain (obligatorio)

El dominio raiz de su sitio web. Se usa para la gestion de cookies entre subdominios.

Seguimiento de subdominios

Por defecto, Flowsery Analytics rastrea todos los subdominios de su dominio raiz. Por ejemplo, si su dominio raiz es example.com, Flowsery Analytics opera en app.example.com, blog.example.com, shop.example.com, etc.

Nombres de host permitidos -- data-allowed-hostnames (opcional)

Lista separada por comas de dominios adicionales para seguimiento entre dominios.

  • Predeterminado: Vacio (sin seguimiento entre dominios)
  • Ejemplo: app.io,shop.example.com
  • Caso de uso: Rastrear usuarios a traves de diferentes dominios raiz
Seguimiento entre dominios
<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  data-allowed-hostnames="app.io,myapp.org"
  src="https://analytics.flowsery.com/js/script.js"
></script>

URL de la API -- data-api (opcional)

Endpoint API personalizado para enviar eventos. Acepta una URL completa o una ruta relativa.

  • Ejemplo: https://api.example.com/events o /custom-events
  • Caso de uso: Endpoints API personalizados, proxies de analisis de terceros o configuraciones avanzadas de proxy

Si proporciona una ruta relativa, se agrega a su dominio.

Deteccion automatica de proxy

Flowsery Analytics detecta automaticamente las configuraciones con proxy. Solo use esto si necesita una ruta de endpoint personalizada o desea enviar eventos a un servidor completamente diferente.

Permitir Localhost -- data-local (opcional)

Habilitar seguimiento en localhost para desarrollo y pruebas. Acepta "true" o "false". Predeterminado: false.

Permitir protocolo de archivo -- data-allow-file-protocol (opcional)

Habilitar seguimiento al abrir archivos HTML directamente en el navegador (protocolo file://). Acepta "true" o "false". Predeterminado: false.

Modo de depuracion -- data-debug (opcional)

Habilitar el modo de depuracion para permitir seguimiento dentro de iframes. Acepta "true" o "false". Predeterminado: false. Por defecto, Flowsery Analytics no rastrea dentro de iframes para evitar seguimiento duplicado.

Deshabilitar consola -- data-disable-console (opcional)

Deshabilitar todos los registros de consola del rastreador de Flowsery Analytics. Acepta "true" o "false". Predeterminado: false.

Deshabilitar pagos -- data-disable-payments (opcional)

Deshabilitar el seguimiento automatico de pagos y la atribucion de ingresos desde parametros de URL (Stripe session_id, LemonSqueezy order_id, Polar checkout_id). Acepta "true" o "false". Predeterminado: false.

  • Caso de uso: Cuando se usa atribucion de ingresos del lado del servidor para evitar eventos de pago duplicados

Seguimiento manual de pagos

Las llamadas manuales a window.flowsery("payment", { email }) siguen funcionando cuando esta opcion esta habilitada. Solo se deshabilita la deteccion automatica desde parametros de URL.

Atributos de elementos HTML

Estos atributos se agregan a los elementos HTML en su pagina para habilitar el seguimiento automatico.

Seguimiento de objetivos -- data-fs-goal (opcional)

Rastrear clics en cualquier elemento como un objetivo personalizado. Solo letras minusculas, numeros, guiones bajos, guiones. Max. 64 caracteres.

<button data-fs-goal="add_to_cart">Add to Cart</button>

Parametros de objetivos -- data-fs-goal-* (opcional)

Agregar parametros personalizados a los eventos de objetivos. El nombre del parametro se deriva del nombre del atributo (kebab-case, convertido a snake_case). Max. 10 parametros por evento. Nombres de parametros: max. 64 caracteres. Valores: max. 255 caracteres.

Objetivo con parametros
<button
  data-fs-goal="product_added"
  data-fs-goal-product-id="prod_123"
  data-fs-goal-product-name="Premium Plan"
  data-fs-goal-price="49">
  Add to Cart
</button>

Seguimiento de scroll -- data-fs-scroll (opcional)

Rastrear automaticamente cuando un elemento se hace visible durante el desplazamiento. Disparador predeterminado: elemento visible al 50%. Mismas reglas de nomenclatura que data-fs-goal.

<section data-fs-scroll="viewed_pricing">
  <h2>Pricing</h2>
</section>

Umbral de scroll -- data-fs-scroll-threshold (opcional)

Personalizar el umbral de visibilidad para el seguimiento de scroll. Decimal entre 0 y 1. Predeterminado: 0.5 (50% del elemento visible). Valores comunes: 0.1 (10%), 0.5 (50%), 0.9 (90%), 1.0 (100%).

Retraso de scroll -- data-fs-scroll-delay (opcional)

Agregar un retraso en milisegundos antes de que se registre el evento de scroll. Predeterminado: 0 (sin retraso).

Seguimiento de scroll con umbral y retraso
<section
  data-fs-scroll="read_testimonials"
  data-fs-scroll-threshold="0.7"
  data-fs-scroll-delay="3000">
  <!-- Tracks only if element stays visible for 3 seconds -->
</section>

Parametros de scroll -- data-fs-scroll-*

Agregar parametros personalizados a los eventos de seguimiento de scroll, similar a data-fs-goal-*.

Ejemplos de configuracion comunes

Entorno de desarrollo

<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  data-local="true"
  src="https://analytics.flowsery.com/js/script.js"
></script>

Produccion con proxy

<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  src="/js/script.js"
></script>

Flowsery Analytics detecta automaticamente las configuraciones con proxy. No se necesita data-api si hace proxy tanto de /js/script.js como de /api/events.

Seguimiento entre dominios

<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  data-allowed-hostnames="app.io,shop.example.net"
  src="https://analytics.flowsery.com/js/script.js"
></script>

Use la misma configuracion en todos los dominios rastreados.

Seguimiento de navegacion basada en hash

Para aplicaciones de pagina unica con enrutamiento hash:

<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  src="https://analytics.flowsery.com/js/script.hash.js"
></script>

Resumen de reglas de validacion

Nombres de objetivos y eventos

  • Caracteres: Letras minusculas, numeros, guiones bajos (_), guiones (-)
  • Longitud: Maximo 64 caracteres

Nombres de parametros personalizados

  • Caracteres: Letras minusculas, numeros, guiones bajos (_), guiones (-)
  • Longitud: Maximo 64 caracteres
  • Conversion: Los atributos en kebab-case se convierten automaticamente a snake_case

Valores de parametros personalizados

  • Longitud: Maximo 255 caracteres
  • HTML/XSS: Los caracteres peligrosos se sanean automaticamente
  • Limite: Maximo 10 parametros personalizados por evento

Umbral de scroll

Numero decimal, rango de 0.0 a 1.0, predeterminado 0.5.

Retraso de scroll

Entero (milisegundos), rango 0 o superior, predeterminado 0.

Solucion de problemas

El seguimiento no funciona en localhost

Agregue data-local="true" para habilitar el seguimiento local.

Los objetivos personalizados no se disparan

Verifique que el nombre de su objetivo siga las reglas de validacion: solo minusculas, sin espacios ni caracteres especiales (excepto _ y -), max. 64 caracteres.

El seguimiento entre dominios no funciona

Verifique: mismo data-fl-website-id en todos los dominios, todos los dominios adicionales listados en data-allowed-hostnames, los usuarios hacen clic en enlaces entre dominios.

El seguimiento de scroll no se activa

Problemas comunes: el elemento no permanece en el viewport suficiente tiempo, umbral configurado demasiado alto, IntersectionObserver no compatible.