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

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

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

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

Чтобы отображать рекламу In-Stream, мы используем Fluid Player, бесплатный HTML5-плеер с открытым исходным кодом, совместимый с форматами VAST и VPAID.

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

ПРИМЕР 1 — Блокировка типов рекламы In-Stream на основе параметра 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) | block-ad-types</title>

    <!-- Импорт Fluid Player -->
    <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

    <!-- Инициализация экземпляра Fluid Player -->
    <script>
      console.log("инициализация Fluid")
      var player = fluidPlayer("example-player");
    </script>

  </head>

  <body>
    <h1>block-ad-types для рекламы In Stream (video) с использованием параметров URL</h1>

    <!-- Обычный <video> плеер -->
    <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"
        />
        Ваш браузер не поддерживает тег video.
      </video>
    </div>

    <!-- Скрипт, который задаёт конфигурацию Fluid Player -->
    <script>
      
      // Функция для получения значения user_verified из параметра URL
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );

      // Определение заблокированных типов рекламы на основе параметров URL
      let dynamicVastTag =
        "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101"; // блокировать NSFW-рекламу
      if (userVerified === "1") {
        dynamicVastTag = "https://s.magsrv.com/v1/vast.php?idzone=5532704";  // если пользователь подтверждён, показывать всю рекламу
      }

      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 — Блокировка типов рекламы In Stream на основе данных локального хранилища

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

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

• 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) | block-ad-types</title>

    <!-- Импорт Fluid Player  -->
    <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

    <script>
      // Динамически создаёт элемент <video> и помещает его внутрь div с заданным параметром ID
      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("Ваш браузер не поддерживает тег video.");

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

    <script>
      // Определяет конфигурацию Fluid Player, включая динамические VAST-теги, которые задают, какую рекламу блокировать или показывать в зависимости от согласия пользователя
      let fluidPlayerConfig = (acceptTerms) => {
        return {
          layoutControls: {
            primaryColor: "#FF0000",
            timelinePreview: {
              file: "thumbnails.vtt",
              type: "VTT",
            },
            controlForwardBackward: {
              show: true,
              doubleTapMobile: false,
            },
          },
          vastOptions: {
            adList: [
              {
                roll: "preRoll",
                vastTag: acceptTerms // Согласие пользователя
                  ? "https://s.magsrv.com/v1/vast.php?idzone=5532704" // Показать всю рекламу
                  : "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101", // Блокировать NSFW-рекламу
                timer: 5,
              },
            ],
          },
        };
      };
    </script>

    <!-- Это скрипт, который связывает логику видеоплеера и Fluid Player и отображает контент в интерфейсе -->
    <script>
      let player;

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

  <body>
    <h1>block-ad-types для рекламы In Stream (video) с использованием локального хранилища</h1>

    <button
      id="accept-terms-button"
      onclick="
      localStorage.setItem('userConsent', JSON.stringify(true));
      insertFluidPlayer(true);
      this.remove();
      "
    >
      Принять условия
    </button>

    <!-- Контейнер, к которому будет подключён видеоплеер -->
    <!-- Должен быть определён до инициализации Fluid Player -->
    <div id="video-wrapper"></div>

    <!-- Этот скрипт проверяет согласие пользователя в локальном хранилище и инициализирует плеер соответствующим образом -->
    <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>