Client Integration GuideGuia de Integracion para Clientes

OverviewResumen

RELO is an affiliate marketing platform that tracks which partners (affiliates) drive customers to your business. When a partner shares a tracking link and a customer clicks it, RELO records that click. When the customer later makes a purchase, RELO automatically matches the sale to the correct partner and calculates their commission. You do not need to build any attribution logic yourself. RELO es una plataforma de marketing de afiliados que rastrea que 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 automaticamente asocia la venta al partner correcto y calcula su comision. No necesitas construir ninguna logica de atribucion por tu cuenta.

There are two things to set up:Hay dos cosas que configurar:

How It All ConnectsComo se Conecta Todo

Why you need itPor que lo necesitas

Every time a customer pays through Stripe, Stripe sends a webhook notification to RELO. RELO processes this notification, identifies which partner drove the customer (using the tracking cookie from their click), and records the sale with the correct commission. This happens automatically — you do not need to build any custom tracking code. Cada vez que un cliente paga a traves de Stripe, Stripe envia una notificacion webhook a RELO. RELO procesa esta notificacion, identifica que partner trajo al cliente (usando la cookie de seguimiento de su clic) y registra la venta con la comision correcta. Esto sucede automaticamente — no necesitas construir ningun codigo de seguimiento personalizado.

Your webhook URL is unique to your account. It follows this format:Tu URL de webhook es unica para tu cuenta. Sigue este formato:

Replace {your-client-slug} with the slug your RELO contact provided (e.g., samsung, mycompany). If you are unsure of your slug, check your RELO Dashboard under Config → Data Pipeline or ask your RELO contact. Reemplaza {your-client-slug} con el slug que tu contacto de RELO te proporciono (ej., samsung, mycompany). Si no estas seguro de tu slug, consulta tu Dashboard de RELO en Config → Data Pipeline o pregunta a tu contacto de RELO.

This is the most common scenario. Your customer clicks a "Pay" button and is redirected to Stripe's hosted checkout page. After payment, they return to your site. You only need the webhook — no code changes required. Este es el escenario mas comun. Tu cliente hace clic en un boton "Pagar" y es redirigido a la pagina de checkout alojada de Stripe. Despues del pago, regresa a tu sitio. Solo necesitas el webhook — no se requieren cambios de codigo.

1. Open Stripe Dashboard
   Go to dashboard.stripe.com/webhooks and click "Add endpoint". Abre el Stripe Dashboard
   Ve a dashboard.stripe.com/webhooks y haz clic en "Add endpoint".
2. Enter the endpoint URL
   Paste your RELO webhook URL: Ingresa la URL del endpoint
   Pega tu URL de webhook de RELO:

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

3. Select events to listen to
   Click "Select events" and check the following: Selecciona los eventos a escuchar
   Haz clic en "Select events" y marca los siguientes:
   • checkout.session.completed
   • invoice.paid

   If you also have subscriptions, add the subscription events listed in Scenario C below.Si tambien tienes suscripciones, agrega los eventos de suscripcion listados en el Escenario C abajo.

4. Click "Add endpoint"
   Stripe will create the webhook and show you the endpoint details page. Haz clic en "Add endpoint"
   Stripe creara el webhook y te mostrara la pagina de detalles del endpoint.
5. Copy the signing secret
   On the endpoint details page, click "Reveal" under "Signing secret". Copy the value — it starts with whsec_. Copia el signing secret
   En la pagina de detalles del endpoint, haz clic en "Reveal" bajo "Signing secret". Copia el valor — comienza con whsec_.
6. Send the signing secret to RELO
   You have two options: Envia el signing secret a RELO
   Tienes dos opciones:
   • Option A: Go to your RELO Dashboard → Config → Data Pipeline → Stripe, and paste the secret there.Opcion A: Ve a tu Dashboard de RELO → Config → Data Pipeline → Stripe, y pega el secret ahi.
   • Option B: Send it directly to your RELO contact via email.Opcion B: Envialo directamente a tu contacto de RELO por email.

If you use Stripe Elements to embed a checkout form directly on your website, the webhook setup is exactly the same as Scenario A above. Follow all 6 steps. Si usas Stripe Elements para integrar un formulario de checkout directamente en tu sitio web, la configuracion del webhook es exactamente la misma que el Escenario A. Sigue los 6 pasos.

Optional: Improve attribution with metadataOpcional: Mejora la atribucion con metadata

