Saltar para o conteúdo principal
Os anúncios de vídeo são um formato novo projetado para melhorar a experiência de marca e produto do anunciante.

Como Funciona

O processo de criação da campanha é similar ao dos anúncios de banner:
1

Faça upload de um vídeo

2

Selecione um espaço

3

Definir posicionamentos/contexto (automático, categoria, busca)

4

Defina os detalhes da campanha: nome, orçamento e duração.

Os vídeos enviados pelos fornecedores requerem a aprovação do administrador do marketplace.

Requisitos de vídeo

  • Duração: de 6 a 20 segundos (recomenda-se menos de 20 segundos)
  • Formatos: MP4 ou MOV
  • Tamanho máximo: 200 MB

Fluxo do leilão

Durante uma solicitação de leilão, os marketplaces devem enviar o ID do espaço e podem incluir informações contextuais (p. ex., categoria, palavras-chave). A resposta do leilão retornará a URL do vídeo para sua reprodução.

Exemplo de resposta do leilão

{
  "resultType": "banners",
  "winners": [
    {
      "rank": 1,
      "asset": [
        {
          "url": "https://customer-axfyyvfgsfxowp1c.cloudflarestream.com/6541f123389a4796889166a2b9491f09/manifest/video.m3u8"
        }
      ],
      "type": "vendor",
      "id": "972776",
      "resolvedBidId": "ChAGjBuGm-lyS6oE7YQebGh-EhABmTSoITB38Z2Nmqd_rVLpGhABmTLlo1V1wJNc17VoVGUKIgoKBjk3Mjc3NhADMJTpbDoBAUAFSAJQx7rhpZMz",
      "vendorId": "972776",
      "campaignId": "019934a8-2130-77f1-9d8d-9aa77fad52e9"
    }
  ],
  "error": false
}
A resposta inclui uma URL de manifesto HLS (.m3u8) que pode ser renderizada com qualquer reprodutor de vídeo compatível com HLS.

Opções de integração de vídeo

Use seu próprio reprodutor de vídeo

Os anúncios de vídeo de Topsort são compatíveis com todos os reprodutores que suportam os formatos HLS e DASH. Abaixo estão exemplos de implementação para cada plataforma.

Implementação web

<video id="video-ad" muted autoplay loop playsinline style="width: 100%; max-width: 640px;">
  <source src="YOUR_VIDEO_URL_HERE" type="application/x-mpegURL">
</video>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
// Initialize HLS.js for better browser support
const video = document.getElementById('video-ad');
if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource('YOUR_VIDEO_URL_HERE');
  hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  // Native HLS support (Safari)
  video.src = 'YOUR_VIDEO_URL_HERE';
}

// Track impressions (50% visible for 2+ seconds)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio >= 0.5) {
      setTimeout(() => {
        if (entry.intersectionRatio >= 0.5) {
          // Report impression
          window.topsortEvents.reportEvent({
            type: 'impression',
            resolvedBidId: 'YOUR_RESOLVED_BID_ID'
          });
        }
      }, 2000);
    }
  });
}, { threshold: 0.5 });

observer.observe(video);

// Handle clicks
video.addEventListener('click', () => {
  window.topsortEvents.reportEvent({
    type: 'click',
    resolvedBidId: 'YOUR_RESOLVED_BID_ID'
  });
  // Navigate to vendor/product page
});
</script>

Implementação em iOS (Swift)

import AVKit
import UIKit

class VideoAdView: UIView {
    private var player: AVPlayer?
    private var playerLayer: AVPlayerLayer?

    func loadVideo(url: String, resolvedBidId: String) {
        guard let videoURL = URL(string: url) else { return }

        // Setup player
        player = AVPlayer(url: videoURL)
        playerLayer = AVPlayerLayer(player: player)
        playerLayer?.frame = bounds
        playerLayer?.videoGravity = .resizeAspectFill
        layer.addSublayer(playerLayer!)

        // Configure for autoplay
        player?.isMuted = true
        player?.play()

        // Loop video
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(playerDidFinishPlaying),
            name: .AVPlayerItemDidPlayToEndTime,
            object: player?.currentItem
        )

        // Add tap gesture for clicks
        let tap = UITapGestureRecognizer(target: self, action: #selector(handleTap))
        addGestureRecognizer(tap)
    }

    @objc private func playerDidFinishPlaying() {
        player?.seek(to: .zero)
        player?.play()
    }

