amplitud-custom
v1.0.0-beta.1
Published
SDK de eventos tipo Amplitude, multiplataforma, extensible y tipado.
Readme
Clases, interfaces y servicios
La librería amplitude-custom está diseñada para facilitar el tracking de eventos en formato estándar para GTM y Amplitude.
- EventParams: Interface para definir los parámetros de cada evento (product, element, status, section, etc.).
- Gtm: Interface que representa la estructura oficial del evento para el dataLayer.
- EventTracker: Clase genérica para crear y enviar eventos en el formato correcto.
- GtmService: Servicio singleton para inicializar Google Tag Manager, gestionar el dataLayer y enviar eventos.
- gtmPush: Helper para enviar eventos al dataLayer, esperando la carga de GTM.
Todos estos elementos están exportados desde el entrypoint principal y pueden ser importados fácilmente:
Ejemplo de HTML index.html
<html lang="en">
<head>
<script
dangerouslySetInnerHTML={{
__html: `
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
`,
}}
/>
</head>
<body className="bg-slate-50/40">
{/* Google Tag Manager (noscript) */}
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
></iframe>
</noscript>
<div className="flex min-h-screen">
{/* Sidebar */}
<DocsSidebar />
{/* Page content */}
<main className="flex-1 min-w-0">
<BrandProvider>{children}</BrandProvider>
</main>
</div>
<script type="module" src="/src/index.ts"></script>
</body>
</html>import { EventTracker, gtmPush, GtmService } from 'amplitude-custom/dist';Ejemplo de uso
const GTM_ID = 'GTM-XXXXXX';
GtmService.getInstance().load(GTM_ID);
const event = EventTracker.createEvent('click', {
product: 'financing_plans',
section: 'header',
action: 'open',
});
gtmPush(event.event, {
eventName: event.eventName,
eventParams: event.eventParams,
});