Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

How To Dynamically Block Ad Types Using data-block-ad-types

As a publisher, you may want to control which types of ads are shown to your visitors based on specific conditions like user authentication, user preference settings, or other factors. In this article, we demonstrate two code snippets of how you can dynamically manage which ad types are displayed or blocked within your ExoClick ad zone.

To make this possible, we are taking advantage of ExoClick's data-block-ad-types feature, and we’re giving it dynamic control over multiple ad spots without requiring complex backend integrations.

EXAMPLE 1 - Dynamically display ads based on user input

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>

EXAMPLE 2 - Dynamically display ads based on URL parameter

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.

PreviousVideo Slider - How to set up a video slider ad zoneNextHow to dynamically block ad types for ExoClick In-stream (video) zones

Last updated

Was this helpful?