Comment bloquer dynamiquement les types de publicités à l'aide de data-block-ad-types

En tant qu’éditeur, vous pouvez vouloir contrôler quels types de publicités sont affichés à vos visiteurs en fonction de conditions spécifiques telles que l’authentification de l’utilisateur, ses préférences ou d’autres facteurs. Dans cet article, nous présentons deux extraits de code montrant comment gérer dynamiquement les types de publicités affichés ou bloqués dans votre zone publicitaire ExoClick.

Pour rendre cela possible, nous tirons parti de la data-block-ad-types fonctionnalité d’ExoClick, et nous lui donnons un contrôle dynamique sur plusieurs emplacements publicitaires sans nécessiter d’intégrations backend complexes.

EXEMPLE 1 - Afficher dynamiquement des publicités en fonction de la saisie de l’utilisateur

Cette méthode est idéale pour ajuster les restrictions publicitaires en fonction du consentement de l’utilisateur. Lorsqu’un visiteur accepte vos conditions, sa préférence est enregistrée dans le localStoragede son navigateur. Cette action modifie définitivement les paramètres publicitaires pour cet utilisateur lors de toutes ses visites ultérieures, ce qui vous permet d’afficher un éventail plus large de types de publicités une fois le consentement donné.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script>
      const adZoneConfigs = [
        { containerId: "zid-5662140", class: "eas6a97888e20", zoneid: "5662140" },
        { containerId: "zid-5532602", class: "eas6a97888e2", zoneid: "5532602" },
      ];

      //  MODIFIER LES TYPES DE PUBLICITÉS BLOQUÉS EN FONCTION D’UNE VALEUR BOOLEAN ET RECHARGER LES PUBLICITÉS
      let updateAdRestrictions = (value) => {
        if (value === true) {
          adZoneConfigs.forEach((adZone) => {
            let adContainer = document.getElementById(adZone.containerId);
            adContainer.innerHTML = "";
            adContainer.innerHTML = `
            <ins class="${adZone.class}" data-zoneid="${adZone.zoneid}" data-block-ad-types=""></ins>

            `;
            (AdProvider = window.AdProvider || []).push({ serve: {} });
          });
        }
        return;
      };
    </script>
  </head>
  <body>
    <h1>PAGE DE TEST</h1>

    <!-- ACCEPTER LES CONDITIONS ET AJOUTER LE CONSENTEMENT AU STOCKAGE LOCAL AU CLIC -->
    <button
      id="accept-terms-button"
      onclick="updateAdRestrictions(true); localStorage.setItem('acceptTerms', true); this.remove();"
    >
      J’accepte les termes et conditions
    </button>

    <main>
      <script
        async
        type="application/javascript"
        src="https://a.magsrv.com/ad-provider.js"
      </script>

      <h2>zid-5662140</h2>
      <div id="zid-5662140">
        <ins
          class="eas6a97888e20"
          data-zoneid="5662140"
          data-block-ad-types="101"
        </ins>

        <script>
          (AdProvider = window.AdProvider || []).push({ serve: {} });
        </script>
      </div>

      <h2>zid-5532602</h2>
      <div id="zid-5532602">
        <ins
          class="eas6a97888e2"
          data-zoneid="5532602"
          data-block-ad-types="101"
        </ins>
        <script>
          (AdProvider = window.AdProvider || []).push({ serve: {} });
        </script>
      </div>
    </main>

    <!-- VÉRIFIER LE STOCKAGE LOCAL POUR LE COOKIE VÉRIFIÉ ET APPELER updateAdRestrictions SI L’UTILISATEUR EST DÉJÀ VÉRIFIÉ -->
    <!-- DOIT ÊTRE PLACÉ APRÈS LES SCRIPTS DES ZONES PUBLICITAIRES -->
    <script>
      const cookie = localStorage.getItem("acceptTerms");
      const parsedCookie = JSON.parse(cookie)
      if (parsedCookie === true) {
        updateAdRestrictions(true);
        document.getElementById("accept-terms-button").remove();
      }
    </script>
  </body>
</html>

EXEMPLE 2 - Afficher dynamiquement des publicités en fonction d’un paramètre d’URL

Cette approche est efficace pour modifier les paramètres publicitaires en fonction d’un paramètre d’URL. Par exemple, après qu’un utilisateur s’est authentifié, il peut être redirigé vers une URL contenant un paramètre tel que ?user_verified=1. Ce paramètre indique à la page que l’utilisateur est vérifié, ce qui incite le système à afficher des types de publicités moins restrictifs pour cette session.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page de test</title>
  </head>

  <body>
    <header>
      <ins
        class="eas6a97888e20"
        data-zoneid="5662140"
        data-block-ad-types="101"
      </ins>

      <script
        async
        type="application/javascript"
        src="https://a.magsrv.com/ad-provider.js"
      </script>

      <script>
        (AdProvider = window.AdProvider || []).push({ serve: {} });
      </script>
    </header>

    <footer id="footer-ads">
      <script
        async
        type="application/javascript"
        src="https://a.magsrv.com/ad-provider.js"
      </script>

      <ins
        class="eas6a97888e2"
        data-zoneid="5532602"
        data-block-ad-types="101"
      </ins>

      <script>
        (AdProvider = window.AdProvider || []).push({ serve: {} });
      </script>
    </footer>

    <script>
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );
      const headerElement = document.querySelector('[data-zoneid="5662140"]');
      const footerElement = document.querySelector('[data-zoneid="5532602"]');
      const elementsArr = [headerElement, footerElement];
      if (userVerified == 1) {
        elementsArr.forEach((element) => {
          element.setAttribute("data-block-ad-types", "");
          const newElement = element.cloneNode(true);
          element.parentNode.replaceChild(newElement, element);
        });
      }
    </script>
  </body>
</html>

PrécédentSlider vidéo - comment configurer une zone publicitaire Slider vidéo SuivantComment bloquer dynamiquement les types de publicités pour les zones In-Stream (vidéo) d'ExoClick

Mis à jour il y a 15 jours

Ce contenu vous a-t-il été utile ?