Draper-ads

Lib implementa uma maneira simples para se trabalhar com publicidade dentro de projetos React. Com ela implementamos o Prebid, Google Publish Tag. Também contamos com a implementação de duas ferramentas para segmentação de usuários, como o Navegg e Tail Target.

Configurações básicas

Para que seja possível utilizar a biblioteca é necessário que alguns scripts estejam presentes na aplicação, como:

GTM

O Google Tag Manager deve ser inicializado a nível de aplicação, de modo que a funcionalidade da biblioteca está ligada a implementação do mesmo. As variáveis de configuração de slot também devem ser inicializadas através dessa ferramenta, vide a documentação complementar.

https://docs.google.com/document/d/1NeWApcDGcAyxc-Q8RJyZLDWpHDi3XrTftHuB0xU4JT4/edit

Para implementar o GTM é necessário seguir o guia disponibilizado pelo Google, com a devida chave de acesso do seu GTM:

https://developers.google.com/tag-manager/quickstart

GPT

O Google Publish Tag nos trás todas as funções referente ao controle e a chamada de peças publicitárias, sua implementação é feita dentro da biblioteca.

Prebid script

Uma das funcionalidades principais da biblioteca é a implementação do prebid. Atualmente ocorre dentro da biblioteca, através do link do script que está no storage do Reverb. Para cada pacote de Adapeters precisamos de uma versão diferente do script e possivelmente uma nova implementação dessa lib, portanto é melhor mantermos essa implementação dentro da lib, pelo menos até acharmos uma solução para esse problema.

Usando a biblioteca

Para importar os componentes necessários para o funcionamento correto da lib devemos fazer da seguinte forma:

import { AdProvider, AdSlot } from 'draper_ads';

A biblioteca exporta dois componentes React <AdProvider /> & <AdSlot />. de forma que todos os AdSlot devem estar contidos dentro do AdProvider, são as configurações contidas no provider que vão permitir que o slot seja renderizado corretamente.

Exemplo:

<AdProvider pageName="pageExample" targets={[["id", 1], ["tag", "tag123"]]}  tags={["tag", "tagExample"]}>
    <AdSlot name="adslot" slotTarget={{tag: "tagExample"}} appendSlotName="+1" />
</AdProvider>

Glossário de props

• AdProvider

  • pageName Nome da página onde o provider está sendo utilizado. Serve para que todas os ads sendo renderizados dentro do provider possam consumir esse dado e exibir a peça correta dependendo da página.

  • targets Esses dados são adicionados a chamada para o AdServe.

  • tags É adicionado as tags do TailTarget.

• AdSlot

  • name Define o nome do slot e o ID que irá aparecer na div do render final. Também é usado para encontrar as configurações do slot que estão nas variáveis globais do GTM.
  • slotTarget Função parecida com targets do provider no entanto é definida apenas para esse slot especificamente.
  • appendSlotName É utilizada quando precisamos adicionar um pós fixo ao nome do slot sem alterar o nome original do slot.