Événements personnalisés bien faits : 8 choses à mesurer dans votre app (avec code)

Les pages vues vous disent qui est venu. Les événements personnalisés vous disent ce qu'ils ont fait. C'est la partie de l'analytique qui change vraiment les décisions — et celle que presque personne ne configure. Voici huit événements à mesurer, la ligne qui déclenche chacun, et la règle de nommage qui vous sauvera dans un an.

Pourquoi les événements comptent plus que les pages vues

Une page vue est un signal grossier : quelqu'un a atterri sur une URL. Elle ne dit pas s'il a cliqué sur le CTA, choisi un plan, terminé le formulaire ou est parti en silence. Presque tout ce que vous voulez optimiser — conversion, activation, abandon — vit entre les pages vues, pas dessus.

Les événements personnalisés comblent ce vide. Une ligne de JavaScript se déclenche quand quelque chose d'important se passe. L'événement est anonyme (pas de PII, pas de cookies), agrégé côté serveur, et visible dans votre dashboard à côté du trafic.

L'API d'événements de Logly en une ligne

Une fois p.js installé sur votre site, le tracker expose une seule fonction :

window.logly('event', 'signup_completed');

C'est toute l'API. Pas de SDK, pas d'étape d'init, pas d'objet payload. Vous envoyez le nom quand la chose arrive ; le Worker agrège par nom et vous montre les compteurs dans le dashboard. Les noms sont plafonnés à 100 caractères et doivent être en snake_case minuscules — j'y reviens plus bas.

Huit événements à mesurer (avec code)

1. Clic sur le CTA de la landing

Avant même l'inscription, vous voulez savoir si le CTA principal fait son travail. Deux événements, un par CTA, vous donne le click-through par section.

document.querySelector('.btn-hero').addEventListener('click', function () {
  window.logly('event', 'cta_hero_click');
});

Si vous avez un second CTA plus bas (prix, footer), donnez-lui un nom distinct (cta_pricing_click). Ne les mélangez pas — l'intérêt est de comparer.

2. Signup commencé vs signup terminé

La paire d'événements la plus utile dans n'importe quel SaaS. Le ratio entre eux est le taux d'abandon de votre entonnoir d'inscription.

// quand le formulaire est ouvert / focusé
window.logly('event', 'signup_started');

// après que l'API confirme la création du compte
window.logly('event', 'signup_completed');

Un ratio sain dépasse rarement 60%. Si le vôtre est à 15%, le goulet d'étranglement c'est le formulaire, pas le trafic.

3. Sélection de plan (un événement par plan)

Ne déclenchez pas un seul plan_selected avec le nom du plan dans un payload — ces données n'apparaîtront pas dans un outil privacy-first. Utilisez un événement par plan.

// page de prix
on('click', '.plan-starter', () => window.logly('event', 'plan_selected_starter'));
on('click', '.plan-pro',     () => window.logly('event', 'plan_selected_pro'));
on('click', '.plan-business',() => window.logly('event', 'plan_selected_business'));

Vous les verrez classés dans le dashboard. Que le plan le moins cher gagne par 10×, ce n'est pas un problème ; que le plus cher reçoive zéro clic, en général si.

4. Inscription à la newsletter

L'astuce ici est de déclencher l'événement après que la soumission réussit, pas à l'ouverture de la modale. La plupart des "inscriptions newsletter" rapportées par les outils sont des gens qui ont ouvert la modale et n'ont jamais tapé d'email.

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const ok = await subscribe(form.email.value);
  if (ok) window.logly('event', 'newsletter_subscribed');
});

5. Clic sur lien sortant

Vous n'obtenez généralement pas de page vue pour un clic qui quitte le site. Déclenchez un événement avant que la navigation ait lieu.

document.querySelectorAll('a[href^="http"]').forEach((a) => {
  if (a.host !== location.host) {
    a.addEventListener('click', () => {
      window.logly('event', 'outbound_' + a.host.replace(/\W/g, '_'));
    });
  }
});

Le nom de l'événement inclut le host de destination, donc outbound_github_com et outbound_docs_example_com apparaissent séparément. Utile pour mesurer le trafic vers les docs, sous-domaines d'app, ou sites partenaires.

6. Téléchargement de lead magnet / PDF

Un téléchargement de PDF depuis un CDN ne génère pas de page vue sur votre domaine. Sans événement, ce trafic est invisible.

document.querySelector('a[href$=".pdf"]').addEventListener('click', () => {
  window.logly('event', 'download_pricing_pdf');
});

7. Profondeur de scroll sur du contenu long

Sur un article de 4 000 mots, "quelqu'un est-il arrivé jusqu'à la fin ?" est un signal d'engagement plus honnête que le temps passé. Un événement à 75% de scroll, déclenché une fois par session, suffit.

let fired = false;
window.addEventListener('scroll', () => {
  if (fired) return;
  const pct = (window.scrollY + innerHeight) / document.body.scrollHeight;
  if (pct >= 0.75) {
    window.logly('event', 'article_read_75');
    fired = true;
  }
}, { passive: true });

8. Exposition à une variante A/B

