Configurer des événements

Les événements vous permettent de mesurer les interactions des utilisateurs sur votre site Web ou dans votre application. Par exemple, vous pouvez mesurer le chargement d'une page, les clics sur un lien et les achats. Google Analytics utilise les données des événements pour créer des rapports contenant des informations sur votre entreprise. En savoir plus

Types d'événement

Les événements Google Analytics sont regroupés en quatre catégories :

Type d'événement Lien Configuration requise ? Description et cas d'utilisation
Collectés automatiquement En savoir plus Non Collectés par défaut lorsque vous configurez la balise Google Analytics sur votre site ou dans votre application. Exemples : first_visit, session_start et user_engagement.
Mesures améliorées En savoir plus Non (en général) Collectés automatiquement lorsque les mesures améliorées sont activées dans l'interface utilisateur de Google Analytics. Mesurent les interactions Web courantes telles que scroll, click et file_download.
Recommandés Documentation de référence sur les événements recommandés Oui Événements standardisés pour différents secteurs d'activité (par exemple, vente au détail, voyages, jeux) qui débloquent des panneaux de rapports prédéfinis. Exemples : purchase, login, sign_up.
Personnalisés En savoir plus Oui Événements que vous définissez vous-même, car aucun événement automatique, amélioré ou recommandé prérempli ne répond à vos besoins. Accessibles à l'aide de rapports personnalisés.

Ce guide vous explique comment configurer des événements recommandés et des événements personnalisés sur votre site Web à l'aide de la balise Google (gtag.js) ou de Google Tag Manager. Vous n'avez pas pas besoin de configurer les événements collectés automatiquement ni les événements liés aux mesures améliorées.

Audience

Vous avez configuré Google Analytics et vous commencez à voir des données dans vos rapports, mais vous souhaitez collecter plus d'informations que celles collectées automatiquement par Analytics, ou vous voulez débloquer certaines fonctionnalités dans Analytics.


Avant de commencer

Ce guide part du principe que vous avez effectué les opérations suivantes :

Il part également du principe que vous disposez des éléments suivants :

  • Vous avez accès au code source de votre site Web.
  • Le rôle Éditeur (ou supérieur) dans le compte Google Analytics

Présentation de la balise Google (gtag.js)

Utilisez l'API de la balise Google (gtag.js) pour envoyer des événements à Google Analytics. L'API comporte une fonction appelée gtag(). Chaque fois que vous souhaitez envoyer un événement à Google Analytics, vous utilisez la syntaxe suivante :

gtag('event', '<event_name>', {
  <event_parameters>
});

Dans cet exemple, la fonction gtag() inclut les éléments suivants :

  • Une commande event qui indique à Google que vous envoyez un événement
  • Le nom de l'événement recommandé ou personnalisé
  • (Facultatif) Une collection de paramètres qui fournissent des informations supplémentaires sur l'événement

Voici un exemple d'événement recommandé appelé screen_view avec deux paramètres :

gtag('event', 'screen_view', {
  'app_name': 'myAppName',
  'screen_name': 'Home'
});

Ajouter des événements à votre code JavaScript

gtag() est une fonction JavaScript. Vous devez donc l'ajouter au code JavaScript de votre page Web. Par exemple, vous pouvez ajouter la fonction dans vos <script> balises ou dans un fichier JavaScript distinct que vous importez dans votre page HTML.

Vous pouvez ajouter des événements à votre code JavaScript n'importe où en dessous de l'extrait de la balise Google. Google ne traitera pas les données des événements que vous placez au-dessus de l'extrait de la balise Google. Par exemple, l'exemple de code suivant inclut un événement recommandé appelé screen_view et un événement personnalisé appelé signup_newsletter dans une <script> balise :

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXXXXX');
    </script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the page</title>
</head>
<body>
    <p>Welcome to my website!</p>
    
    <script>
      /**
      *   The following events are sent when the page loads. You send
      *   recommended and custom events the same way. You could wrap
      *   the events in JavaScript functions so they are sent when
      *   users perform specific actions.
      */
      gtag('event', 'screen_view', {
        'app_name': 'myAppName',
        'screen_name': 'Home'
      });
      gtag('event', 'signup_newsletter', {
        'method': 'web'
      });
    </script> 
</body>
</html>

Si vous souhaitez envoyer l'événement en fonction d'un clic sur un bouton (ou d'une autre action de l'utilisateur), vous pouvez ajouter du code JavaScript supplémentaire à votre événement.

Configurer plusieurs événements

Le suivi de diverses interactions des utilisateurs implique l'implémentation de plusieurs gtag('event', ...) appels dans le code JavaScript de votre site Web, chacun étant déclenché par une action ou une condition spécifique. Les exemples utilisent à la fois des événements recommandés et des événements personnalisés.

Par exemple, pour suivre différentes activités telles que les connexions des utilisateurs, le partage de contenu et la fin des tutoriels, implémentez des appels gtag('event', ...) distincts :

Exemple : Suivre les connexions

Cet extrait serait inclus dans la fonction JavaScript qui gère les connexions réussies des utilisateurs.

// Send a 'login' event when a user signs in
gtag('event', 'login', {
  method: 'Email' // Example parameter indicating login method
});

Exemple : Suivre les partages de contenu

Cet extrait serait lié à l'événement de clic d'un bouton de partage.

// Send a 'share' event when a user clicks a share button
gtag('event', 'share', {
  method: 'Facebook',
  content_type: 'Article',
  item_id: 'C12345' // Example parameter for the shared item
});

Exemple : Suivre un événement personnalisé

Cet extrait serait appelé lorsqu'un utilisateur termine un tutoriel sur le site.

// Send a custom event
gtag('event', 'tutorial_complete', {
  tutorial_name: 'Introduction to GA4'
});

Vous intégrez ces gtag('event', ...) appels à différents endroits du code de votre site Web pour capturer les données au bon moment. Chaque événement est envoyé à Google Analytics au fur et à mesure qu'il se produit. Il n'existe pas de syntaxe spéciale ni d'appel unique pour définir ou envoyer plusieurs types différents d'événements par lot avec gtag.js. Vous appelez gtag('event', ...) pour chaque événement que vous souhaitez envoyer.

Afficher vos événements dans Analytics

Vous pouvez afficher vos événements et leurs paramètres à l'aide des rapports Temps réel et DebugView. Notez que le rapport DebugView nécessite une configuration supplémentaire pour que vous puissiez l'utiliser. Ces deux rapports indiquent les événements déclenchés par les utilisateurs sur votre site Web à mesure qu'ils sont déclenchés.

Étapes suivantes

Précédent
Web
Suivant
Ajouter des paramètres