Introdução
Essa documentação irá lhe guiar pelo processo de configuração do Direct Ads, solução desenvolvida pela RTB House e voltada para a entrega de anúncios personalizados native e display via tecnologia de header bidding.
Para esta configuração, a RTB House disponibiliza aos seus parceiros um trecho de código para ser incluído na página ou, opcionalmente, em um criativo no AdServer de preferência. O código em questão realiza uma chamada assíncrona para os servidores da RTB House permitindo a identificação do usuário e a entrega de anúncios personalizados sempre que disponíveis.
Por fim, a RTB House também disponibiliza acesso a um Dashboard individual para acompanhamento das métricas relacionadas a entrega do anúncio (como Impressões, Investimento Total e CPM) para acompanhamento.
Caso tenha alguma dúvida ou sugestão de otimização/nova funcionalidade, por favor envie um e-mail para inventory_support@rtbhouse.com fazendo uso do marcador [DIRECT-ADS] no início do título.
Caso queira, você também pode conferir a página de demonstração com diversos exemplos de formatos configurados.
Requisitos
O que você irá receber
- Um identificador único (PublisherID)
- Códigos de exemplo demonstrando a configuração do Direct Ads
- Códigos alternativos que podem ser utilizados no criativo do AdServer
- Acesso a um Dashboard com estatísticas da integração
O que precisará fazer
- Ter conhecimento de HTML e JS (opcionalmente, também CSS)
- Mapear a posição na página onde o anúncio será entregue e inicializar a nossa API
- Em caso de AdServer, aplicar as regras de targeting para a posição e desabilitar safe-frames ou similares (o criativo deve conseguir acessar o escopo da página)
Início rápido
Para começar a utilizar o Direct Ads, basta definir uma posição (<div>) onde o anúncio será entregue incluir o trecho de código fornecido por nós no HEAD da página ou na estrutura HTML do criativo servido pelo Adserver.
Banners display
O exemplo a seguir demonstra a entrega de um anúncio display de 300x250 e a definição de uma imagem como passback em caso de ausência de anúncios.
Banners native
Neste exemplo é demonstrado a entrega de um banner native com passback. Note que, apesar do native possuir característica responsiva, é necessário configurar largura e altura para o passback.
Vitrines
Neste último exemplo, uma vitrine de natives é configurada com 3 posições, também com passback definido.
Parâmetros de configuração
Como listado nos exemplos de Início Rápido, uma série de parâmetros estão disponíveis para utilização na API do Direct Ads. A listagem completa, juntamente com a definição, está descrita na tabela a seguir:
Parâmetros base
| Parâmetro | Descrição | Valores aceitos | Tipo |
|---|---|---|---|
| publisherId | Identificador configurado para a integração | Único / Pré-definido | String |
| type | Formato de anúncio a ser renderizado | "display", "display-showcase", "native-showcase" | String |
| wrapper | ID do container HTML que será usado para entregar o anúncio | Qualquer ID válido, sem o “#” | String |
| passback | URL da tag de Passback | Qualquer URL válida que possa ser renderizada em um iframe | String |
| swidth | Largura do anúncio. Para natives, será a largura para Passback; Em showcases representa cada slot. | Qualquer valor em pixels, desde que presente no padrão IAB | Int |
| sheight | Altura do anúncio. Para natives, será a largura para Passback; Em showcases representa cada slot. | Qualquer valor em pixels, desde que presente no padrão IAB | Int |
| spadding | Espaçamento interno do anúncio | Qualquer valor em pixels | Int |
| numslots | Número de anúncios a serem exibidos | Qualquer número | Int |
| showcase | Objeto de configuração para templates de showcase | Par de chaves/valores (veja Parâmetros de vitrine) | Object |
| nativeStyle | Objeto de configuração para templates de native | Par de chaves/valores (veja Parâmetros de native) | Object |
| callback | Uma função de callback para ser chamada quando o criativo for entregue ou não houver anúncios disponíveis | Qualquer função executável | Function |
Parâmetros de vitrine
| Parâmetro | Descrição | Valores aceitos | Tipo |
|---|---|---|---|
| header | Texto do chapéu da vitrine | Qualquer | String |
Parâmetros de native
| Parâmetro | Descrição | Valores aceitos | Tipo |
|---|---|---|---|
| cta | Texto da chamada (botão) | Qualquer; | String |
| btnColor | Cor do botão | Qualquer; Compatível com CSS | String |
| btnTitleColor | Cor do texto do botão | Qualquer; Compatível com CSS | String |
| titleColor | Cor do Título | Qualquer; Compatível com CSS | String |
| descColor | Cor da descrição | Qualquer; Compatível com CSS | String |
Estilização avançada
O Direct Ads suporta a customização de banners native
e vitrine por meio de regras de CSS, que devem ser aplicadas seguindo
o padrão de seletor #[id-do-wrapper] elemento. Para
garantir prioridade na estilização, recomendamos que o CSS seja
incluído imediatamente antes do container onde o anúncio será
renderizado.
A estrutura HTML gerada pela API é descrita a seguir:
| Seletor CSS | Descrição | Formato(type) |
|---|---|---|
| .showcase-header | Wrapper do título da vitrine | native-showcase; display-showcase |
| .showcase-wrapper | Wrapper dos anúncios da vitrine | native-showcase; display-showcase |
| .ad-slot | Wrapper para os elementos internos do slot | native |
| .ad-icon | Logo do anúnciante | native |
| .ad-image | Imagem do produto | native |
| .ad-title | Título do anúncio | native |
| .ad-description | Descrição do anúncio | native |
| .ad-cta | Botão de call to action | native |
Estrutura HTML
A seguir você pode visualizar a estrutura gerada pela API do Direct Ads. Note que as tags .showcase-header e .showcase-wrapper estão presentes exclusivamente nas vitrines de native e display.
Função de retorno
Conforme descrito em Parâmetros base, é possível configurar uma função de retorno que será executada ao final do processo de entrega do anúncio pelo Direct Ads.
Qualquer função referenciada no parâmetro callback da API irá ter acesso a variável rendered, definida como false em caso de ausência de anúncios ou true no caso de ao menos um anúncio ter sido entregue.
Um exemplo de implementação utilizando a função de retorno é definido a seguir: