> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/tutorials/ru/uchebnye-materialy/uchebnye-materialy-dlya-izdatelei/dynamically-block-ad-types-for-exoclick-in-stream-zones.md).

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

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

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

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

Чтобы отображать рекламу In-Stream, мы используем [Fluid Player](https://www.fluidplayer.com/), бесплатный 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` свойства.

```html
<!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>`, финальный скрипт проверяет локальное хранилище на наличие согласия пользователя при загрузке страницы и отображает плееры соответствующим образом. Если согласие не было дано, но пользователь позже принимает условия, нажав кнопку, плеер инициализируется заново с обновлёнными правами.

```html
<!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>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.exoclick.com/tutorials/ru/uchebnye-materialy/uchebnye-materialy-dlya-izdatelei/dynamically-block-ad-types-for-exoclick-in-stream-zones.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
