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

Como bloquear dinamicamente tipos de anúncios para zonas In-stream (vídeo) da ExoClick

Neste tutorial, vamos demonstrar como dinamicamente bloquear Vídeo (In-Stream) campanhas publicitárias com base no tipo de anúncio.

Esta abordagem pode ser implementada em vários cenários, mas uma aplicação comum é usar esta técnica quando, como editor, quiser mostrar certos tipos de anúncios a utilizadores que fornecem consentimento, enquanto bloqueia campanhas específicas para aqueles que não aceitam os termos e condições do seu site.

Para ilustrar esta ideia, criámos dois trechos de código usando JavaScript puro. No primeiro, demonstramos como bloquear anúncios em vídeo com base em parâmetros da URL. O segundo exemplo simula um caso em que o consentimento do utilizador é armazenado no armazenamento local do navegador. Em ორივos os casos, estamos a aproveitar o recurso da Exoclick block-ad-types funcionalidade.

Para exibir anúncios In-Stream, estamos a usar Fluid Playerum player HTML5 gratuito e de código aberto compatível com os formatos VAST e VPAID.

Tenha em mente que, se tiver uma configuração diferente, terá de adaptar este código para atender aos requisitos do seu player. No entanto, a lógica central da block-ad-types funcionalidade continua a mesma.

EXEMPLO 1 - Bloquear tipos de anúncios In-Stream com base no parâmetro da URL

Esta é uma lógica bastante simples que não difere muito de uma integração básica do Fluid Player, na qual primeiro é carregado um player de vídeo padrão e depois o Fluid Player é anexado a ele.

A principal diferença aqui é que, antes de anexar o Fluid Player ao player de vídeo padrão, fazemos uma verificação do parâmetro da URL, na qual recuperamos o valor de user_verified.

Com isso definido, temos uma instrução if que define a dynamicVastTag variável para bloquear anúncios NSFW para utilizadores não verificados ou permitir todos os anúncios para utilizadores verificados.

Depois de esta variável ser definida, prosseguimos para carregar o objeto de configuração do Fluid Player, garantindo que incluímos a dynamicVastTag variável como valor da vastTag propriedade.

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

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

    <!-- Inicializar uma instância do Fluid Player -->
    <script>
      console.log("a inicializar o Fluid")
      var player = fluidPlayer("example-player");
    </script>

  </head>

  <body>
    <h1>block-ad-types para anúncios In Stream (vídeo) usando parâmetros da URL</h1>

    <!-- Player <video> normal -->
    <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"
        />
        O seu navegador não suporta a etiqueta de vídeo.
      </video>
    </div>

    <!-- Script que define a configuração do Fluid Player -->
    <script>
      
      // Função para obter o valor de user_verified do parâmetro da URL
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );

      // Definir tipos de anúncios bloqueados com base nos parâmetros da URL
      let dynamicVastTag =
        "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101"; // bloquear anúncios NSFW
      if (userVerified === "1") {
        dynamicVastTag = "https://s.magsrv.com/v1/vast.php?idzone=5532704";  // se o utilizador estiver verificado, mostrar todos os anúncios
      }

      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>

EXEMPLO 2 - Bloquear tipos de anúncios In Stream com base em dados do armazenamento local

Esta implementação difere da anterior por usar o armazenamento local para gerir o consentimento do utilizador em vez de parâmetros da URL. O código é modular, com funções separadas para criar o player de vídeo e a configuração do Fluid Player.

A <head> secção do HTML contém três funções principais que controlam a entrega de anúncios com base no consentimento do utilizador:

  • insertVideoPlayer cria um elemento de player de vídeo e adiciona-o à página web.

  • fluidPlayerConfig gera um objeto de configuração para o Fluid Player. A lógica principal desta função está em como escolhe o URL do anúncio: se o utilizador não tiver aceite os termos (false), adiciona &block_ad_types=101 ao URL para bloquear certos anúncios. Se o utilizador tiver aceite (true), usa o URL padrão, permitindo todos os anúncios.

  • insertFluidPlayer junta tudo. Primeiro, cria o player de vídeo usando insertVideoPlayer e depois anexa o Fluid Player a ele, usando a configuração específica de playerConfig, adaptada ao consentimento do utilizador.

Na <body>, o script final verifica o consentimento do utilizador no armazenamento local ao carregar a página e renderiza os players em conformidade. Se não tiver sido dado consentimento, mas o utilizador aceitar mais tarde os termos ao clicar no botão, o player é reinicializado com as permissões atualizadas.

AnteriorComo bloquear dinamicamente tipos de anúncios usando data-block-ad-types

Isto foi útil?