📊Analytics

Track your audience engagement and gain insights into how citizens interact with your website.

Message from the @gouvfr/dsfr team:

La propriété de configuration enableRating, présente depuis la @gouvfr/dsfr:1.9.2, entraîne des envois de données très importants. Pour rappel, le modèle de facturation dépend du volume d'appels envoyés à Eulerian. Elle est retirée dans cette version @gouvfr/dsfr:1.10.2 (bundled with @codegouvfr/react-dsfr:0.78.2). En remplacement, un attribut data-fr-analytics-rating peut être ajouté sur un élément dont on veut mesurer spécifiquement le taux de click. Il est important de s'assurer de la pertinence de chaque élément où cette fonctionnalité est activée afin d'optimiser l'envoi de données.

In the realm of analytics, the Service d'Information du Gouvernement (SIG) stipulates the utilization of Eulerian. The vanilla JS/CSS module @gouvfr/dsfr, which powers this toolkit, is deeply integrated with the Eulerian platform.

Activating it equips you with the capabilities to accurately track user interactions with your application, including specific buttons they click and pages they navigate. To comply with GDPR regulations, it's crucial to request user consent before implementing this detailed level of tracking.

Presented here is an illustrative example demonstrating how to initialize the Eulerian integration and solicit user consent for its usage.

https://github.com/garronej/react-dsfr-next-appdir-demo/blob/main/ui/consentManagement.tsx

Example Enabling Eulerian in Next.js App Router

You may refer to the documentation of the consentManagement utility via the following link:

react-dsfr components

To operate effectively, Eulerian requires certain parameters, which are provided upon initial registration on the Eulerian platform. This example includes only those. For a complete list and descriptions of accepted parameters, refer to the following link:

https://github.com/codegouvfr/react-dsfr/blob/c3b7459732ac909530d998b0c233b366c958d0a1/src/eulerianAnalytics.ts#L3-L71

Type definition of the Eulerian params

In-depth documentation elaborating on all these parameters can be found here:

https://github.com/GouvernementFR/dsfr/tree/main/src/analytics/doc/analytics

Documentation of the Eulerian integration into @gouvfr/dsfr

For efficient tracking of interactions with various website elements, it's essential that each DSFR component is assigned a unique ID. This allows you to distinguish between different elements via the Eulerian dashboard metrics.

Each component of the react-dsfr toolkit can be explicitly given an ID prop. In the event you don't assign one, react-dsfr will make an effort to generate comprehensible IDs that aid in component identification.