tdnTrack

Paquete: @tiendana/ngx-core/tracking

Directiva de atributo ([tdnTrack], clase TdnTrackDirective) que registra un evento de analítica cuando el usuario hace clic en el elemento anfitrión. El evento se envía con TrackingService.track.

Características

✅ Nombre de evento automático - Se deduce de la etiqueta del elemento
✅ Metadatos tipados - module y feature son obligatorios
✅ Propiedades libres - Cualquier otra clave se añade al payload del evento
✅ Sin código en el componente - Solo un binding en la plantilla

Uso Básico

import { TdnTrackDirective } from '@tiendana/ngx-core/tracking';

@Component({
  imports: [TdnTrackDirective],
  template: `
    <button type="button" [tdnTrack]="{ module: 'Catalog', feature: 'Products.Export', format: 'excel' }">
      Exportar
    </button>

    <button type="submit" [tdnTrack]="{ module: 'Orders', feature: 'Form' }">Guardar</button>

    <div [tdnTrack]="{ module: 'Dashboard', feature: 'Feed' }" tdnTrackEvent="PageScrolled"></div>
  `,
})
export class ExampleComponent {}

Nombre del Evento

Si no se indica tdnTrackEvent, el nombre se calcula una sola vez al construir la directiva según el elemento anfitrión:

Elemento	Evento
<button type="submit">	SubmittedForm
<button> (sin type)	SubmittedForm
<button type="button">	ClickedButton
<a>	ClickedLink
Cualquier otro	ClickedElement

nota

Un <button> sin atributo type es de tipo submit por defecto. Usa type="button" en los botones que no envían un formulario.

La detección usa la propiedad type del botón al construirse. Si el botón cambia de tipo después, el nombre no se recalcula: usa tdnTrackEvent para fijarlo.

API

Inputs

Input	Tipo	Requerido	Descripción
tdnTrack	TdnTrackProps	Sí	Metadatos del evento. Debe incluir module y feature
tdnTrackEvent	string	No	Nombre del evento. Por defecto se deduce de la etiqueta

Tipo TdnTrackProps

export type TdnTrackProps = {
    /** Sección principal de la app (p. ej. 'Dashboard', 'Catalog', 'Orders'). */
    module: string;
    /** Funcionalidad dentro del módulo (p. ej. 'Products.Export'). */
    feature: string;
    /** Propiedades adicionales del evento. */
    [key: string]: any;
};

Buenas Prácticas

• Usa nombres de module y feature estables y en inglés (Catalog, Products.Export): son las dimensiones con las que se segmenta en el panel de analítica.
• Mantén las propiedades extra planas y con nombres en snake_case (order_id, kpi_type).
• Para eventos que no nacen de un clic, llama a TrackingService.track directamente.