Aller au contenu principal

Intégration HTML / Vanilla JS

Guide d'intégration pour les sites statiques ou CMS traditionnels.

Intégration de base​

Ajoutez cette ligne avant la balise </body> :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon Site</title>
</head>
<body>
  <!-- Votre contenu -->
  <header>
    <nav>...</nav>
  </header>
  
  <main>
    <article>
      <h1>Mon article</h1>
      <p>Contenu de l'article...</p>
    </article>
  </main>
  
  <footer>...</footer>

  <!-- Ad Sentinelle SDK (placer juste avant </body>) -->
  <script src="https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js" async></script>
</body>
</html>

Intégration avec configuration​

Pour une configuration avancée :

<script>
  // Configuration optionnelle
  window.ADWALL_CONFIG = {
    debug: true,  // Activer les logs (dev uniquement)
  };
</script>
<script src="https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js" async></script>

WordPress​

Option 1 : Plugin​

Utilisez un plugin comme "Insert Headers and Footers" :

  1. Installez le plugin
  2. Allez dans Paramètres → Insert Headers and Footers
  3. Collez le code Ad Sentinelle dans la section "Scripts in Footer"

Option 2 : Fichier thème​

Modifiez le fichier footer.php de votre thème :

<?php
// footer.php de votre thème WordPress
?>
    <footer>
      <!-- Votre footer -->
    </footer>

    <!-- Ad Sentinelle SDK -->
    <script src="https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js" async></script>

    <?php wp_footer(); ?>
  </body>
</html>

Option 3 : functions.php​

// functions.php
function add_adwall_script() {
  wp_enqueue_script(
    'adwall-sdk',
    'https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js',
    array(),
    null,
    true // Charger dans le footer
  );
}
add_action('wp_enqueue_scripts', 'add_adwall_script');

Shopify​

Dans Thèmes → Modifier le code → theme.liquid, ajoutez avant </body> :

<!-- Ad Sentinelle SDK -->
<script src="https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js" async></script>
</body>

Wix​

  1. Allez dans Paramètres du site → Suivi et analyse
  2. Cliquez sur + Nouvel outil → Personnalisé
  3. Collez le code Ad Sentinelle
  4. Positionnez-le en "Corps - fin"

Squarespace​

  1. Allez dans Paramètres → Avancé → Injection de code
  2. Dans la section "Pied de page", collez le code

Intégration avec Google Tag Manager​

<!-- Dans GTM, créez une balise HTML personnalisée -->
<script src="https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js" async></script>

Configuration du déclencheur : "Page View" sur toutes les pages.

Écouter les événements​

<script>
  // Attendre que le SDK soit chargé
  window.addEventListener('adwall:init', function() {
    console.log('Ad Sentinelle est prêt !');
  });
  
  // Écouter la conversion
  window.addEventListener('adwall:converted', function(e) {
    console.log('Utilisateur converti !');
    // Envoyer à votre analytics
    gtag('event', 'adwall_conversion', {
      'event_category': 'adwall',
      'event_label': 'conversion'
    });
  });
</script>
<script src="https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js" async></script>

Exclure certaines pages​

Pour désactiver Ad Sentinelle sur certaines pages :

<script>
  // Ne pas charger Ad Sentinelle sur les pages d'administration
  if (!window.location.pathname.startsWith('/admin')) {
    var script = document.createElement('script');
    script.src = 'https://adwall-backend-xxxxx.run.app/v1/loader/VOTRE_SITE_ID.js';
    script.async = true;
    document.body.appendChild(script);
  }
</script>

Vérification​

Après intégration, vérifiez dans la console du navigateur :

✅ Ad Sentinelle SDK initialized
✅ Session ID: abc123-def456-...
✅ Config loaded from server
Debug

Activez debug: true dans la configuration pour voir tous les logs du SDK.