Перейти к основному содержанию

Как динамически блокировать типы рекламы для зон ExoClick In-stream (видео)

В этом руководстве мы покажем, как динамически блокировать Video (In-Stream) рекламные кампании на основе типа объявления.

Этот подход может быть реализован в различных сценариях, но чаще всего его применяют, когда вы, как издатель, хотите показывать определенные виды рекламы пользователям, давшим согласие, и при этом блокировать определенные кампании для тех, кто не принимает правила и условия вашего сайта.

Чтобы проиллюстрировать эту идею, мы создали два фрагмента кода, используя ванильный JS. В первом мы демонстрируем, как блокировать видеорекламу на основе параметров URL. Второй пример моделирует случай, когда согласие пользователя хранится в локальном хранилище браузера. В обоих случаях мы используем функцию Exoclick block-ad-types.

In order to display In-Stream ads, we're using Fluid Player, a free, open-source HTML5 player that is compatible with VAST and VPAID formats.

Имейте в виду, что если у вас другая настройка, вам придется адаптировать этот код под требования вашего плеера. Однако основная логика работы функции block-ad-types остается неизменной.

ПРИМЕР 1 - Блокировка типов рекламы в потоке на основе параметра URL​

Это довольно простая логика, которая не сильно отличается от базовой интеграции Fluid Player, в которой сначала загружается стандартный видеоплеер, а затем к нему подключается Fluid Player.

Основное отличие заключается в том, что перед присоединением Fluid Player к стандартному видеоплееру мы выполняем проверку параметров URL, где получаем значение для user_verified.

Определив это, мы получили оператор if, который устанавливает переменную dynamicVastTag либо для блокировки NSFW-рекламы для непроверенных пользователей, либо для разрешения всей рекламы для проверенных пользователей.

После установки этой переменной мы загружаем объект конфигурации Fluid Player, обязательно включив переменную dynamicVastTag в качестве значения для свойства vastTag.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>In Stream (video) ads | block-ad-types</title>

    <!-- Import Fluid Player -->
    <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>


    <!-- Initialize an instance of Fluid Player -->
    <script>
      console.log("initializing fluid")
      var player = fluidPlayer("example-player");
    </script>

  </head>

  <body>
    <h1>block-ad-types for In Stream (video) ads using URL params</h1>

    <!-- Regular <video> player -->
    <div class="video-wrapper">
      <video
        id="example-player"
        muted
        style="width: 50vw; height: 500px; margin: 0 auto; padding: 0"
      >
        <source
          src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>
    </div>

    <!-- Script that sets Fluid Player config -->
    <script>
      
      // Function to get user_verified value from URL parameter
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );

      // Define blocked ad types based on URL parameters
      let dynamicVastTag =
        "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101"; // block NSFW ads
      if (userVerified === "1") {
        dynamicVastTag = "https://s.magsrv.com/v1/vast.php?idzone=5532704";  // if user is verified, show all ads
      }

      var player = fluidPlayer("example-player", {
        layoutControls: {
          primaryColor: "#FF0000",
          timelinePreview: {
            file: "thumbnails.vtt",
            type: "VTT",
          },
          controlForwardBackward: {
            show: true,
            doubleTapMobile: false,
          },
        },
        vastOptions: {
          adList: [
            {
              roll: "preRoll",
              vastTag: dynamicVastTag,
              timer: 5,
            },
          ],
        },
      });
    </script>
  </body>
</html>

ПРИМЕР 2 - Блокировка типов рекламы в потоке на основе данных локального хранилища​

Эта реализация отличается от предыдущей тем, что для управления согласием пользователя вместо параметров URL используется локальное хранилище. Код модульный, с отдельными функциями для создания видеоплеера и конфигурации Fluid Player.

Раздел HTML <head> содержит три основные функции, которые контролируют подачу рекламы в зависимости от согласия пользователя:

  • insertVideoPlayer создает элемент видеоплеера и добавляет его на веб-страницу.
  • fluidPlayerConfig генерирует объект конфигурации для Fluid Player. Ключевая логика этой функции заключается в том, как она выбирает рекламный URL: если пользователь не принял условия (false), она добавляет &block_ad_types=101 к URL, чтобы заблокировать определенные объявления. Если пользователь принял условия (true), он использует стандартный URL, разрешая все объявления.
  • insertFluidPlayer связывает все воедино. Сначала он создает видеоплеер с помощью insertVideoPlayer, а затем прикрепляет к нему Fluid Player, используя специальную конфигурацию из playerConfig, которая соответствует согласию пользователя.

В разделе <body> финальный скрипт проверяет локальное хранилище на наличие согласия пользователя при загрузке страницы и соответствующим образом отображает плееры. Если согласие не было дано, но пользователь позже принимает условия, нажав на кнопку, плеер повторно инициализируется с обновленными разрешениями.


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

    <title>In Stream (video) ads | block-ad-types</title>

    <!-- Import Fluid Player  -->
    <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

    <script>
      // Dynamically creates a <video> element and places it inside the div with the given ID parameter
      const insertVideoPlayer = (containerId) => {
        const videoPlayerContainer = document.getElementById(containerId);
        videoPlayerContainer.innerHTML = "";
        let video = document.createElement("video");
        video.id = "example-player";
        video.style.width = "700px";
        video.style.height = "500px";
        video.controls = true;

        let source = document.createElement("source");
        source.src =
          "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
        source.type = "video/mp4";

        video.appendChild(source);
        video.append("Your browser does not support the video tag.");

        videoPlayerContainer.appendChild(video);
      };
    </script>

    <script>
      // Defines the Fluid Player configuration, including the dynamic VAST tags that determine which ads to block or show based on user consent
      let fluidPlayerConfig = (acceptTerms) => {
        return {
          layoutControls: {
            primaryColor: "#FF0000",
            timelinePreview: {
              file: "thumbnails.vtt",
              type: "VTT",
            },
            controlForwardBackward: {
              show: true,
              doubleTapMobile: false,
            },
          },
          vastOptions: {
            adList: [
              {
                roll: "preRoll",
                vastTag: acceptTerms // User consent
                  ? "https://s.magsrv.com/v1/vast.php?idzone=5532704" // Show all ads
                  : "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101", // Block NSFW ads
                timer: 5,
              },
            ],
          },
        };
      };
    </script>

    <!-- This is the script that binds the video player and Fluid Player logic and renders the content in the UI -->
    <script>
      let player;

      const insertFluidPlayer = (acceptTerms) => {
        insertVideoPlayer("video-wrapper");
        player = fluidPlayer("example-player", fluidPlayerConfig(acceptTerms));
      };
    </script>
  </head>

  <body>
    <h1>block-ad-types for In Stream (video) ads using local storage</h1>

    <button
      id="accept-terms-button"
      onclick="
      localStorage.setItem('userConsent', JSON.stringify(true));
      insertFluidPlayer(true);
      this.remove();
      "
    >
      Accept Terms
    </button>

    <!-- Container for the video player to attach to -->
    <!-- Must be defined before the Fluid Player initialization -->
    <div id="video-wrapper"></div>

    <!-- This script checks for the user consent in local storage and initializes the player accordingly -->
    <script>
      const userConsentCookie = localStorage.getItem("userConsent");
      const parsedCookie = JSON.parse(userConsentCookie);

      if (parsedCookie === true) {
        insertFluidPlayer(true);
        const consentButton = document.getElementById("accept-terms-button");
        if (consentButton) {
          consentButton.remove();
        }
      } else {
        insertFluidPlayer(false);
      }
    </script>
  </body>
</html>