Guía de Integración para Clientes

Todo lo que necesitas para conectar tu sitio web o app a RELO para el seguimiento de afiliados. Esta guía te lleva paso a paso por la configuración del seguimiento de pagos vía Stripe y la instalación del pixel web para analítica de tráfico.

Flujo de integración

Resumen

RELO es una plataforma de marketing de afiliados que rastrea qué partners (afiliados) llevan clientes a tu negocio. Cuando un partner comparte un enlace de seguimiento y un cliente hace clic, RELO registra ese clic. Cuando el cliente realiza una compra, RELO automáticamente asocia la venta al partner correcto y calcula su comisión. No necesitas construir ninguna lógica de atribución por tu cuenta.

Hay dos cosas que configurar:

¿Qué integración necesitas?

Responde 3 preguntas rápidas y te indicaremos exactamente qué leer.

P1: ¿Cómo aceptas pagos?

• 💳 Stripe
• 🌐 PayPal
• ⚙️ Otro

P2: ¿Qué integración de Stripe usas?

• 🔗 Checkout (página alojada)
• 🎨 Elements (embebido)
• 🔄 Billing (subscriptions)
• ❓ No estoy seguro

P3: ¿Con qué está construido tu sitio web?

• 📄 Plain HTML
• 🛒 WordPress / Shopify
• ⚛️ React / Next.js
• 🔧 Otro framework

Cómo se Conecta Todo

1. Webhook de Stripe (Seguimiento de Pagos)

⏱️ ~5 min

¿Por qué lo necesitas?

Cada vez que un cliente paga a través de Stripe, Stripe envía una notificación webhook a RELO. RELO procesa esta notificación, identifica qué partner trajo al cliente (usando la cookie de seguimiento de su clic) y registra la venta con la comisión correcta. Esto sucede automáticamente — no necesitas construir ningún código de seguimiento personalizado.

Tu URL de webhook es única para tu cuenta. Sigue este formato:

POST https://ingest.relo.mx/postback/stripe/{your-client-slug}

Reemplaza {your-client-slug} con el slug que tu contacto de RELO te proporcionó (ej., samsung, mycompany). Si no estás seguro de tu slug, consulta tu Dashboard de RELO en Config → Data Pipeline o pregunta a tu contacto de RELO.

https://ingest.relo.mx/postback/stripe/{your-client-slug}

        const session = await stripe.checkout.sessions.create({
          line_items: [{ price: 'price_xxx', quantity: 1 }],
          mode: 'payment',
          success_url: 'https://yoursite.com/success',
          cancel_url: 'https://yoursite.com/cancel',
          metadata: {
            relo_click_id: req.cookies._relo_cid || ''
          }
        });

        session = stripe.checkout.Session.create(
            line_items=[{"price": "price_xxx", "quantity": 1}],
            mode="payment",
            success_url="https://yoursite.com/success",
            cancel_url="https://yoursite.com/cancel",
            metadata={
                "relo_click_id": request.COOKIES.get("_relo_cid", "")
            }
        )

        $session = \Stripe\Checkout\Session::create([
            'line_items' => [['price' => 'price_xxx', 'quantity' => 1]],
            'mode' => 'payment',
            'success_url' => 'https://yoursite.com/success',
            'cancel_url' => 'https://yoursite.com/cancel',
            'metadata' => [
                'relo_click_id' => $_COOKIE['_relo_cid'] ?? ''
            ]
        ]);

checkout.session.completed
invoice.paid
customer.subscription.created
customer.subscription.updated
customer.subscription.deleted

Solución de Problemas

2. Pixel Web (Analítica de Tráfico)

⏱️ ~3 min

¿Por qué lo necesitas?

El pixel web es un pequeño fragmento de JavaScript que se ejecuta en tu sitio web. Rastrea vistas de página y comportamiento del usuario, permitiéndote ver qué partners generan más tráfico — incluso antes de que ocurra alguna compra. También establece una cookie de primera parte (_relo_cid) que mejora la precisión de la atribución de compras.

<!-- RELO Tracking Pixel -->
<script>
(function(r,e,l,o){r.relo=r.relo||function(){
(r.relo.q=r.relo.q||[]).push(arguments)};
o=e.createElement('script');o.async=1;o.src=l;
e.head.appendChild(o);
})(window,document,'https://p.relo.mx/r.js');

relo('init', { client_id: YOUR_CLIENT_ID });
relo('page');
</script>

<script>
(function(r,e,l,o){r.relo=r.relo||function(){
(r.relo.q=r.relo.q||[]).push(arguments)};
o=e.createElement('script');o.async=1;o.src=l;
e.head.appendChild(o);
})(window,document,'https://p.relo.mx/r.js');

relo('init', { client_id: YOUR_CLIENT_ID });
relo('page');
</script>

<script>
(function(r,e,l,o){r.relo=r.relo||function(){
(r.relo.q=r.relo.q||[]).push(arguments)};
o=e.createElement('script');o.async=1;o.src=l;
e.head.appendChild(o);
})(window,document,'https://p.relo.mx/r.js');

