use-tracking-params

Hook de React para capturar y persistir parámetros de seguimiento (utm, btag y otros IDs personalizados) desde la URL, con expiración automática configurable. Ideal para campañas de marketing y atribución.

Instalación

npm install use-tracking-params

Compatibilidad

React 17+

Soporta TypeScript y JavaScript

Compatible con entornos Vite, Next.js o Create React App

Uso básico

import { useTrackingParams } from 'use-tracking-params';

const MyComponent = () => {
  const { 
    getTrackedUrl, 
    getTrackingParamsAll, 
    getTrackingParamsUTMs, 
    getTrackingParamsAffiliates 
  } = useTrackingParams(30); // 30 días de expiración (opcional)

  return (
    <>
      <a href={getTrackedUrl('https://misitio.com/login')}>Entrar</a>
      <a href={getTrackedUrl('https://misitio.com/registro')}>Registrarse</a>
    </>
  );
};

¿Qué parámetros guarda?

Todos los que comiencen con utm_ (utm_source, utm_medium, etc.) btag Y otros parámetros comunes de afiliación: affiliateId, affId, ClickId, epi, epi2, gfid, mbExtRefId, mbR

Cada parámetro se guarda en localStorage con una duración de 30 días (por defecto).

¿Qué retorna?

El hook te da:

getTrackedUrl(baseUrl: string): te devuelve la URL con los parámetros ya aplicados

getTrackingParamsAll(): te devuelve un objeto con todos los parámetros guardados (UTM + afiliación)

getTrackingParamsUTMs(): te devuelve solo los parámetros UTM

getTrackingParamsAffiliates(): te devuelve solo los parámetros de afiliación

Ejemplo completo

import { useTrackingParams } from 'use-tracking-params';

function App() {
  const { 
    getTrackedUrl, 
    getTrackingParamsAll, 
    getTrackingParamsUTMs, 
    getTrackingParamsAffiliates 
  } = useTrackingParams(30);

  return (
    <div>
      {/* URLs con parámetros añadidos automáticamente */}
      <a href={getTrackedUrl('https://misitio.com/login')}>Login</a>
      
      {/* Ver parámetros capturados */}
      <p>Todos: {JSON.stringify(getTrackingParamsAll())}</p>
      <p>UTM: {JSON.stringify(getTrackingParamsUTMs())}</p>
      <p>Afiliación: {JSON.stringify(getTrackingParamsAffiliates())}</p>
    </div>
  );
}