Comment tracker un formulaire Brevo avec Google Tag Manager

Brevo (ex-Sendinblue) est partout sur les sites FR — et rarement tracké proprement. Le point critique : Brevo ne pousse pas d’event natif type wpcf7mailsent ou hs-form-event. Sur un embed HTML (#sib-form), la soumission est en AJAX via sibforms.com, puis le panneau #success-message s’affiche. C’est ce moment qu’il faut transformer en dataLayer.push.

Méthode générale : tracker un formulaire avec GTM.

1. Quel type de formulaire Brevo avez-vous ?

• Embed HTML (recommandé pour le tracking) : formulaire id="sib-form" + script main.js — vous contrôlez la page.

• Iframe : GTM parent ne voit pas le submit (same-origin). Préférez l’embed HTML, une thank-you sur votre domaine, ou un webhook.

• Landing Brevo hébergée : redirect thank-you ou webhook.

2. Le script qui déclenche la conversion (embed HTML)

Placez ce script après le HTML du formulaire Brevo (ou en Custom HTML GTM sur les pages qui portent le form), une seule fois :

<script>
(function () {
  var success = document.getElementById('success-message');
  var form = document.getElementById('sib-form');
  if (!success) return;

  var fired = false;

  function pushLead() {
    if (fired) return;
    // Le panneau succès Brevo reçoit la classe --active après un envoi OK
    var active = success.classList.contains('sib-form-message-panel--active');
    var visible = success.offsetParent !== null || success.getClientRects().length > 0;
    if (!active && !visible) return;

    fired = true;
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'generate_lead',
      form_name: 'brevo',
      form_id: (form && (form.getAttribute('data-form-id') || form.id)) || 'sib-form',
      lead_type: 'newsletter',
      form_tool: 'brevo'
    });
  }

  // 1) MutationObserver : réagit dès que Brevo active #success-message
  var obs = new MutationObserver(pushLead);
  obs.observe(success, { attributes: true, attributeFilter: ['class', 'style'] });

  // 2) Filet de sécurité si la classe est déjà présente (retour arrière, cache)
  pushLead();
})();
</script>

Pourquoi ce script et pas le trigger Form Submission GTM ? Parce que Brevo fait preventDefault + AJAX : le submit natif ne remonte souvent pas jusqu’à GTM comme une vraie navigation.

3. Brancher GTM

1. Trigger Custom Event : nom d’event generate_lead (filtre optionnel form_tool equals brevo).

2. Tag GA4 Event generate_lead (+ params form_name, form_id).

3. Tag Google Ads Conversion lead / Meta Pixel Lead, sous Consent Mode.

4. Alternative sans script : Element Visibility

Si vous ne pouvez pas poser de JS custom, créez un trigger GTM Element Visibility :

• Méthode : CSS Selector

• Selector : #success-message.sib-form-message-panel--active (ou .sib-form-message-panel--active)

• Once per page

• Minimum percent visible : 1–50 %

Puis un tag qui pousse le même event, ou directement vos tags GA4/Ads. Moins propre que le script (pas de form_id structuré), mais ça marche sur l’embed HTML.

5. Iframe, DOI, webhooks

• Iframe : pas d’accès au DOM — passez en embed HTML, thank-you URL sur votre domaine, ou webhook Brevo → Measurement Protocol / CAPI.

• Double opt-in : décidez si la conversion media part à l’inscription ou à la confirmation email ; ne mélangez pas les deux.

• Webhook : pour du tracking serveur anti-adblock une fois le client créé dans Brevo.

6. Recette

1. Inscription test sur l’embed HTML.

2. En GTM Preview : 1 seul generate_lead au moment où le message de succès apparaît.

3. Pas de rejeu au refresh.

4. Refus CMP pubs : tags Ads/Meta ne partent pas.

5. Contact bien créé dans Brevo.

Besoin d’un plan de taggage Brevo + Ads/Meta ?

Christophe Dubois

Consultant tracking & data, freelance senior depuis 2012. Architecture de mesure, server-side, attribution.