Intégration avec Vue.js

L'intégration de Vue.js n'est pas très différente de l'intégration de JavaScript Pur. Vous n'avez qu'à ajouter le script Metricalp à votre fichier index.html. Metricalp sera automatiquement intégré à votre application Vue.js et commencera à suivre les événements d'affichage d'écran. Bien que nous n'ayons pas encore de bibliothèque officielle pour Vue.js (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 ce sera sécurisé. Dans cette documentation, nous apprendrons également à déclencher des événements personnalisés. Avec cette méthode, vous pouvez également désactiver la capture automatique des routes et déclencher manuellement des événements de screen_view. Pour plus de détails, consultez Événements Personnalisés & Props.

Ajouter le script Metricalp :

Nous supposons que vous avez démarré un nouveau projet Vue.js avec Vite comme `yarn create vite my-vue-app --template vue-ts`. Ensuite, dans votre fichier index.html (./index.html) entre les balises <head></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>

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

Nous avons ajouté allowLocalhost parce que, par défaut, Metricalp ne fonctionne pas sur 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 sur votre quota. Pour des informations détaillées, consultez autoriser localhost & exclure moi docs.

C'est tout, vous avez intégré votre application Vue.js avec Metricalp, hourra 🚀

Par défaut, Metricalp commence automatiquement à collecter des événements de screen_view et des changements de route (peut être désactivé avec l'option data-disable-auto-route-catch, consultez référence API 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 dans le dossier src (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);
        }

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

typescript

        <script setup lang="ts">
        import { metricalpEvent, MetricalpEventTypes } from './metricalp-tracker';
        
        const handleClick = () => {
          metricalpEvent({ type: MetricalpEventTypes.ClickSave });
        };
        </script>
        
        <template>
          <button type="button" @click="handleClick()">Enregistrer</button>
        </template>

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

Consultez également la référence complète de l'API pour personnaliser le script à votre guise: référence API