Passer au contenu principal
Les publicités vidéo sont un nouveau format conçu pour améliorer l’expérience de marque et de produit de l’annonceur.

Comment Ça Fonctionne

Le processus de création de campagne est similaire à celui des bannières publicitaires :
1

Télécharger une vidéo

2

Sélectionner un emplacement

3

Définir les placements/contexte (automatique, catégorie, recherche)

4

Définir les détails de la campagne : nom, budget et durée

Les vidéos téléchargées par les vendeurs nécessitent l’approbation de l’administrateur de la marketplace.

Exigences Vidéo

  • Durée : 6 à 20 secondes (moins de 20s recommandé)
  • Formats : MP4 ou MOV
  • Taille maximale : 200 Mo

Flux d’Enchères

Lors d’une requête d’enchères, les marketplaces doivent envoyer l’ID de l’emplacement et peuvent inclure des informations contextuelles (par exemple, catégorie, mots-clés). La réponse d’enchère retournera l’URL de la vidéo pour le rendu.

Exemple de Réponse d’Enchère

{
  "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
}
La réponse inclut une URL de manifeste HLS (.m3u8) qui peut être rendue en utilisant n’importe quel lecteur vidéo compatible HLS.

Options d’Intégration Vidéo

Utilisez Votre Propre Lecteur Vidéo

Les publicités vidéo de Topsort sont compatibles avec tous les lecteurs prenant en charge les formats HLS et DASH. Voici des exemples d’implémentation pour chaque plateforme.

Implémentation 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>
// Initialiser HLS.js pour une meilleure prise en charge du navigateur
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')) {
  // Support HLS natif (Safari)
  video.src = 'YOUR_VIDEO_URL_HERE';
}

// Suivre les impressions (50% visible pendant 2+ secondes)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio >= 0.5) {
      setTimeout(() => {
        if (entry.intersectionRatio >= 0.5) {
          // Signaler l'impression
          window.topsortEvents.reportEvent({
            type: 'impression',
            resolvedBidId: 'YOUR_RESOLVED_BID_ID'
          });
        }
      }, 2000);
    }
  });
}, { threshold: 0.5 });

observer.observe(video);

// Gérer les clics
video.addEventListener('click', () => {
  window.topsortEvents.reportEvent({
    type: 'click',
    resolvedBidId: 'YOUR_RESOLVED_BID_ID'
  });
  // Naviguer vers la page du vendeur/produit
});
</script>

Implémentation 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 }

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

        // Configurer pour la lecture automatique
        player?.isMuted = true
        player?.play()

        // Boucler la vidéo
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(playerDidFinishPlaying),
            name: .AVPlayerItemDidPlayToEndTime,
            object: player?.currentItem
        )

        // Ajouter un geste de tap pour les clics
        let tap = UITapGestureRecognizer(target: self, action: #selector(handleTap))
        addGestureRecognizer(tap)
    }

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

    @objc private func handleTap() {
        // Signaler l'événement de clic via le SDK Topsort
    }
}

Implémentation 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  // Boucle
            volume = 0f  // Muet pour la lecture automatique
            prepare()
            play()
        }

        player = exoPlayer
        useController = false  // Masquer les contrôles

        // Gérer les clics
        setOnClickListener {
            // Signaler le clic via le SDK Topsort
        }
    }
}
Pour une documentation détaillée du lecteur, consultez :

Rapports et Métriques

Topsort suit les impressions et clics vidéo en utilisant banners.js.

Suivi des Impressions

  • Impression Visible (Norme IAB/MRC) : 50% des pixels visibles pendant 2+ secondes consécutives
  • Impression d’Engagement : Vidéo regardée pendant au moins 5 secondes
  • Utilisez le resolvedBidId de la réponse d’enchère lors du signalement des événements

Normes d’Attribution et de Facturation

Selon les Directives de Mesure des Médias de Vente au Détail IAB/MRC, Topsort utilise les Impressions Visibles (Norme IAB/MRC) pour :
  • Attribution des résultats : Seules les impressions répondant aux normes de visibilité MRC (50% des pixels visibles pendant 2+ secondes) sont éligibles pour l’attribution
  • Facturation de campagne : Les annonceurs sont facturés en fonction des impressions visibles
  • Rapports de performance : Métriques primaires et calculs de ROAS basés sur les impressions visibles
Remarque : Les impressions d’engagement (5+ secondes regardées) sont disponibles comme métrique d’engagement supplémentaire mais ne sont PAS utilisées à des fins d’attribution ou de facturation.

Suivi des Clics

  • Signalez les événements de clic lorsque les utilisateurs interagissent avec la vidéo
  • Incluez le resolvedBidId pour attribuer correctement le clic
  • Naviguez vers la page appropriée du vendeur/produit après le signalement

Considérations Importantes

  • Exigences de Lecture Automatique : Les vidéos doivent être muettes pour la lecture automatique sur la plupart des navigateurs
  • Lecture en Boucle : Les vidéos doivent être lues en boucle en continu lorsqu’elles sont visibles
  • Optimisation Mobile : Utilisez l’attribut playsinline pour éviter le plein écran sur iOS
  • Performance : Envisagez le chargement différé pour les vidéos sous le pli
Les marketplaces peuvent également configurer une logique de signalement d’impressions et de clics personnalisée selon leurs besoins.

Questions Fréquemment Posées

  1. Quels sont les paramètres de téléchargement recommandés pour les téléchargements vidéo ?
    • Conteneurs MP4, codec audio AAC, codec vidéo H264, 30 images par seconde ou moins
    • L’atome moov doit être au début du fichier (Fast Start)
    • H264 balayage progressif (pas d’entrelacement)
    • Profil élevé H264
    • GOP fermé
    • Le contenu doit être encodé et téléchargé à la même fréquence d’images qu’il a été enregistré
    • Audio mono ou stéréo (Stream mixera les pistes audio avec plus de 2 canaux en stéréo)
  2. Sur quels navigateurs fonctionne Stream ?
    • Vous pouvez intégrer le lecteur Stream sur les plateformes suivantes :

      Navigateur

      Version

      Chrome

      Pris en charge depuis Chrome version 88+

      Firefox

      Pris en charge depuis Firefox version 87+

      Edge

      Pris en charge depuis Edge 89+

      Safari

      Pris en charge depuis Safari version 14+

      Opera

      Pris en charge depuis Opera version 75+

      Plateforme Mobile

      Version

      Chrome sur Android

      Pris en charge sur Chrome 90

      UC Browser sur Android

      Pris en charge sur version 12.12+

      Samsung Internet

      Pris en charge sur 13+

      Safari sur iOS

      Pris en charge sur iOS 13.4+. Sélecteur de vitesse pris en charge en dehors du plein écran.


Last updated: