DOM & Écouteurs d'événements

L'API DOM de Kixell Tag permet de mesurer des clics et d'envoyer des événements vers Google Analytics 4 directement depuis votre HTML, à l'aide de simples attributs data-, sans écrire de JavaScript ni configurer Google Tag Manager.

Mesure des clics

Pour détecter les clics sur un élément du DOM, tel qu’un bouton, un lien ou tout autre élément, vous devez ajouter les attributs suivants :

  • data-kt-dc
  • data-kt-en="super_event"

Ces deux attributs suffisent à déclencher l’événement super_event lors du clic sur l’élément. Cet événement sera automatiquement envoyé à Google Analytics 4.

Exemple :

<a data-kt-dc data-kt-en="super_event" href="#">Link</a>

Paramètres d'événements

Vous pouvez ajouter jusqu’à 5 paramètres à l’événement déclenché. Chaque paramètre doit être défini par un nom et une valeur :

  • data-kt-ep="name1" pour spécifier le nom du paramètre.
  • data-kt-ev="value1" pour définir la valeur correspondante.

Ces attributs doivent être ajoutés à l’élément DOM contenant également data-kt-dc et data-kt-en.

Exemple :

<a data-kt-dc data-kt-en="super_event" data-kt-ep="name1" data-kt-ev="value1" href="#">Link</a>

Dans cet exemple, lors du clic sur l’élément, l’événement super_event sera déclenché avec le paramètre name1 contenant la valeur value1.

Paramètres supplémentaires

Vous pouvez ajouter jusqu’à 4 paramètres supplémentaires à l’événement en utilisant les paires suivantes :

  • data-kt-ep2 et data-kt-ev2
  • data-kt-ep3 et data-kt-ev3
  • data-kt-ep4 et data-kt-ev4
  • data-kt-ep5 et data-kt-ev5

Exemple complet :

<a 
    data-kt-dc 
    data-kt-en="super_event" 
    data-kt-ep="name1" data-kt-ev="value1"
    data-kt-ep2="name2" data-kt-ev2="value2"
    data-kt-ep3="name3" data-kt-ev3="value3"
    data-kt-ep4="name4" data-kt-ev4="value4"
    data-kt-ep5="name5" data-kt-ev5="value5"
    href="#">
    Link
</a>

Dans cet exemple, lors du clic sur l’élément, l’événement super_event sera déclenché avec les paramètres suivants :

  • name1 contenant value1,
  • name2 contenant value2,
  • name3 contenant value3,
  • name4 contenant value4,
  • name5 contenant value5.