publicidade
v1.1.2
Published
Ferramentas web para publicidade
Downloads
2
Readme
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
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
eprod
) para debug e testes.