Tracking des événements

Intégrez les événements Ad Sentinelle avec vos outils d'analytics.

Événements disponibles

Le SDK Ad Sentinelle émet des événements JavaScript que vous pouvez écouter :

Événement	Déclencheur	Données
adwall:init	SDK initialisé	sessionId, variant
adwall:detected	Adblock détecté	blockerType, device
adwall:displayed	Wall affiché	variant, mode
adwall:help_opened	Aide ouverte	-
adwall:cta_clicked	Clic sur CTA	-
adwall:verification_start	Début vérification	-
adwall:verification_success	Vérification OK	-
adwall:verification_failed	Vérification échouée	-
adwall:converted	Conversion confirmée	variant, timestamp
adwall:closed	Wall fermé (Soft)	reason
adwall:error	Erreur survenue	error

Écouter les événements

Syntaxe de base

window.addEventListener('adwall:converted', function(event) {
  console.log('Conversion !', event.detail);
});

Avec async/await

function waitForEvent(eventName) {
  return new Promise(resolve => {
    window.addEventListener(eventName, resolve, { once: true });
  });
}

// Utilisation
const conversionEvent = await waitForEvent('adwall:converted');
console.log('Utilisateur converti:', conversionEvent.detail);

Intégration Google Analytics 4

Avec gtag.js

// Détecter adblock
window.addEventListener('adwall:detected', function(e) {
  gtag('event', 'adblock_detected', {
    event_category: 'Ad Sentinelle',
    event_label: e.detail.blockerType || 'unknown',
    device_type: e.detail.deviceType
  });
});

// Wall affiché
window.addEventListener('adwall:displayed', function(e) {
  gtag('event', 'adwall_displayed', {
    event_category: 'Ad Sentinelle',
    event_label: e.detail.variant
  });
});

// Conversion
window.addEventListener('adwall:converted', function(e) {
  gtag('event', 'adwall_conversion', {
    event_category: 'Ad Sentinelle',
    event_label: e.detail.variant,
    value: 1
  });
});

Avec Google Tag Manager

Créez un trigger personnalisé dans GTM :

1. Triggers → New → Custom Event
2. Event name : adwall:converted
3. Créez une balise GA4 associée

// Pousser vers dataLayer
window.addEventListener('adwall:converted', function(e) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'adwall_conversion',
    adwall_variant: e.detail.variant,
    adwall_session_id: e.detail.sessionId
  });
});

Intégration Matomo / Piwik

window.addEventListener('adwall:detected', function(e) {
  _paq.push(['trackEvent', 'Ad Sentinelle', 'Detected', e.detail.blockerType]);
});

window.addEventListener('adwall:converted', function(e) {
  _paq.push(['trackEvent', 'Ad Sentinelle', 'Converted', e.detail.variant]);
  _paq.push(['trackGoal', 1]); // ID de votre objectif
});

Intégration Plausible

window.addEventListener('adwall:converted', function(e) {
  plausible('Ad Sentinelle Conversion', {
    props: {
      variant: e.detail.variant
    }
  });
});

Intégration Mixpanel

window.addEventListener('adwall:detected', function(e) {
  mixpanel.track('Ad Sentinelle Detected', {
    blocker_type: e.detail.blockerType,
    device: e.detail.deviceType
  });
});

window.addEventListener('adwall:converted', function(e) {
  mixpanel.track('Ad Sentinelle Conversion', {
    variant: e.detail.variant
  });
  
  // Définir une propriété utilisateur
  mixpanel.people.set({
    'adwall_converted': true,
    'adwall_conversion_date': new Date().toISOString()
  });
});

Intégration Amplitude

window.addEventListener('adwall:converted', function(e) {
  amplitude.track('Ad Sentinelle Conversion', {
    variant: e.detail.variant,
    session_id: e.detail.sessionId
  });
  
  // User property
  amplitude.identify(new amplitude.Identify().set('is_converted', true));
});

Données de l'événement

Structure de event.detail

interface Ad SentinelleEventDetail {
  // Disponible sur tous les événements
  sessionId: string;
  timestamp: number;
  
  // adwall:detected
  blockerType?: 'ublock' | 'adblock' | 'adguard' | 'brave' | 'unknown';
  deviceType?: 'desktop' | 'mobile' | 'tablet';
  
  // adwall:displayed, adwall:converted
  variant?: 'control' | 'emotional' | 'alternative';
  mode?: 'hard' | 'soft' | 'banner';
  
  // adwall:closed
  reason?: 'button' | 'overlay' | 'escape';
  
  // adwall:error
  error?: string;
}

Exemple d'accès aux données

window.addEventListener('adwall:converted', function(e) {
  const { sessionId, variant, timestamp } = e.detail;
  
  console.log(`Session ${sessionId} convertie`);
  console.log(`Variante gagnante : ${variant}`);
  console.log(`Timestamp : ${new Date(timestamp).toISOString()}`);
});

Webhook serveur

Envoyez les événements vers votre propre backend :

window.addEventListener('adwall:converted', function(e) {
  fetch('/api/adwall/conversion', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      sessionId: e.detail.sessionId,
      variant: e.detail.variant,
      timestamp: Date.now(),
      url: window.location.href,
      userAgent: navigator.userAgent
    })
  });
});

Script complet

Voici un script complet pour tracker tous les événements :

(function() {
  const EVENTS = [
    'adwall:init',
    'adwall:detected',
    'adwall:displayed',
    'adwall:help_opened',
    'adwall:cta_clicked',
    'adwall:verification_start',
    'adwall:verification_success',
    'adwall:verification_failed',
    'adwall:converted',
    'adwall:closed',
    'adwall:error'
  ];
  
  EVENTS.forEach(eventName => {
    window.addEventListener(eventName, function(e) {
      // Log en console (dev)
      console.log(`[Ad Sentinelle] ${eventName}`, e.detail);
      
      // Google Analytics
      if (typeof gtag !== 'undefined') {
        gtag('event', eventName.replace('adwall:', 'adwall_'), {
          event_category: 'Ad Sentinelle',
          ...e.detail
        });
      }
      
      // DataLayer (GTM)
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: eventName,
        ...e.detail
      });
    });
  });
})();

Debugging

Mode debug

Activez le debug pour voir tous les événements :

window.ADWALL_CONFIG = { debug: true };

Console dédiée

// Afficher tous les événements Ad Sentinelle
const originalDispatchEvent = window.dispatchEvent;
window.dispatchEvent = function(event) {
  if (event.type.startsWith('adwall:')) {
    console.log(`%c[Ad Sentinelle Event] ${event.type}`, 'color: #8b5cf6', event.detail);
  }
  return originalDispatchEvent.apply(this, arguments);
};

Conseil

Testez votre intégration analytics en mode debug avant de déployer en production.