Événements & goals

Un événement custom est un signal nommé envoyé par votre site (inscription, achat, clic sur un CTA…). Un goal est la définition, côté dashboard, d’une conversion à compter — soit sur un événement, soit sur un pattern de page.

Envoyer des événements

Deux moyens, combinables. Les contraintes exactes (nom, props, tailles) sont dans la référence du tracker.

En JavaScript — window.elvn(name, props?)

// inscription réussie, avec le plan choisi
window.elvn("signup", { plan: "pro" });

// envoi du formulaire de contact
window.elvn("contact-submit");

// ajout au panier, avec montant
window.elvn("add-to-cart", { sku: "TSHIRT-M", price: 29.9, currency: "EUR" });

Rappels essentiels :

• nom en minuscules a-z0-9_-, 64 caractères max (signup, checkout-done…) ;
• props plates et scalaires uniquement (chaîne ≤ 500 car., nombre fini, booléen) ;
• jamais de donnée personnelle dans les props (email, nom, id client…) — condition de l’exemption CNIL ;
• noms réservés interdits : pageview, engage, outbound, download.

Si l’appel peut survenir avant le chargement de t.js (ex. tout en haut de page), ajoutez le stub de file d’attente décrit dans la référence du tracker.

En HTML — data-elvn-event

Pour un clic, aucun JavaScript nécessaire :

<button data-elvn-event="cta-hero">Essayer gratuitement</button>

<a href="/tarifs" data-elvn-event="nav-pricing">Tarifs</a>

La délégation de clic remonte à l’ancêtre le plus proche portant l’attribut : un clic sur un <svg> à l’intérieur du bouton compte quand même.

Exemples concrets d’instrumentation

Formulaire (après succès seulement)

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const res = await fetch("/api/contact", { method: "POST", body: new FormData(form) });
  if (res.ok) window.elvn("contact-submit");
});

Inscription / paiement (page de confirmation)

Le plus fiable est souvent un goal pageview sur la page de confirmation (/merci, /checkout/success) : aucun code à écrire. Sinon, émettez l’événement sur la page de confirmation :

// sur /checkout/success uniquement
window.elvn("purchase", { total: 49.0, items: 3 });

Lecteur vidéo, scroll, feature use

video.addEventListener("play", () => window.elvn("video-play", { id: "demo" }), { once: true });

L’option { once: true } évite de compter chaque pause/reprise comme une conversion.

Liens sortants et téléchargements

Rien à faire : les événements outbound et download sont automatiques (désactivables avec data-outbound="off").

Créer un goal dans le dashboard

Dans /:site/settings, section goals. Deux types :

• Pageview pattern : un path exact (/merci) ou avec wildcard (/blog/*). Aucun code côté site.
• Custom event : le nom exact de l’événement (signup, contact-submit…), avec un filtre de prop optionnel (ex. plan=pro).

À savoir :

• Créer un goal sur un site avec de l’historique backfille immédiatement les 30 derniers jours : la GoalsCard se remplit sans attendre.
• Limite : 20 goals par site (garde-fou de cardinalité).
• Les conversions apparaissent sur la GoalsCard du dashboard (conversions, taux, delta) et se croisent avec UTM source, referrer et page d’entrée.
• Les goals de type « event » peuvent aussi déclencher des alertes webhook (type goal).

Vérifier

1. Déclenchez l’action sur le site (depuis le domaine réel — voir les cas où le tracker se tait).
2. L’événement apparaît dans Realtime avec son nom.
3. Si un goal matche, la GoalsCard s’incrémente (agrégation continue).

Un événement au nom invalide (majuscules, espace, accent…) est abandonné en silence côté client : en cas de doute, vérifiez le POST /api/e dans l’onglet Network et le champ e du payload.