relo('init', { client_id: YOUR_CLIENT_ID });
</script>

        import { useEffect } from 'react';
        import { useLocation } from 'react-router-dom';

        function useReloPageTracking() {
          const location = useLocation();

          useEffect(() => {
            if (window.relo) {
              window.relo('page');
            }
          }, [location.pathname]);
        }

        // Use in your App component:
        function App() {
          useReloPageTracking();
          return <Routes>...</Routes>;
        }

        // app/layout.tsx
        'use client';
        import { usePathname } from 'next/navigation';
        import { useEffect } from 'react';

        export default function RootLayout({ children }) {
          const pathname = usePathname();

          useEffect(() => {
            if (window.relo) {
              window.relo('page');
            }
          }, [pathname]);

          return (
            <html>
              <head>
                <script
                  dangerouslySetInnerHTML={{
                    __html: `
                      (function(r,e,l,o){r.relo=r.relo||function(){
                      (r.relo.q=r.relo.q||[]).push(arguments)};
                      o=e.createElement('script');o.async=1;o.src=l;
                      e.head.appendChild(o);
                      })(window,document,'https://p.relo.mx/r.js');
                      relo('init', { client_id: YOUR_CLIENT_ID });
                    `
                  }}
                />
              </head>
              <body>{children}</body>
            </html>
          );
        }

        // pages/_app.tsx
        import { useRouter } from 'next/router';
        import { useEffect } from 'react';

        function MyApp({ Component, pageProps }) {
          const router = useRouter();

          useEffect(() => {
            const handleRouteChange = () => {
              if (window.relo) window.relo('page');
            };
            router.events.on('routeChangeComplete', handleRouteChange);
            return () => router.events.off('routeChangeComplete', handleRouteChange);
          }, [router.events]);

          return <Component {...pageProps} />;
        }

<!-- RELO Tracking Pixel -->
<script>
(function(r,e,l,o){r.relo=r.relo||function(){
(r.relo.q=r.relo.q||[]).push(arguments)};
o=e.createElement('script');o.async=1;o.src=l;
e.head.appendChild(o);
})(window,document,'https://p.relo.mx/r.js');

relo('init', { client_id: YOUR_CLIENT_ID });
relo('page');
</script>

Eventos Personalizados (Opcional — Fase 2)

Después de instalar el pixel básico, puedes opcionalmente enviar eventos personalizados para rastrear acciones específicas del usuario. Esto desbloquea embudos de conversión, analítica de productos y datos de rendimiento de partners más detallados.

Evento de Compra

Dispara esto en tu página de confirmación de orden / página de agradecimiento:

relo('event', 'purchase', {
  order_id: 'ORD-12345',
  value: 299.99,
  currency: 'MXN',
  products: [
    { id: 'SKU-001', name: 'Product Name', price: 299.99, quantity: 1 }
  ]
});

Ver Producto

relo('event', 'view_product', {
  product_id: 'SKU-001',
  name: 'Galaxy S24 Ultra',
  price: 24999,
  currency: 'MXN',
  category: 'Smartphones'
});

Agregar al Carrito

relo('event', 'add_to_cart', {
  product_id: 'SKU-001',
  name: 'Galaxy S24 Ultra',
  price: 24999,
  currency: 'MXN',
  quantity: 1
});

Iniciar Checkout

relo('event', 'begin_checkout', {
  value: 24999,
  currency: 'MXN',
  item_count: 1
});

Evento Personalizado (Genérico)

relo('event', 'sign_up', {
  method: 'email',
  plan: 'pro'
});

Verificación

Sigue estos pasos para confirmar que el pixel está instalado correctamente:

3. Cómo Funciona la Atribución de Partners

⏱️ ~2 min read

No necesitas construir ninguna lógica de atribución. Aquí te explicamos lo que sucede detrás de escenas, para que entiendas cómo los partners reciben crédito por las ventas:

Detalles importantes

¿Qué necesitan hacer los partners?

Nada de tu lado. Los partners generan sus propios enlaces de seguimiento desde el Portal de Partners de RELO. Usan estos enlaces en sus campañas. No necesitas crear enlaces, gestionar cuentas de partners ni manejar ninguna lógica de seguimiento.

Preguntas Frecuentes

Lista de Verificación de Integración

Rastrea tu progreso. Tu estado se guarda localmente para que puedas volver cuando quieras.

• Endpoint de webhook de Stripe agregado en Stripe Dashboard
• Eventos correctos seleccionados (checkout.session.completed, invoice.paid)
• Signing secret (whsec_...) compartido con RELO
• Fragmento del pixel web agregado a todas las páginas
• Pixel verificado: función relo existe en consola
• Pixel verificado: solicitudes de red a p.relo.mx visibles
• Pixel verificado: cookie _relo_cid establecida
• Compra de prueba realizada en modo test de Stripe
• Compra de prueba visible en Dashboard de RELO

¡Integración Completa!

Tu integración de RELO está completamente configurada. Las ventas generadas por partners serán rastreadas automáticamente.

¿Necesitas Ayuda?

Si tienes preguntas o encuentras problemas, estamos aquí para ayudarte.