Événements personnalisés

Suivez les événements personnalisés et les interactions utilisateur pour comprendre comment les visiteurs interagissent avec votre site web.

Aperçu

Les événements personnalisés vous permettent de suivre les actions utilisateur spécifiques qui importent pour votre entreprise :

• Clics sur boutons
• Soumissions de formulaires
• Lectures vidéo
• Téléchargements de fichiers
• Clics sur liens externes
• Profondeur de défilement
• Temps passé sur la page

Suivi d'événements de base

Utilisez la fonction track() pour envoyer des événements personnalisés :

// Suivre un événement simple
zenovay('track', 'button_click');

// Suivre un événement avec des propriétés
zenovay('track', 'video_play', {
video_id: 'intro-video',
video_title: 'Getting Started with Zenovay',
video_duration: 120
});

Propriétés d'événement

Incluez un contexte supplémentaire avec vos événements en utilisant des propriétés :

zenovay('track', 'purchase', {
product_id: 'pro-plan',
product_name: 'Pro Plan',
price: 29.99,
currency: 'USD',
category: 'subscription'
});

Modèles d'événements courants

Soumissions de formulaires

document.getElementById('contact-form').addEventListener('submit', function(e) {
zenovay('track', 'form_submit', {
  form_name: 'contact_form',
  form_type: 'lead_generation'
});
});

Téléchargements de fichiers

document.querySelectorAll('a[href$=".pdf"]').forEach(link => {
link.addEventListener('click', function(e) {
  zenovay('track', 'file_download', {
    file_name: this.href.split('/').pop(),
    file_type: 'pdf',
    file_url: this.href
  });
});
});

Interactions vidéo

const video = document.querySelector('video');

video.addEventListener('play', () => {
zenovay('track', 'video_play', {
  video_title: video.title,
  video_duration: video.duration
});
});

video.addEventListener('ended', () => {
zenovay('track', 'video_complete', {
  video_title: video.title,
  watch_time: video.currentTime
});
});

Intégration React

Pour les applications React, utilisez l'objet global zenovay du script de suivi :

function ProductCard({ product }) {
const handleAddToCart = () => {
  // Utilisez l'objet global zenovay du script de suivi
  zenovay('track', 'add_to_cart', {
    product_id: product.id,
    product_name: product.name,
    price: product.price
  });
};

return (
  <button onClick={handleAddToCart}>
    Add to Cart
  </button>
);
}

Conventions de nommage des événements

Suivez ces conventions pour un suivi d'événements cohérent :

Noms d'événements recommandés

Directives de propriétés

• Conservez les noms de propriétés descriptifs et cohérents
• Utilisez snake_case pour les noms de propriétés
• Incluez un contexte pertinent (identifiants, noms, catégories)
• Évitez les informations personnellement identifiables (PII)

Affichage des événements personnalisés

Les événements personnalisés apparaissent dans votre tableau de bord de domaine. Ouvrez Domains, cliquez sur votre site, puis utilisez l'onglet pertinent :

• Onglet Analytics — consultez les décomptes d'événements aux côtés des pages vues et autres métriques comportementales
• Onglet Revenue — créez des entonnoirs de conversion et suivez les compléments d'objectifs à partir d'événements personnalisés

Débogage d'événements

Utilisez la console du navigateur pour déboguer le suivi d'événements :

// Activer le mode débogage
zenovay('debug');

// Suivre un événement (sera enregistré dans la console)
zenovay('track', 'test_event', { debug: true });