Skip to main content

Comment bloquer dynamiquement des types de publicités en utilisant data-blocked-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-blocked-type d'ExoClick, et nous lui donnons un contrôle dynamique sur plusieurs spots publicitaires sans nécessiter d'intégrations backend complexes.

EXEMPLE 1 - Affichage dynamique des publicités en fonction des données fournies par l'utilisateur​

This method is ideal for adjusting ad restrictions based on user consent. When a visitor agrees to your terms, their preference is stored in their browser's localStorage. This action permanently modifies the ad settings for that user on all subsequent visits, allowing you to serve a broader range of ad types once consent is given.


<!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​

This approach is effective for altering ad settings based on a URL parameter. For instance, after a user authenticates, they can be redirected to a URL containing a parameter such as ?user_verified=1. This parameter signals to the page that the user is verified, prompting the system to display less restrictive ad types for that 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>