Custom events et goals tracking Umami : tutoriel pratique 2026

📍 Article principal du cluster : Umami Analytics 2026 : guide complet.

Sans events configurés, Umami compte juste pages vues. Pour mesurer conversions réelles (signup, purchase, Wave checkout), configurer custom events est essentiel. Ce tutoriel détaille l’implémentation pour e-commerce ouest-africain.

Prérequis

• Umami avec snippet installé (voir tutoriel snippet).
• Site avec actions à tracker.
• Niveau attendu : intermédiaire.
• Temps estimé : 1 heure.

API umami.track()

Event simple

umami.track('Newsletter Signup');

Event avec properties

umami.track('Purchase', {
  amount: 12500,
  currency: 'XOF',
  payment_method: 'wave',
  products_count: 3
});

Event avec custom name + custom data

umami.track(props => ({
  ...props,
  name: 'Custom Event',
  url: '/special-page',
  data: { campaign: 'tabaski-2026' }
}));

Tracking via attributs HTML data

Auto-tracking sans JS via data-umami-event :

<button data-umami-event="Click CTA Hero"
        data-umami-event-cta-position="hero"
        data-umami-event-cta-label="Commencer">
  Commencer
</button>

Au clic, Umami enregistre event « Click CTA Hero » avec props cta-position et cta-label.

Cas pratiques e-commerce ouest-africain

Newsletter signup (Brevo, Mailchimp)

document.querySelector('#newsletter-form').addEventListener('submit', () => {
  umami.track('Newsletter Signup', {
    source: 'footer'
  });
});

Add to cart WooCommerce

jQuery('.add_to_cart_button').on('click', function() {
  const product = jQuery(this).data('product_id');
  const price = jQuery(this).closest('.product').find('.price').text();
  umami.track('Add to Cart', {
    product_id: product,
    price: parseFloat(price)
  });
});

Payment method selection

document.querySelectorAll('input[name="payment_method"]').forEach(input => {
  input.addEventListener('change', e => {
    umami.track('Payment Method Selected', {
      provider: e.target.value  // wave, orange_money, card
    });
  });
});

Purchase confirmation page

// thank-you.php WooCommerce
<?php
$order = wc_get_order(get_query_var('order-received'));
$amount = $order->get_total();
$payment = $order->get_payment_method();
$is_new = $order->get_user_id() ? 'false' : 'true';
?>
<script>
umami.track('Purchase', {
  amount: <?php echo $amount; ?>,
  currency: 'XOF',
  payment_method: '<?php echo $payment; ?>',
  new_customer: <?php echo $is_new; ?>
});
</script>

Click WhatsApp Business contact

<a href="https://wa.me/221700000000"
   data-umami-event="Click WhatsApp"
   data-umami-event-source="header">
  Contacter sur WhatsApp
</a>

Video play tracking

document.querySelector('video').addEventListener('play', () => {
  umami.track('Video Play', { video_id: 'product-demo' });
});

Visualisation côté Umami

Events tab

Dashboard → site → Events tab. Liste tous les events, comptages, sources, dates.

Filtrer par property

Cliquer sur event → propriétés s’affichent. Filtrer par payment_method=wave par exemple.

Real-time events

Dashboard → Real-time → events s’incrémentent en direct.

Goals (revenue tracking)

Pour chaque purchase event, Umami agrège le total revenue par période. Filtrable par source, country, device.

Funnels manuels

Umami n’a pas de funnels natifs. Workaround : créer dashboard custom :

1. Filtrer events « Add to Cart » sur 30 jours = 1 200.
2. « Begin Checkout » = 800 (drop 33%).
3. « Payment Method Selected » = 650 (drop 19%).
4. « Purchase » = 420 (drop 35%).

Conversion globale Add-to-Cart → Purchase = 35%.

Erreurs fréquentes

Adaptation au contexte ouest-africain

Quatre précisions. Multi-currency : tracker par order la currency exacte. Dashboard filtre par currency permet ROI par marché. Mobile money tracking : Wave et Orange Money critiques. Funnel par provider révèle goulots. WhatsApp clicks : 60% du trafic conversion en Afrique passe par WhatsApp Business. Tracker chaque clic = mesure ROI canal. Tabaski/Ramadan campaigns : UTM source spécifique = comparable vs périodes normales.

Tutoriels frères

• Déployer Umami
• Umami vs Plausible

FAQ

Limite events ? Pas de limite hard. 1M events/mois confortable sur CX22.

Properties type ? String, number, boolean. Object nested non recommandé.

Filter events par date ? Oui via Dashboard date picker.

Export CSV events ? Oui via API ou Dashboard export.

Plausible compatible ? Non, APIs différentes. Wrapper script possible si nécessaire.

Pour aller plus loin

• 🔝 Retour au pilier : Guide complet Umami 2026
• Documentation Events : umami.is/docs/track-events