Objectifs d'événements personnalisés

Pro Plan

Les objectifs d'événements personnalisés vous donnent un contrôle total sur ce que vous suivez. Déclenchez des événements JavaScript pour suivre n'importe quelle interaction utilisateur.

Quand utiliser les événements personnalisés

Idéal pour suivre :

Les soumissions de formulaires (AJAX)
Les interactions vidéo (lecture, fin)
La navigation dans les applications à page unique
Les ajouts au panier
L'utilisation de fonctionnalités dans les applications Web
Toute action déclenchée par JavaScript

Comment fonctionnent les événements personnalisés

Vous ajoutez du code JavaScript à votre site
Le code se déclenche quand l'action se produit
Zenovay reçoit l'événement
L'objectif est enregistré

Implémentation de base

Suivi d'un événement

// Événement simple
zenovay('goal', 'event_name');

// Événement avec valeur
zenovay('goal', 'purchase', { value: 99.99 });

// Événement avec valeur et devise
zenovay('goal', 'purchase', {
  value: 99.99,
  currency: 'USD'
});

Un appel d'objectif enregistre value et currency. Tous les autres clés que vous transmettez sont envoyés avec la charge utile d'événement sous-jacente, mais l'objectif lui-même est signalé par son nom et sa valeur.

Créer l'objectif

Ouvrez le tableau de bord de votre site Web et sélectionnez l'onglet Journeys
Ouvrez le sous-onglet Objectifs et cliquez sur Ajouter un objectif
Choisissez Événement personnalisé
Entrez le nom de l'événement (par exemple, purchase) pour qu'il corresponde au nom que vous déclenchez dans le code
Activez optionnellement le suivi de la valeur et définissez une valeur par défaut
Enregistrez

Les objectifs d'événements personnalisés se créent également automatiquement la première fois que Zenovay reçoit un nom d'événement qu'il n'a pas vu, vous pouvez donc déclencher les événements en premier et ils apparaîtront dans la liste des objectifs.

Dénomination d'événements

Meilleures pratiques

Bons noms	Mauvais noms
`signup_complete`	`goal1`
`purchase`	`click`
`video_50_percent`	`event`
`add_to_cart`	`123`

Conventions de nommage

Choisissez un modèle cohérent :

snake_case : form_submit
camelCase : formSubmit
kebab-case : form-submit

Catégories avec préfixes

Organisez les événements avec des préfixes :

// Événements e-commerce
zenovay('goal', 'ecom_add_to_cart');
zenovay('goal', 'ecom_checkout_start');
zenovay('goal', 'ecom_purchase');

// Événements d'engagement
zenovay('goal', 'engage_video_play');
zenovay('goal', 'engage_scroll_50');

Implémentations courantes

Soumission de formulaire

document.querySelector('form').addEventListener('submit', function(e) {
  zenovay('goal', 'contact_form');
});

// Ou pour les formulaires AJAX
function onFormSuccess() {
  zenovay('goal', 'contact_form');
}

Interactions vidéo

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

video.addEventListener('play', function() {
  zenovay('goal', 'video_play');
});

video.addEventListener('ended', function() {
  zenovay('goal', 'video_complete');
});

// Suivi de la progression à 50%
video.addEventListener('timeupdate', function() {
  if (video.currentTime / video.duration > 0.5) {
    zenovay('goal', 'video_50_percent');
  }
});

Actions e-commerce

// Ajouter au panier
function addToCart(product) {
  // Votre logique de panier...

  zenovay('goal', 'add_to_cart', {
    value: product.price
  });
}

// Achat terminé
function onPurchaseComplete(order) {
  zenovay('goal', 'purchase', {
    value: order.total,
    currency: 'USD'
  });
}

Inscription / Enregistrement

async function handleSignup(formData) {
  try {
    const response = await api.signup(formData);

    if (response.success) {
      zenovay('goal', 'signup_complete', {
        value: 50 // Valeur de prospect estimée
      });
    }
  } catch (error) {
    // Gérer l'erreur
  }
}

Transmission de valeurs

Valeur statique

Défini dans les paramètres de l'objectif :

Activer le suivi de la valeur
Saisir une valeur par défaut (par exemple, 50)
Chaque achèvement compte vers cette valeur

Valeur dynamique