For better attribution accuracy, you can pass the RELO click ID as metadata when creating the Stripe Checkout Session or Payment Intent. This is optional but recommended if you have developer resources available. Para mayor precision en la atribucion, puedes pasar el ID de clic de RELO como metadata al crear la Stripe Checkout Session o Payment Intent. Esto es opcional pero recomendado si tienes recursos de desarrollo disponibles.

The RELO pixel sets a cookie called _relo_cid on your domain. Your backend can read this cookie and include it in the Stripe session:El pixel de RELO establece una cookie llamada _relo_cid en tu dominio. Tu backend puede leer esta cookie e incluirla en la sesion de Stripe:

Node.js / ExpressCopy
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 || ''
  }
});

Python / DjangoCopy
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", "")
    }
)

PHP / LaravelCopy
$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'] ?? ''
    ]
]);

If your business uses recurring subscriptions, the webhook setup is the same as Scenario A, but you should subscribe to additional events to track the full subscription lifecycle (new subscriptions, renewals, cancellations, plan changes). Si tu negocio usa suscripciones recurrentes, la configuracion del webhook es la misma que el Escenario A, pero debes suscribirte a eventos adicionales para rastrear el ciclo de vida completo de las suscripciones (nuevas suscripciones, renovaciones, cancelaciones, cambios de plan).

When adding or editing your webhook endpoint in Stripe, select all of the following events:Al agregar o editar tu endpoint de webhook en Stripe, selecciona todos los siguientes eventos:

Events referenceReferencia de eventos

Quick-copy list of all events to subscribe to. Select these in your Stripe webhook configuration:Lista para copiar de todos los eventos a suscribir. Seleccionalos en la configuracion de tu webhook de Stripe:

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

TroubleshootingSolucion de Problemas

Why you need itPor que lo necesitas

The web pixel is a small JavaScript snippet that runs on your website. It tracks page views and user behavior, allowing you to see which partners drive the most traffic — even before any purchases happen. It also sets a first-party cookie (_relo_cid) that improves purchase attribution accuracy. El pixel web es un pequeno fragmento de JavaScript que se ejecuta en tu sitio web. Rastrea vistas de pagina y comportamiento del usuario, permitiendote ver que partners generan mas trafico — incluso antes de que ocurra alguna compra. Tambien establece una cookie de primera parte (_relo_cid) que mejora la precision de la atribucion de compras.

Paste this snippet into the <head> section of every page on your site. Replace YOUR_CLIENT_ID with the numeric client ID from your RELO account.Pega este fragmento en la seccion <head> de cada pagina de tu sitio. Reemplaza YOUR_CLIENT_ID con el ID numerico de cliente de tu cuenta RELO.

HTMLCopy
<!-- 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>

Where to paste itDonde pegarlo

• Open your website's HTML template (usually index.html, layout.html, or your CMS header template)Abre la plantilla HTML de tu sitio web (usualmente index.html, layout.html, o la plantilla de encabezado de tu CMS)
• Find the <head> tagEncuentra la etiqueta <head>
• Paste the snippet just before </head>Pega el fragmento justo antes de </head>
• Save and deployGuarda y despliega

If you use Google Tag Manager (GTM) to manage scripts on your site, you can add the RELO pixel as a custom HTML tag.Si usas Google Tag Manager (GTM) para gestionar scripts en tu sitio, puedes agregar el pixel de RELO como un tag HTML personalizado.

1. Open Google Tag Manager
   Go to tagmanager.google.com and open your container.
2. Create a new Tag
   Click Tags → New. Name it "RELO Tracking Pixel".
3. Choose tag type: Custom HTML
   Paste the following code:

   Custom HTMLCopy
   <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>

4. Set the trigger
   Click Triggering and select "All Pages".
5. Save and Publish
   Click Save, then Submit → Publish your container.

For single-page applications, you need to call relo('page') on every route change since the browser does not do a full page reload.Para aplicaciones de una sola pagina, necesitas llamar relo('page') en cada cambio de ruta ya que el navegador no hace una recarga completa de pagina.

Step 1: Add the pixel script to your HTML shell

In index.html (React) or _document.tsx (Next.js), add the pixel in the <head>:

HTMLCopy
<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>

Step 2: Track page views on route changes

React Router v6Copy
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>;
}

Next.js App RouterCopy
// 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>
  );
}

Next.js Pages RouterCopy
// 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} />;
}

