npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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 e prod) para debug e testes.