Transmettez à partir de votre code :

// Valeur de commande
zenovay('goal', 'purchase', {
  value: orderTotal
});

// Valeur calculée
const leadValue = isPremium ? 100 : 25;
zenovay('goal', 'lead', { value: leadValue });

Valeur à partir de la page

Lire à partir du DOM :

const price = parseFloat(
  document.querySelector('.price').textContent.replace('$', '')
);
zenovay('goal', 'purchase', { value: price });

Champs de valeur d'objectif

Une réalisation d'objectif enregistre ces champs :

Propriété	Type	Exemple
value	number	`99.99`
currency	string	`"USD"`

Transmettez value comme un nombre ordinaire (sans symbole de devise ni chaîne). currency est un code de devise ISO et par défaut USD.

Intégrations de frameworks

React

import { useCallback } from 'react';

function SignupForm() {
  const handleSubmit = useCallback((data) => {
    // Logique de soumission...

    window.zenovay('goal', 'signup');
  }, []);

  return <form onSubmit={handleSubmit}>...</form>;
}

Vue

<script>
export default {
  methods: {
    handleSubmit() {
      // Logique de soumission...

      window.zenovay('goal', 'signup');
    }
  }
}
</script>

Next.js

// Suivi côté client dans un composant
'use client';

export default function CheckoutButton() {
  function handleSuccess() {
    if (typeof window !== 'undefined') {
      window.zenovay('goal', 'purchase');
    }
  }

  return <button onClick={handleSuccess}>Terminer</button>;
}

Applications à page unique (SPAs)

Suivi des changements de route

Pour les pages virtuelles :

// React Router
history.listen(() => {
  zenovay('page');
});

// Vue Router
router.afterEach(() => {
  zenovay('page');
});

// Naviguer puis suivre
router.push('/success').then(() => {
  zenovay('goal', 'signup_complete');
});

Suivi conditionnel

Suivre en fonction de conditions

// Suivre uniquement si les conditions sont remplies
if (user.isNewUser && !user.hasConvertedBefore) {
  zenovay('goal', 'first_conversion');
}

// Variante de test A/B
if (experimentVariant === 'B') {
  zenovay('goal', 'variant_b_conversion');
}

Débouncing d'événements

Prévenir les déclenchements en doublon :

let hasTracked = false;

function trackOnce(eventName) {
  if (!hasTracked) {
    zenovay('goal', eventName);
    hasTracked = true;
  }
}

Gestion des erreurs

Suivi sûr

Gérer les cas où Zenovay n'est pas chargé. L'extrait de suivi définit une petite file d'attente de commandes, donc les appels effectués avant la fin du chargement du script sont toujours traités :

function safeTrackGoal(eventName, properties) {
  if (typeof zenovay === 'function') {
    zenovay('goal', eventName, properties);
  } else {
    console.warn('Zenovay not loaded');
  }
}

Tester les événements

Mode débogage

Activer la journalisation de la console :

zenovay('debug');

// Maintenant suivre quelque chose
zenovay('goal', 'test_event');
// Vérifier la console pour la sortie

Vérifier dans le tableau de bord

Déclencher un événement de test
Ouvrir le tableau de bord de votre site Web et sélectionner l'onglet Live View pour surveiller l'activité en temps réel, ou ouvrir Journeys → Objectifs pour voir le nombre d'achèvement de l'objectif
Vérifier que l'objectif apparaît et le nombre augmente
Vérifier la valeur de l'objectif

Onglet Réseau

Ouvrez DevTools → Réseau
Déclencher l'événement
Rechercher une demande à api.zenovay.com
Vérifier la charge utile

Dépannage

Les événements ne sont pas enregistrés

Vérifier que le script est chargé :

console.log(typeof zenovay); // Devrait être 'function'

Vérifier que le nom de l'événement correspond :

Objectif : signup
Code : zenovay('goal', 'signup') ✓
Code : zenovay('goal', 'Signup') ✗

Vérifier les erreurs :

Console du navigateur pour les erreurs
Onglet Réseau pour les demandes échouées

Valeur non enregistrée

Assurer que la valeur est un nombre :

// Incorrect
zenovay('goal', 'purchase', { value: "$99.99" });

// Correct
zenovay('goal', 'purchase', { value: 99.99 });