Skip to main content

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

En tant qu'éditeur, vous pouvez souhaiter contrôler les types de publicités qui sont affichées à vos visiteurs en fonction de conditions spécifiques telles que l'authentification de l'utilisateur, les paramètres de préférence de l'utilisateur ou d'autres facteurs. Dans cet article, nous démontrons deux extraits de code qui vous permettent de gérer dynamiquement les types de publicités qui sont affichés ou bloqués dans votre zone publicitaire ExoClick.

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

EXEMPLE 1 - Affichage dynamique des publicités en fonction des données fournies par 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, ses préférences sont stockées dans le localStorage de son navigateur. Cette action modifie de façon permanente les paramètres publicitaires pour cet utilisateur lors de toutes les visites ultérieures, ce qui vous permet de diffuser un plus large éventail 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" },
      ];

    //  CHANGE BLOCKED AD TYPES BASED ON BOOLEAN VALUE AND RE RENDER THE ADS 
      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>TEST PAGE</h1>

    <!-- ACCEPT TEMRS AND ADD CONSENT TO LOCAL STORAGE ON CLICK -->
    <button
      id="accept-terms-button"
      onclick="updateAdRestrictions(true); localStorage.setItem('acceptTerms', true); this.remove();"
    >
      I accept the terms and 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>


    <!-- CHECK LOCAL STORAGE FOR VERIFIED COOKIE AND CALL updateAdRestrictions IF THE USER IS ALREADY VERIFIED -->
    <!-- MUST BE PLACED AFTER THE AD ZONES' SCRIPTS -->
    <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 - Affichage dynamique des publicités en fonction d'un paramètre URL​

Cette approche est efficace pour modifier les paramètres des publicités en fonction d'un paramètre d'URL. Par exemple, après l'authentification d'un utilisateur, celui-ci peut être redirigé vers une URL contenant un paramètre tel que ?user_verified=1. Ce paramètre signale à 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>Test Page</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>