Actions sur les composants DSFR

Les composants du DSFR envoient automatiquement des actions prédéfinies.

Le tableau, ci-dessous, regroupe les différentes actions remontées à Eulérian pour chaque composant du DSFR. Vous trouverez pour chaque composant une colonne :

Composant : Nom du composant
Element : Selecteur CSS de l'élement HTML traqué
Type : Type d'action envoyé à Eulérian
Breakpoints : Si renseigné, l'action est définie uniquement sur ces [breakpoints] de largeur de page. Si vide, sur tous les [breakpoints].
Valeur : Valeur de l'action envoyée à Eulérian
Label : Valeurs possibles du label, dans l'ordre de priorité, en fonction de leur présence

Composant	Elément	Type	Breakpoints	Valeur	Label
accordion	.fr-collapse	DISCLOSE		label²	titre de l’accordéon libellé du bouton `accordéon`
alert	.fr-alert				Titre de l’alerte `alerte`
badge	.fr-badge				Libellé du badge `badge`
breadcrumb	.fr-collapse		[MD] [LG] [XL]	label²	`fil d’ariane`
	.fr-collapse	DISCLOSE	[XS] [SM]	label²	`fil d’ariane`
	.fr-breadcrumb__link[href]	INTERNAL		href⁴	Libellé du lien `lien fil d'ariane`
button	.fr-btn	CLICK		label²	Libellé du bouton `button`
	a.fr-btn[href]	INTERNAL / EXTERNAL¹		label²	Libellé du bouton `button`
	a.fr-btn[download]	DOWNLOAD		label²	Libellé du bouton `button`
callout	.fr-callout			label²	Titre de la mise en avant `mise en avant`
card	.fr-card (sans lien)			label²	Titre de la carte heading de la carte `carte`
	.fr-card (avec lien)	INTERNAL / EXTERNAL¹		href⁴	Titre de la carte heading de la carte `carte`
	.fr-card (avec lien + attribut download)	DOWNLOAD		href⁴	Titre de la carte heading de la carte `carte`
checkbox	.fr-checkbox-group [type="checkbox"]	CHECK / UNCHECK		value³	Libellé de la case à cocher `case à cocher`
connect	.fr-connect	CLICK		label²	`FranceConnect`
	.fr-connect--plus	CLICK		label²	`FranceConnect+`
	.fr-connect + * a	CLICK		label²	Libellé du lien `Qu'est-ce que FranceConnect ?`
consent	.fr-consent-banner				`Gestionnaire de consentement`
content	.fr-content-media				`aria-label` du bloc `alt` de l'image `aria-label` de l'image `title` de la vidéo `aria-label` de la video
download	.fr-download__link [download]	DOWNLOAD		href⁴	libellé du bloc de téléchargement `téléchargement`
follow	.fr-follow__newsletter	SUBSCRIBE		label²	`lettre d'information et réseaux sociaux`
footer	.fr-footer				Pied de page
	.fr-footer__content-link, .fr-footer__bottom-link, .fr-footer__top-link, .fr-footer__partners-link	INTERNAL / EXTERNAL¹		href⁴	Libellé du lien `lien pied de page`
header	.fr-header				`En-tête`
	.fr-header__tools-links .fr-btn	INTERNAL / EXTERNAL¹	[LG] [XL]	href⁴	Libellé du bouton `button`
	.fr-header__menu-links .fr-btn	INTERNAL / EXTERNAL¹	[XS] [SM] [MD]	href⁴	Libellé du bouton `button`
	.fr-header__menu .fr-modal	DISCLOSE	[XS] [SM] [MD]	label²	`Menu`
	.fr-header__search .fr-modal	DISCLOSE	[XS] [SM] [MD]	label²	`Rechercher`
highlight	.fr-highlight				`Mise en exergue`
input	.fr-input-group				Libellé du champs de saisie `champs de saisie`
link	.fr-link	CLICK		href⁴	Libellé du lien `lien`
	.fr-link[href]	INTERNAL / EXTERNAL¹		href⁴	Libellé du lien `lien`
	.fr-link[download]	DOWNLOAD		href⁴	Libellé du lien `lien`
modal	.fr-modal	DISCLOSE		label²	titre de la modale heading de la modale libellé du bouton de la modale `modale`
navigation	.fr-nav__link	INTERNAL / EXTERNAL¹		href⁴	Libellé du lien `lien de navigation`
notice	.fr-notice				Titre du bandeau d’information importante `bandeau d’information importante`
pagination	.fr-pagination__link	INTERNAL¹		href⁴	Libellé du lien de pagination `lien pagination`
quote	.fr-quote				libellé de la citation `citation`
radio	.fr-radio-group [type="radio"]	CHECK		value³	légende du fieldset › Libellé du bouton radio sélectionné
search	.fr-search-bar .fr-btn	SEARCH		input value⁵	`barre de recherche`
select	.fr-select-group	CHANGE		option label⁶	Libellé de la liste `liste déroulante`
share	.fr-share				Libellé du titre des boutons de partage `boutons de partage`
sidemenu	.fr-sidemenu__link	INTERNAL / EXTERNAL¹		href⁴	libellé du lien `lien menu latéral`
stepper	.fr-stepper				`indicateur d'étapes`
summary	.fr-summary__link	INTERNAL¹		href⁴	libellé du lien `lien sommaire`
tab	.fr-tabs	DISCLOSE		label²	titre de l’onglet libellé du bouton `onglet`
table	.fr-table				caption du tableau ``
tag	.fr-tag				libellé du tag `tag`
	button.fr-tag	CLICK		label²	libellé du tag `tag`
	a.fr-tag[href]	INTERNAL / EXTERNAL¹		href⁴	libellé du tag `tag`
	.fr-tag--dismiss	DISMISS		label²	libellé du tag `tag`
	.fr-tag[aria-pressed]	PRESS / RELEASE		label²	libellé du tag `tag`
tile	.fr-tile (sans lien)			label²	titre de la tuile heading de la tuile `tuile`
	.fr-tile (avec lien)	INTERNAL / EXTERNAL¹		href⁴	titre de la tuile heading de la tuile `tuile`
	.fr-tile (avec lien + attribut download)	DOWNLOAD		href⁴	titre de la tuile heading de la tuile `tuile`
toggle	.fr-toggle [type="checkbox"]	CHECK / UNCHECK		value³	libellé de l'interrupteur `interrupteur`
transcription	.fr-transcription .fr-collapse	DISCLOSE		label²	titre de la transcription libellé du bouton `transcription`
translate	.fr-translate .fr-collapse	DISCLOSE		label²	titre du sélecteur de langue libellé du bouton `sélecteur de langue`
upload	.fr-upload	CHANGE		extension⁷	Libellé de l'ajout de fichier `Ajout de fichier`

¹ Type INTERNAL si lien interne (meme domaine), ou EXTERNAL si lien externe, déterminé par le href. Dans les autres cas, type CLICK

² Voir le label associé dans la colonne "label" du tableau

³ Attribut value de l'élément. A défaut de valeur, renvoi le label².

⁴ Attribut href de l'élément. Doit avoir une valeur pour être envoyé.

⁵ Valeur entrée dans le champs de saisie

⁶ label des options sélectionnées à l'événement change

⁷ extensions des fichiers ajoutés au téléversement

Information

Il reste possible d’ajouter plus d’actions à remonter, en utilisant les attributs utilitaires data-fr-analytics-{action} sur un élément HTML d’un composant (voir : Actions d’interaction hors composant ).

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github