    @objc private func handleTap() {
        // Report click event via Topsort SDK
    }
}

Implementação em Android (Kotlin)

import com.google.android.exoplayer2.ExoPlayer
import com.google.android.exoplayer2.MediaItem
import com.google.android.exoplayer2.Player

class VideoAdView(context: Context) : PlayerView(context) {
    private var exoPlayer: ExoPlayer? = null

    fun loadVideo(url: String, resolvedBidId: String) {
        exoPlayer = ExoPlayer.Builder(context).build().apply {
            setMediaItem(MediaItem.fromUri(url))
            repeatMode = Player.REPEAT_MODE_ONE  // Loop
            volume = 0f  // Muted for autoplay
            prepare()
            play()
        }

        player = exoPlayer
        useController = false  // Hide controls

        // Handle clicks
        setOnClickListener {
            // Report click via Topsort SDK
        }
    }
}
Para obter documentação detalhada sobre o reprodutor, consulte:

Relatórios e métricas

Topsort realiza um acompanhamento das impressões e cliques de vídeo utilizando banners.js.

Acompanhamento de impressões

  • Impressão visível (padrão IAB/MRC): 50% dos pixels no campo de visão durante mais de 2 segundos consecutivos
  • Impressão de interação: Vídeo visto durante pelo menos 5 segundos
  • Use o resolvedBidId da resposta do leilão ao informar sobre eventos.

Padrões de atribuição e facturação

De acordo com as diretrizes de medição de mídia varejista de IAB/MRC, Topsort utiliza Impressões visíveis (padrão IAB/MRC) para:
  • Atribuição de resultados: Apenas as impressões que cumplan com os padrões de visibilidade do MRC (50 % dos pixels visíveis durante mais de 2 segundos) são elegíveis para a atribuição.
  • Faturamento de campanhas: A os anunciantes se les cobra en função das impresiones visibles.
  • Relatórios de desempenho: Métricas principais e cálculos de ROAS baseados em impressões visíveis
Note: As impressões de interação (5+ segundos vistos) estão disponíveis como uma métrica de interação adicional, mas NÃO são utilizadas para fins de atribuição ou faturamento.

Acompanhamento de cliques

  • Informe sobre os eventos de clique quando os usuários interagirem com o vídeo
  • Inclua o resolvedBidId para atribuir corretamente o clique.
  • Navegue para a página do fornecedor/produto correspondente após informar

Considerações importantes

  • Requisitos de reprodução automática: Os vídeos devem estar silenciados para que se reproduzam automaticamente na maioria dos navegadores.
  • Reprodução em loop: Os vídeos devem se reproduzir em loop continuamente enquanto estiverem em visualização.
  • Otimização para móveis: Use o atributo playsinline para evitar a tela cheia no iOS
  • Desempenho: Considere o carregamento tardio (lazy loading) para os vídeos que estão abaixo do dobramento.
Os marketplaces também podem configurar a lógica de relatórios de impressões e cliques personalizada conforme necessário.

Perguntas frequentes

  1. Quais são as configurações de upload recomendadas para vídeos?
  • Contêineres MP4, codec de áudio AAC, codec de vídeo H264, 30 quadros por segundo ou menos
  • O átomo moov deve estar no início do arquivo (Início rápido)
  • Varredura progressiva H264 (sem entrelaçamento)
  • Perfil alto H264
  • GOP fechado
  • O conteúdo deve ser codificado e enviado na mesma taxa de quadros em que foi gravado
  • Áudio mono ou estéreo (a transmissão misturará as trilhas de áudio com mais de 2 canais para estéreo)
  1. Em quais navegadores o Stream funciona?
  • Você pode integrar o reprodutor do Stream nas seguintes plataformas:

    Navegador

    Versão

    Chrome

    Suportado desde Chrome versão 88+

    Firefox

    Suportado desde Firefox versão 87+

    Edge

    Suportado desde Edge 89+

    Safari

    Suportado desde Safari versão 14+

    Opera

    Suportado desde Opera versão 75+

    Plataforma móvel

    Versão

    Chrome no Android

    Suportado no Chrome 90

    UC Browser no Android

    Suportado na versão 12.12+

    Samsung Internet

    Suportado na versão 13+

    Safari no iOS

    Suportado no iOS 13.4+. Seletor de velocidade suportado quando não estiver em tela cheia.


Última atualização: