Intégration avec Angular

L'intégration d'Angular n'est pas très différente de l'intégration Pure JavaScript. Il vous suffit d'ajouter le script Metricalp à votre fichier index.html. Ensuite, Metricalp sera automatiquement intégré à votre application Angular et commencera à suivre les événements de vue d'écran. Bien que nous n'ayons pas encore de bibliothèque officielle Angular (prévue pour l'avenir), vous n'en avez même pas besoin. Avec ces étapes simples, vous intégrerez toujours la version la plus récente et stable de Metricalp, et elle sera sûre pour le type. Dans cette documentation, nous apprendrons également comment déclencher des événements personnalisés. Avec cette méthode, vous pouvez également désactiver la capture automatique des itinéraires et déclencher manuellement des événements de vue d'écran. Pour plus de détails, consultez Événements personnalisés & Props

Ajouter le script Metricalp :

Supposons que vous ayez démarré un nouveau projet Angular avec ng cli comme `ng new my-app`. Ensuite, dans votre fichier index.html (src/index.html), ajoutez le script Metricalp comme décrit dans Pure JavaScript Embed

<script src="https://cdn.metricalp.com/event/metricalp.js" data-allow-localhost="true" data-tid="YOUR_TID" defer></script>

- N'oubliez pas de remplacer YOUR_TID par votre numéro de tid, également connu sous le nom d'ID de suivi, comme décrit dans Embed Share Tracker

Nous avons ajouté allowLocalhost car Metricalp ne fonctionne pas par défaut en localhost pour protéger les limites de votre quota. Nous avons permis le localhost à des fins de test. Vous souhaiterez peut-être le supprimer après l'avoir testé une fois pour économiser votre quota. Pour plus d'informations détaillées, consultez allow localhost & exclude me docs.

Voilà, vous avez intégré votre application Angular avec Metricalp, hourra! 🚀

Par défaut, Metricalp commence automatiquement à collecter les événements de vue d'écran et les changements d'itinéraires (cela peut être désactivé avec l'option data-disable-auto-route-catch, veuillez consulter API reference pour les détails et toutes les autres personnalisations).

Déclencher des événements personnalisés en toute sécurité :

Créons un nouveau fichier metricalp-tracker.ts à la racine de l'application (src/app/metricalp-tracker.ts)

        type MetricalpEvent = {
          type: string;
          [key: string]: string | number | boolean | undefined;
        };
        
        declare global {
          interface Window {
            metricalp?: { event: (ev: MetricalpEvent) => void };
          }
        }
        
        export enum MetricalpEventTypes {
          ScreenView = 'screen_view',
          ClickSave = 'click_save',
        }
        
        export function metricalpEvent(event: MetricalpEvent) {
          if (typeof window === 'undefined' || !window['metricalp']?.event) {
            return;
          }
          window.metricalp?.event(event);
        }
        

Nous pouvons maintenant utiliser la fonction metricalpEvent pour déclencher des événements personnalisés. Importons-le et utilisons-le dans notre application. Par exemple (src/app/app.component.ts) et déclenchez un événement personnalisé lorsque l'utilisateur clique sur le bouton de sauvegarde.

        import { Component } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { RouterOutlet } from '@angular/router';
        import { MetricalpEventTypes, metricalpEvent } from './metricalp-tracker';
        
        @Component({
          selector: 'app-root',
          standalone: true,
          imports: [CommonModule, RouterOutlet],
          templateUrl: './app.component.html',
          styleUrl: './app.component.css',
        })
        export class AppComponent {
          title = 'ng-metricalp-example';
        
          handleClick() {
            metricalpEvent({ type: MetricalpEventTypes.ClickSave });
          }
        }
        

Modifiez le fichier src/app/app.component.html et ajoutez un bouton pour le tester.

      <main class="main">
        <button (click)="handleClick()">Enregistrer</button>
      </main>
      
      <router-outlet></router-outlet>
      
        

C'est tout, vous pouvez maintenant déclencher des événements personnalisés en toute sécurité car nous utilisons des types d'événements comme Enums. Vous pouvez également désactiver la capture automatique des itinéraires et déclencher manuellement un événement de vue d'écran avec MetricalpEventTypes.ScreenViewcomme défini ci-dessus. De plus, vous pouvez joindre des données supplémentaires à l'événement sous forme de props personnalisés. Pour plus de détails, consultez Événements personnalisés & Props

Consultez également la documentation complète de l'API pour personnaliser le script comme vous le souhaitez : API reference