1. Open your Shopify Admin
   Go to Online Store → Themes.
2. Edit the theme code
   Click Actions → Edit code (or the three dots menu → "Edit code").
3. Find theme.liquid
   In the left sidebar under "Layout", click theme.liquid.
4. Paste the pixel snippet
   Find the </head> tag in the file. Paste the RELO pixel code just before it:

   LiquidCopy
   <!-- 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>

5. Save
   Click the Save button in the top right corner. The pixel is now live.

Custom Events (Optional — Phase 2)Eventos Personalizados (Opcional — Fase 2)

After installing the basic pixel, you can optionally send custom events to track specific user actions. This unlocks conversion funnels, product analytics, and richer partner performance data. Despues de instalar el pixel basico, puedes opcionalmente enviar eventos personalizados para rastrear acciones especificas del usuario. Esto desbloquea embudos de conversion, analitica de productos y datos de rendimiento de partners mas detallados.

Purchase EventEvento de Compra

Fire this on your order confirmation / thank-you page:Dispara esto en tu pagina de confirmacion de orden / pagina de agradecimiento:

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

View ProductVer Producto

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

Add to CartAgregar al Carrito

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

Begin CheckoutIniciar Checkout

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

Custom Event (Generic)Evento Personalizado (Generico)

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

VerificationVerificacion

Follow these steps to confirm the pixel is installed correctly:Sigue estos pasos para confirmar que el pixel esta instalado correctamente:

1. Open your website in a browser
   Navigate to any page where you installed the pixel.
2. Open DevTools
   Right-click anywhere on the page → Inspect (or press F12).
3. Check the Console tab
   Type relo and press Enter. You should see a function, not undefined.
4. Check the Network tab
   In the Network tab, type relo in the filter box. You should see:
   • A request to p.relo.mx/r.js (the pixel script loading)
   • A request to p.relo.mx/e (the page view event being sent)
   Both should show a 200 or 204 status.
5. Check the cookie
   Go to the Application tab (Chrome) or Storage tab (Firefox). Under Cookies, find your domain. You should see a cookie named _relo_cid with a value like 01HX....

You do not need to build any attribution logic. Here is what happens behind the scenes, so you understand how partners get credit for sales: No necesitas construir ninguna logica de atribucion. Aqui te explicamos lo que sucede detras de escenas, para que entiendas como los partners reciben credito por las ventas:

Key detailsDetalles importantes

• Attribution window: 30 days. If a customer clicks a partner's link and purchases within 30 days, the partner gets credit.Ventana de atribucion: 30 dias. Si un cliente hace clic en el enlace de un partner y compra dentro de 30 dias, el partner recibe el credito.
• Last-click attribution: If a customer clicks links from multiple partners, the most recent click before purchase wins.Atribucion de ultimo clic: Si un cliente hace clic en enlaces de multiples partners, el clic mas reciente antes de la compra gana.
• Cookie-based matching: The primary method. The _relo_cid cookie links the click to the purchase.Coincidencia basada en cookies: El metodo principal. La cookie _relo_cid vincula el clic con la compra.
• Email-based matching: For Stripe purchases, the customer's email is also used for identity resolution, providing a backup when cookies are unavailable.Coincidencia basada en email: Para compras de Stripe, el email del cliente tambien se usa para resolucion de identidad, proporcionando un respaldo cuando las cookies no estan disponibles.
• Automatic commission: Commission rates are configured in the RELO Dashboard. You do not need to calculate or send commission amounts.Comision automatica: Las tasas de comision se configuran en el Dashboard de RELO. No necesitas calcular ni enviar montos de comision.

What partners need to doQue necesitan hacer los partners

Nothing on your side. Partners generate their own tracking links from the RELO Partner Portal. They use these links in their campaigns. You do not need to create links, manage partner accounts, or handle any tracking logic. Nada de tu lado. Los partners generan sus propios enlaces de seguimiento desde el Portal de Partners de RELO. Usan estos enlaces en sus campanas. No necesitas crear enlaces, gestionar cuentas de partners ni manejar ninguna logica de seguimiento.

Frequently Asked QuestionsPreguntas Frecuentes

Integration ChecklistLista de Verificacion de Integracion

Track your progress. Your state is saved locally so you can come back anytime.Rastrea tu progreso. Tu estado se guarda localmente para que puedas volver cuando quieras.

Need Help?Necesitas Ayuda?