Saltar para o conteúdo principal
A biblioteca pública banner.js do Topsort permite que marketplaces exibam banners através de uma integração low-code. Usando uma tag HTML simples, o marketplace pode se conectar ao servidor de anúncios do Topsort e renderizar banners de campanhas ativas sem integrações complexas.

​
Instalação

Você pode instalar a biblioteca usando npm ou yarn, ou carregar o SDK diretamente no seu arquivo HTML incluindo uma tag <script>: 
<script
  async
  type="module"
  src="https://unpkg.com/@topsort/banners@latest/dist/banners.mjs"
></script>
<script>
  // Configuração global para o Topsort
  window.TS = {
    token: "TSE_XXXXXXXXXXXX", // Substitua pela sua chave de API do Topsort
  };
</script>

​
Uso

Este exemplo mostra uma configuração mínima necessária para fazer isso. A integração funciona com HTML e Javascript padrão, tornando-a compatível com a maioria dos stacks frontend. Para testá-la, você só precisa adicionar sua Chave de API do Marketplace e o id do slot do banner, configurado na campanha. 
<script
  async
  type="module"
  src="https://unpkg.com/@topsort/banners@latest/dist/banners.mjs"
></script>
<script
  async
  type="module"
  src="https://unpkg.com/@topsort/analytics.js/dist/ts.js"
></script>
<script>
  // Define a chave de API para leilões e eventos
  window.TS = {
    token: "TSE_XXXXXXXXXXXX",
  };
  // Comportamento personalizado pode ser configurado para cada site.
  window.TS_BANNERS = {
    // manipular o link de destino
    getLink(banner) {
      return `https://example.com/${banner.id}`;
    },
    // manipular estado de carregamento/busca
    getLoadingElement() {
      const el = document.createElement("div");
      el.innerText = "Carregando...";
      return el;
    },
    // manipular erros
    getErrorElement() {
      const el = document.createElement("div");
      el.innerText = "Erro ao carregar banner";
      return el;
    },
  };
</script>
<body>
  <topsort-banner width="600" height="400" id="<your slot id>"></topsort-banner>
</body>

​
Atributos do Banner

Estes são os atributos disponíveis para o componente <topsort-banner>. Eles servem como entrada para a solicitação de leilão, para buscar os vencedores certos para aquele contexto.
NomeTipoDescrição
widthnumberLargura do banner
heightnumberAltura do banner
idstringO ID do slot para este banner, configurado na campanha
Category-id (opcional)stringCategoria contextual para segmentação
Search-query (opcional)stringPalavra-chave contextual para segmentação

​
Comportamentos do Banner

Estes são os atributos disponíveis para o componente <topsort-banner>. Eles servem como entrada para a solicitação de leilão, para buscar os vencedores certos para aquele contexto.
NomeTipoDescrição
getLink(banner)stringURL de destino do banner, configurado na campanha.
getLoadingElementHTMLElementUm elemento personalizado a ser exibido quando o banner está carregando.
getErrorElementHTMLElementUm elemento personalizado a ser exibido quando ocorre um erro.

​
Interface do Banner

A interface do banner é a estrutura de um objeto banner. Cada banner contém metadados sobre a campanha e o resolvedBidId, o parâmetro necessário para rastrear interações do usuário (cliques e impressões).
NomeTipoDescrição
type”product” | “vendor” | “brand” | “url”O tipo da entidade vencedora, representada pelo banner, configurado na campanha.
idstringO ID da entidade vencedora. Se a entidade for do tipo URL, este é o URL.
resolvedBidIdstringO ID de lance correspondente da entidade vencedora, necessário para rastrear a interação do usuário (cliques, impressões) com o anúncio.
asset[{ url: string }]Um array de urls vinculando aos ativos do banner.

Precisa de ajuda com sua integração Topsort?

Fale conosco, a equipe de engenharia de integrações.Entre em contato através do seu canal de mensagens dedicado ou em support@topsort.com.Se você ainda não é cliente, agende uma demo com nossa equipe de vendas.