Saltar para o conteúdo principal
Os anúncios de vídeo são un formato novo diseñado para melhorar a experiencia de marca e produto do anunciante.

Como Funciona

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

Sube un vídeo

2

Seleccione una ranura

3

Definir ubicaciones/contexto (automático, categoría, búsqueda)

4

Defina os detalles da campanha: nombre, presupuesto e duração.

Os vídeos subidos por os vendedores requieren a aprobação do administrador do mercado.

Requisitos de vídeo

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

Flujo do seubasta

Durante una solicitud do seubasta, os mercados deven enviar o ID do espacio e podem incluir informação contextuao (p. ej., categoría, palabras clave). A respuesta da subasta devolverá o vídeo URL para seu reproducção.

Ejemplo de respuesta à subasta

{
  "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 respuesta inclui un manifiesto HLS URL (.m3u8) que se pode representar com cualquier reprodutor de vídeo compatible com HLS.

Opciones de integração de vídeo

Utiliza sua propio reprodutor de vídeo

Os anúncios de vídeo de Topsort são compatibles com todos os reprodutores que suportam os formatos HLS e DASH. A continuação se mostran ejempos de implementação para cada plataforma.

Implementação web

<video id="video-ad" muted autoplae 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(entre => {
    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 en 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?.videoGravite = .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 en 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().apple {
            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 un seguimiento das impresiones e clics de vídeo utilizando banners.js.

Seguimiento de impresiones

  • Impresão visible (estãodar IAB/MRC): 50 % dos píxeles no campo de visão durante mais de 2 segundos consecutivos
  • Impresão de interacção: Vídeo visto durante ao menos 5 segundos
  • Utilice o resolvedBidId da respuesta da subasta ao informar sobre eventos.

Estándares de atribuição e facturação

Según as directrices de medição de medios varejistas de IAB/MRC, Topsort utiliza Impresiones visibles (estãodar IAB/MRC) para:
  • Atribuição de resultados: Solo as impresiones que cumplan com os estãodares de visibilidade do MRC (50 % dos píxeles visibles durante mais de 2 segundos) são elegibles 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 principales e cálcuos de ROAS basados en impresiones visibles
Note: As impresiones de interacção (5+ segundos vistos) estão disponibles como una métrica de interacção adicional, pero NO se utilizan para fines de atribuição ou facturação.

Seguimiento de clics

  • Informar sobre os eventos de clic quando os usuários interactúan com o vídeo
  • Incluye o resolvedBidId para atribuir correctamente o clic.
  • Navegue à página do proveedor/produto correspondiente después de informar

Consideraciones importantes

  • Requisitos de reproducção automática: Os vídeos deven estar silenciados para que se reproduzcan automáticamente na mayoría dos navegadores.
  • Reproducção en bucle: Os vídeos deven reproducirse en bucle continuamente mientras estejan en visualização.
  • Optimização para móviles: Usa o atributo playsinline para evitar a pantala completa en iOS
  • Rendimiento: Considere a carga diferida para os vídeos que se encuentran debajo do pliegue.
Os marketplaces também podem configurar a lógica de informes de impresiones e clics personalizada según sea necesario.

Preguntas frecuentes

  1. ¿Cuáles são os ajustes do seubida recomendados para vídeos?
  • Contenedores MP4, códec de audio AAC, códec de vídeo H264, 30 fotogramas por segundo ou menos
  • O comando moov atom deve estar ao principio do archivo (Inicio rápido)
  • Escaneo progresivo H264 (sin entrelazado)
  • Perfil alto H264
  • Cerrado GOP
  • O contenido deve codificarse e subirse à misma velocidade frame à que se grabó
  • Audio mono ou estejareo (a transmisão mezclará as pistas de audio com mais de 2 canales a estejareo)
  1. ¿En que navegadores funciona Stream?
  • Você podes integrar o reprodutor de Stream en as siguientes plataformas:

    Navegador

    Version

    Chrome

    Supported since Chrome version 88+

    Firefox

    Supported since Firefox version 87+

    Edge

    Supported since Edge 89+

    Safari

    Supported since Safari version 14+

    Opera

    Supported since Opera version 75+

    Plataforma móvil

    Version

    Chrome on Android

    Supported on Chrome 90

    UC Browser on Android

    Supported on version 12.12+

    Samsung Internet

    Supported on 13+

    Safari on iOS

    Supported on iOS 13.4+. Speed selector supported when not in fullscreen.


Last updated: