Lo común
En una aplicación de una sola página, Albunea cuenta cada cambio de página sola (pushState, replaceState, popstate y rutas con #), sin repetir la misma dirección. Basta con poner el código de Instalación en el index.html de tu aplicación. Con renderizado en el servidor (SSR), el script solo corre en el navegador.
Revisa que el dominio de tu tienda esté en Ajustes › Dominios del panel. Albunea solo acepta datos que vienen de esos dominios; «*.tutienda.mx» incluye los subdominios.
Angular
Pega el código en src/index.html, dentro de <head>. Para mandar eventos desde tus componentes, un servicio pequeño:
// albunea.service.ts
import { Injectable, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
declare global { interface Window { albunea?: (...a: unknown[]) => void } }
@Injectable({ providedIn: 'root' })
export class AlbuneaService {
private navegador = isPlatformBrowser(inject(PLATFORM_ID));
evento(tipo: string, props: Record<string, unknown> = {}) { if (this.navegador) window.albunea?.('evento', tipo, props); }
identificar(datos: { externo: string; firma?: string; ts?: number; email?: string; nombre?: string }) {
if (this.navegador) window.albunea?.('identificar', datos);
}
}Vue y Nuxt
Vue con Vite: pega el código en index.html. vue-router se mide solo, en modo history y en modo hash. En Nuxt 3, agrégalo en nuxt.config.ts:
export default defineNuxtConfig({
app: { head: { script: [
{ innerHTML: 'window.albunea=window.albunea||function(){(albunea.q=albunea.q||[]).push(arguments)}' },
{ src: 'https://www.getalbunea.com/s.js', async: true, 'data-sitio': 'alb_pub_XXXXXXXX' },
] } },
});Cambia alb_pub_XXXXXXXX por la clave pública de tu tienda: la encuentras en el panel, en Instalación.
En los componentes, llama a window.albunea?.('evento', …) solo del lado del navegador, por ejemplo en onMounted o en un clic.
React y Next.js
React con Vite: pega el código en index.html. En Next.js (App Router), en app/layout.tsx:
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="es-MX">
<body>
{children}
<Script id="albunea-cola" strategy="beforeInteractive">
{`window.albunea=window.albunea||function(){(albunea.q=albunea.q||[]).push(arguments)}`}
</Script>
<Script src="https://www.getalbunea.com/s.js" strategy="afterInteractive" data-sitio="alb_pub_XXXXXXXX" />
</body>
</html>
);
}Cambia alb_pub_XXXXXXXX por la clave pública de tu tienda: la encuentras en el panel, en Instalación.
Para clientes verificados, crea un Route Handler (app/api/albunea-id/route.ts) que firme en el servidor y responda con Cache-Control: no-store, y llama a identificar cuando la sesión esté lista.