Pixel para storefronts custom

Si tu storefront es headless y vive fuera de Wafle (Astro, Next.js, Remix, Solid Start, o un sitio que ya tenías), igual podés tener el Pixel de Wafle funcionando. Pegás un <script> en el head y listo.

¿Cuándo usás esto?

Cuando vendés con Wafle como backend (catálogo, órdenes, pagos) pero tu UI vive en otro dominio que vos manejás. Si usás el storefront managed de Wafle, el Pixel ya está inyectado — esta doc no es para vos.

El snippet

Pegá esto antes de </head> en todas tus páginas:

htmlhtml

<script>
  (function(w,d,s,t,k){w.wafle=w.wafle||function(){(w.wafle.q=w.wafle.q||[]).push(arguments)};
  var f=d.createElement(s);f.async=1;f.src='https://cdn.wafle.click/p.js';
  var n=d.getElementsByTagName(s)[0];n.parentNode.insertBefore(f,n);
  w.wafle('init',{tenant:t,publicKey:k});})(window,document,'script',
    'tu-slug',                     /* tu tenant */
    'wpub_••••••••••••••••');     /* public key (no key secreta) */
</script>

Public key, no API key

El Pixel usa una public key (wpub_ + 24 chars), distinta de la API key secreta (wpk_). Una public key:

Solo puede mandar eventos de Pixel (write-only, append).
No puede leer órdenes, customers, ni nada sensible.
Es safe pegarla en el HTML público.
Está bindeada a una lista de origins permitidos (tutienda.com, www.tutienda.com…). Si la usan desde otro origin, los requests se rechazan.

Generala en /admin/stores/<slug>/integrations → Pixel keys.

Eventos del lado client

Una vez cargado, window.wafle es la API:

jsjavascript

// Page view se trackea solo en cada cambio de URL
// (incluye SPA con History API).

// Producto visitado
wafle('track', 'view_item', {
  product_id: 'prod_123',
  sku: 'TEE-OVS-BLK-M',
  price: 18900,
  currency: 'ARS',
});

// Carrito
wafle('track', 'add_to_cart', {
  sku: 'TEE-OVS-BLK-M',
  qty: 1,
  price: 18900,
});

// Checkout
wafle('track', 'begin_checkout', {
  cart_total: 37800,
  items_count: 2,
});

// Compra (mejor server-side, ver abajo)
wafle('track', 'purchase', {
  order_id: 'ord_8842',
  total: 37800,
  currency: 'ARS',
  items: [
    { sku: 'TEE-OVS-BLK-M', qty: 2, price: 18900 },
  ],
});

// Identificar al visitante
wafle('identify', {
  email: '[email protected]',
  phone: '+5491155...',
});

Eventos server-side (recomendado para purchase)

Los purchase y refund conviene mandarlos desde el backend con la API key secreta — sobreviven a ad-blockers y son más confiables para Meta/Google CAPI. Lo hacés desde tu webhook de pago:

tsts

// Endpoint que recibe webhook de Mercado Pago
import { Wafle } from '@wafle/sdk';
const w = new Wafle({ apiKey: process.env.WAFLE_KEY!, tenant: 'gamerland' });

export async function POST(req: Request) {
  const payment = await req.json();
  if (payment.status === 'approved') {
    await w.pixel.track('purchase', {
      user_email: payment.payer.email,
      order_id: payment.external_reference,
      total: payment.transaction_amount * 100, // centavos
      currency: 'ARS',
      items: payment.additional_info.items,
    });
  }
  return new Response('ok');
}

Snippets por framework

Next.js (App Router)

app/layout.tsxtsx

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script id="wafle-pixel" strategy="afterInteractive">{`
          (function(w,d,s,t,k){w.wafle=w.wafle||function(){(w.wafle.q=w.wafle.q||[]).push(arguments)};
          var f=d.createElement(s);f.async=1;f.src='https://cdn.wafle.click/p.js';
          var n=d.getElementsByTagName(s)[0];n.parentNode.insertBefore(f,n);
          w.wafle('init',{tenant:'tu-slug', publicKey:'wpub_••••'});})(window,document,'script');
        `}</Script>
      </body>
    </html>
  );
}

Astro

src/layouts/Base.astroastro

<head>
  <script is:inline>
    (function(w,d,s,t,k){w.wafle=w.wafle||function(){(w.wafle.q=w.wafle.q||[]).push(arguments)};
    var f=d.createElement(s);f.async=1;f.src='https://cdn.wafle.click/p.js';
    var n=d.getElementsByTagName(s)[0];n.parentNode.insertBefore(f,n);
    w.wafle('init',{tenant:'tu-slug', publicKey:'wpub_••••'});})(window,document,'script');
  </script>
</head>

Shopify (Theme.liquid)

Sí, también podés meter el Pixel en una tienda Shopify y mandar la data al Wafle Network (útil si estás considerando migrar y querés ir poblando audiencias antes). Andá a theme.liquid → <head> y pegá el snippet.

El Pixel respeta el banner de cookies si tenés uno. Si el visitante NO consintió, mandamos eventos sin identifiers (anonymous ID + sin email/phone hash). Si consintió, mandamos todo. Si querés forzar el modo, llamá: