Google Analytics Glossaire

Ajouter Google Analytics à Ember JS

Image of Iron Brands

Publié le 7 avr. 2024 et modifié le 22 avr. 2024 par Iron Brands

L'intégration de Google Analytics (GA) dans une application Svelte permet de suivre et d'analyser efficacement les interactions des utilisateurs. Svelte, étant un framework relativement récent, peut avoir moins de solutions prêtes à l'emploi pour l'intégration de GA comparé à Angular ou Vue.js, mais le processus est toujours simple.

  1. Configurer une propriété Google Analytics
  2. Installer une bibliothèque GA ou utiliser un simple script
    1. Utilisation d'un extrait JavaScript
  3. Déployer et tester
  4. Points à prendre en compte et bonnes pratiques
  5. Réflexions finales
Logo of MichelinMichelin chose Simple AnalyticsJoin them

Plongeons dans l'aventure !

Configurer une propriété Google Analytics

Tout d'abord, si vous ne l'avez pas encore fait, configurez une propriété GA. Créez une nouvelle propriété dans votre compte Google Analytics, en vous assurant qu'il s'agit d'une propriété Google Analytics 4 (GA4). Vous recevrez un "ID de mesure" (comme "G-XXXXXXXXXX").

Installer une bibliothèque GA ou utiliser un simple script

Pour Svelte, vous pouvez soit utiliser un simple extrait JavaScript, soit trouver une bibliothèque adaptée à vos besoins. L'approche JavaScript est plus directe :

Utilisation d'un extrait JavaScript

  1. Ajoutez la balise GA Script: Dans le fichier public/index.html de votre projet Svelte, ajoutez l'extrait de code de suivi GA4 fourni par Google. Il devrait ressembler à ceci :

        <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_MEASUREMENT_ID"></script> <script> window.dataLayer = window.dataLayer || [] ; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()) ; gtag('config', 'YOUR_MEASUREMENT_ID') ; </script>.
     

    Remplacez 'YOUR_MEASUREMENT_ID' par votre véritable ID de mesure.

  2. Suivi des pages vues: Svelte n'a pas de routage intégré, donc si vous utilisez un routeur (comme svelte-routing), vous devrez ajouter un suivi aux changements d'itinéraires. Cela peut être fait dans votre composant principal ou dans votre composant de mise en page.

        import { onMount } from 'svelte' ; import { page } from 'svelte-routing' ; onMount(() => { page.subscribe(($page) => { gtag('config', 'YOUR_MEASUREMENT_ID', { 'page_path' : $page.path }) ; }) ; }) ;
     

Déployer et tester

Après avoir intégré GA, déployez votre application et vérifiez que le tableau de bord GA reçoit bien les données. Google Analytics Debugger, une extension de navigateur, peut être utile pour le débogage.

Points à prendre en compte et bonnes pratiques

  • Respect de la vie privée: N'oubliez pas de vous conformer aux lois sur la protection de la vie privée telles que le GDPR et de prendre en compte le consentement de l'utilisateur pour les cookies.
  • Événements personnalisés: Pour suivre les événements personnalisés (comme les clics sur les boutons), utilisez gtag('event', 'your_event_name', { /* parameters */ }) ;.
  • Tests: Veillez à tester minutieusement la configuration du suivi, en particulier si vous disposez d'une page unique de navigation.

Réflexions finales

L'intégration de Google Analytics dans une application Svelte peut considérablement améliorer votre capacité à comprendre les interactions des utilisateurs. Cependant, il est important de se rappeler que Google Analytics peut être complexe pour de nombreuses organisations.

Chez Simple Analytics, nous proposons une solution plus directe et plus respectueuse de la vie privée, qui simplifie le processus d'analyse et respecte la vie privée des utilisateurs. Consultez notre tableau de bord analytique en direct pour vous en convaincre.

GA4 est complexe. Essayez Simple Analytics

GA4 c'est comme être dans un cockpit d'avion sans brevet de pilote

Commencer l'essai de 14 jours