Si vous testez deux versions d'un hero, déclenchez un événement au moment où la variante est rendue. Chaque variante est un nom d'événement distinct. Le décompte dans le dashboard de hero_variant_a vs hero_variant_b est votre contrôle de taille d'échantillon ; coupler chacun avec son événement de conversion (par ex. signup_completed) est le test.

const variant = Math.random() < 0.5 ? 'a' : 'b';
renderHero(variant);
window.logly('event', 'hero_variant_' + variant);

Convention de nommage : la règle qui paye dans six mois

Les noms d'événements sont la seule chose que vous verrez dans le dashboard. Donnez-leur dix secondes ; vous gagnerez une heure plus tard.

• minuscules, snake_case — signup_completed, pas SignupCompleted ni signup-completed.
• objet_verbe ou verbe_objet, choisissez-en un — choisissez un côté et tenez-vous-y. Mélanger signup_completed avec completed_signup signifie que vous devrez toujours vous rappeler lequel vous avez utilisé.
• Préfixe par surface — cta_hero_click, cta_pricing_click, cta_footer_click. Le préfixe les regroupe naturellement dans une liste alphabétique.
• Jamais de PII ni d'IDs dans le nom — pas d'emails, pas d'IDs utilisateur, pas de numéros de commande. Le dashboard affiche le nom tel quel.

Trois erreurs qui gâchent les données

Déclencher au survol ou à l'ouverture de modale. Vous gonflerez les compteurs avec des gens qui n'ont jamais converti. Déclenchez sur l'état de succès, pas la tentative.

Un événement générique pour tout. Un seul button_click sans détail ne dit rien. Tout l'intérêt d'un événement personnalisé est d'être spécifique.

Oublier de retirer les événements de test avant le lancement. Cinq entrées test_event resteront en haut de votre dashboard pendant des mois. Mettez un guard ou retirez-les avant déploiement.

Cookbook : patterns de déclencheurs

L'appel window.logly('event', name) est toujours une ligne. Ce qui varie, c'est le déclencheur — le JavaScript qui décide quand l'appeler. Ces cinq patterns couvrent ~95% des cas réels. Commencez par le plus simple qui répond à votre question.

1. Clic — le défaut (1 ligne)

Le cas le plus courant. Si vous avez déjà le handler de clic, une ligne suffit.

btn.addEventListener('click', () => window.logly('event', 'cta_hero_click'));

2. Submit de formulaire réussi — déclencher après le succès, pas à la tentative

Le piège : déclencher sur submit directement compte chaque tentative, y compris celles qui échouent à la validation. Attendez l'état de succès.

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const ok = await submitForm(form);
  if (ok) window.logly('event', 'signup_completed');
});

3. Élément entré dans la vue — une fois par session

Le bon pattern pour "quelqu'un a-t-il atteint la section prix ?" ou "quelqu'un a vu le bloc de témoignages ?". Combiné à un événement de clic sur la même surface, le ratio click / view est le vrai taux de conversion de cette section — bien plus actionnable que les clics bruts.

const section = document.getElementById('pricing');
let fired = false;
const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting && !fired) {
      fired = true;
      window.logly('event', 'pricing_section_seen');
      io.disconnect();
    }
  });
}, { threshold: 0.5 });
io.observe(section);

Quand l'utiliser. Sections sous la ligne de flottaison où la question est "quel % de visiteurs arrive jusqu'ici ?". Pour des éléments au-dessus de la ligne de flottaison comme le CTA du hero, cet événement est redondant — tous ceux qui chargent la page le voient.

4. Profondeur de scroll — engagement sur contenu long

Pour les articles, docs ou landings longues. Déclenche une fois quand l'utilisateur atteint 75% de la hauteur de page. Combiné avec article_started, taux de complétion.

let fired = false;
window.addEventListener('scroll', () => {
  if (fired) return;
  const pct = (window.scrollY + innerHeight) / document.body.scrollHeight;
  if (pct >= 0.75) {
    window.logly('event', 'article_read_75');
    fired = true;
  }
}, { passive: true });

5. Temps de séjour — vu ET resté

Un événement "view-in" se déclenche dès qu'un pixel est visible. Parfois vous voulez plus strict : "vu pendant au moins 5 secondes". Utile pour les emplacements pubs, expériences de bannière, ou hero sections où un scroll rapide ne compte pas comme une vraie exposition.

const banner = document.querySelector('.enterprise-banner');
let timer = null, fired = false;
const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting && !fired) {
      timer = setTimeout(() => {
        fired = true;
        window.logly('event', 'banner_dwelled_5s');
      }, 5000);
    } else if (timer) {
      clearTimeout(timer); timer = null;
    }
  });
}, { threshold: 0.5 });
io.observe(banner);

Une règle au-dessus des autres. Commencez par le pattern de clic. N'escaladez vers view-in ou dwell que quand la question à laquelle vous voulez répondre a besoin d'un dénominateur (taux) ou d'un filtre de qualité (exposition réelle, pas scroll-rapide). Mettre view-in partout gonfle le log d'événements et dilue le signal.

Où les événements vous mènent ensuite

Les événements seuls vous donnent des compteurs. Mis en séquence — landing → clic CTA → signup commencé → signup terminé — ils deviennent un entonnoir, et vous arrêtez de deviner où les gens partent. C'est la pièce suivante du puzzle.