Intégration avec SvelteKit

L'intégration de SvelteKit n'est pas très différente de l'intégration avec JavaScript Pur. Vous avez juste besoin d'ajouter le script de Metricalp à votre fichier index.html. Ensuite, Metricalp sera automatiquement intégré à votre application SvelteKit et commencera à suivre les événements de vue d'écran. Bien que nous n'ayons pas encore de bibliothèque officielle pour SvelteKit (prévue pour l'avenir), vous n'en avez même pas besoin. Avec ces simples étapes, vous intégrerez toujours la version la plus récente et stable de Metricalp, et elle sera sûre de 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 routes et déclencher des événements de screen_view manuellement. Pour les détails, veuillez consulter Événements Personnalisés & Attributs.

Ajouter le script de Metricalp :

Nous supposons que vous avez lancé un nouveau projet SvelteKit avec le CLI officiel comme `npm create svelte@latest my-app`. Ensuite, à l'intérieur de votre fichier app.html (src/app.html) entre les balises "<head></head>"juste avant "%sveltekit.head%", ajoutez le script Metricalp comme décrit dans JavaScript Pur Embed

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

- Ne pas oublier de changer YOUR_TID par votre numéro tid, également connu sous le nom de Tracker ID, comme décrit dans Embed Share Tracker

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

C'est tout, vous avez intégré votre app SvelteKit avec Metricalp, hourra 🚀

Par défaut, Metricalp commence automatiquement à collecter les événements de screen_view et les changements de routes (cela peut être désactivé avec l'option data-disable-auto-route-catch, consultez API référence pour des détails et toutes les autres personnalisations).

Déclencher des événements personnalisés avec sécurité de type :

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

typescript

        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);
        }

Maintenant, nous pouvons utiliser la fonction metricalpEvent pour déclencher des événements personnalisés. Importons-la et utilisons-la dans notre app. Par exemple, dans src/routes/+page.svelte et déclenchez un événement personnalisé lorsque l'utilisateur clique sur le bouton de sauvegarde.

typescript

      <script lang="ts">
        import { MetricalpEventTypes, metricalpEvent } from '../metricalp-tracker';
      </script>
      
      <button
        on:click={() => metricalpEvent({ type: MetricalpEventTypes.ClickSave })}
      >
        Save</button
      >

Voilà, maintenant vous pouvez déclencher des événements personnalisés avec sécurité de type parce que nous avons utilisé les types d'événements comme Enums. Vous pouvez également désactiver la capture automatique des routes et déclencher un événement screen_view manuellement avec MetricalpEventTypes.ScreenView comme nous l'avons défini ci-dessus. Vous pouvez également joindre des données supplémentaires à l'événement en tant que props personnalisés, pour plus de détails, consultez Événements Personnalisés & Attributs

Consultez également la Référence Complète de l'API pour personnaliser le script comme vous le souhaitez : API référence