Publicidade

Ferramentas para utilização da plataforma de publicidade DoubleClick e geração da tag (GPT) utilizada no Tealium.

Instalação

$ npm install --save publicidade

Configuração

Para o funcionamento correto da publicidade é preciso realizar duas etapas. A declaração de uma variável contendo algumas informações e a chamada da tag universal do Tealium.

Dados

Para a camada de dados do Tealium é utilizada a variável utag_data, que deve conter os dados necessários para que seja possível a construção do adUnit padrão e algumas verificações, como os formatos disponíveis. Portanto, essa variável deve ser declarada antes que a tag do Tealium seja chamada.

var utag_data = {
    // Lista descrevendo os níveis do site/editorias.
    // O adUnit gerado seguindo o exemplo abaixo será:
    // globosat.site/programas
    estrutura: ["site", "programas"],
    // Formatos disponíveis na página (para sites na nova plataforma).
    formatos: ["Top1", "Position2"]
};

Tag Universal

Essa tag deve ser chamada somente depois que todos os slots de publicidade já foram devidamente registrados, conforme mostrado na seção de uso, pois ela será responsável pela renderização dos mesmos.

Na URL da tag é possível selecionar qual versão da utag será utilizada. As opções são dev ,qa ou prod.

<script type="text/javascript">
    (function(a, b, c, d) {
        a = "//tags.tiqcdn.com/utag/globo/globosat/[dev|qa|prod]/utag.js";
        b = document;
        c = "script";
        d = b.createElement(c);
        d.src = a;
        d.type = "text/java" + c;
        d.async = true;
        a = b.getElementsByTagName(c)[0];
        a.parentNode.insertBefore(d, a);
    })();
</script>

Uso

Para registrar um slot é preciso passar o ID do elemento ou a instância do elemento na DOM. Caso seja passado um elemento que não possua um ID próprio, será gerado um ID randômico e atribuido para o mesmo.

Caso seja utilizado um ID de um elemento inexistente na DOM, o registro será ignorado.

publicidade.slots.register("element-id", options);

Com instância da DOM:

var elem = document.getElementById("element-id");
publicidade.slots.register(elem, options);

Exemplo utilizando jQuery:

// O registro realizado usando jQuery ainda utilizará somente um
// elemento, portanto se uma query conter mais de um elemento, o
// primeiro será utilizado.
var $elem = $("#element-id");
publicidade.slots.register($elem, options);

Opções

sizes array

Lista dos tamanhos possíveis de um slot. Quando essa opção não é passada, o slot é registrado como out-of-page, um tipo especial de slot sem tamanho específico.

publicidade.slots.register("element-id", {
    sizes: [300, 50]
});

Multíplos tamanhos para um mesmo slot:

publicidade.slots.register("element-id", {
    sizes: [[300, 250], [300, 50]]
});

Registro de um slot out-of-page:

publicidade.slots.register("element-id");

collapse boolean

default true

Indica se deve ser feito o collapse automático de um slot quando o mesmo não foi preenchido por nenhuma peça. Vale ressaltar que será considerado somente o container registrado, para manipulações adicionais é possível utilizar o callback onRender.

onRender function

Função disparada quando o slot termina de ser renderizado. Recebe o evento disparado pelo DoubleClick.

publicidade.slots.register("element-id", {
    sizes: [300, 50],
    onRender: function(event) {
        console.log("Slot element-id (300x50) foi renderizado!");
    }
});

targeting object

Objeto que define o targeting do slot. Pode ser utilizado para filtrar tipos específicos de peças ou determinar uma posição para um maior controle de alocação/venda de peças publicitárias.

publicidade.slots.register("element-floating", {
    targeting: {
        gsat_tipo: "floating"
    }
});

publicidade.slots.register("element-sidebar", {
    sizes: [300, 250],
    targeting: {
        gsat_pos: "sidebar"
    }
});

sizeMapping array

Lista contendo o mapeamento de breakpoints do browser para os tamanhos do slot. Quando o browser é redimensionado, os slots são atualizados com os tamanhos mapeados para nova dimensão e a função onRender será disparada novamente.

var mapping = publicidade.sizeMapping()
    // Ignorar o slot para larguras maiores que 720px.
    .addSize([720, 0], [])
    // Utilizar o tamanho 300x250 para larguras maiores que 300px.
    .addSize([300, 0], [300, 250])
    // Tamanho 300x100 ou 300x50 para todas as outras dimensões.
    .addSize([0, 0], [[300, 100], [300, 50]])
    .build();

publicidade.slots.register("element-id", {
    // Caso não seja possível determinar as dimensões
    // do browser, o tamanho passado na opção "sizes"
    // será utilizado. Vale ressaltar que é preciso
    // passar um tamanho padrão para que o slot não
    // seja registrado como out-of-page.
    sizes: [300, 100],
    sizeMapping: mapping,
    onRender: function(event) {
        console.log(event.size);
    }
});

Slots dinâmicos

Para realizar o registro de novos slots após o carregamento da tag universal ainda é possível fazer chamadas a função publicidade.slots.register, porém esses novos slots não serão renderizados imediatamente e faz-se necessária a chamada da função publicidade.slots.render.

Vale ressaltar que slots já registrados não podem ser alterados e chamadas a função render antes do carregamento da tag universal não terão efeito algum.

// A tag universal já foi carregada
// e executada nesse ponto.

publicidade.slots.register("feed-slot", {
    sizes: [300, 250]
});

publicidade.slots.register("gallery-slot", {
    sizes: [300, 50]
});

// Para renderizar slots nesse ponto
// é preciso chamar a função `render`.
publicidade.slots.render();

Migrando da OAS

Para manter compatibilidade com as chamadas antigas em que o position é utilizado não apenas como a posição em que a peça se encontra na página, mas também como o formato (tamanho) da peça, é possível utilizá-lo como o valor da opção sizes, o mesmo será traduzido para o tamanho real da peça.

publicidade.slots.register("element-id", {
    // Será traduzido para 300x250.
    sizes: "Position2"
});

Sobrescrita da função OAS_AD

Uma forma de realizar uma substituição rápida para a nova plataforma de publicidade é sobrescrever a função OAS_AD, utilizada para renderizar as peças.

function OAS_AD(position) {
    // É preciso que haja uma forma de recuperar o ID
    // do elemento ou sua instância na DOM.
    var id = "ad-" + position;
    publicidade.slots.register(id, {
        sizes: position,
        // Caso seja necessário a distinção
        // da posição da peça na página.
        targeting: {
            gsat_pos: position
        }
    });
}

Ferramentas úteis

Guias & Especificações

• IAB Display Guidelines

Extensões do Chrome

• Google Publisher Toolbar
  Auxilia na identificação de peças publicitárias e a visualização de seus dados, como adUnit, ID da peça e outras informações úteis.

• Tealium Tools
  Permite a visualização dos dados passados ao Tealium assim como a troca entre ambientes da tag universal (dev, qa e prod) para debug e testes.