Guía: Integración de socios publicitarios

Resumen

Si su sistema de publicidad es compatible con Google IMA3, por ejemplo, no necesita esta información, pero simplemente puede usar el complemento existente para IMA3, documentado en el Publicidad con la guía del complemento IMA3.

Si ha determinado que necesita esta funcionalidad, este contenido explica el marco de API de publicidad necesario para las integraciones publicitarias con Brightcove Player. Puede ver dos implementaciones de este marco que Brightcove ha producido, las que son para IMA3 y FreeWheel de Google (documentos de referencia que se muestran en el siguiente párrafo).

Nuevamente, este documento NO está destinado a clientes que deseen utilizar un marco publicitario existente con sus videos. Los documentos más adecuados para estos clientes son:

• Publicidad con el complemento IMA3
• Publicidad con el complemento FreeWheel
• Implementación de anuncios del lado del servidor con Brightcove Player

Funcionalidad del marco publicitario

Brightcove proporciona un marco de API de publicidad como base para complementos de anuncios personalizados. El marco proporciona una funcionalidad común que necesitan las bibliotecas de anuncios de video que trabajan con Brightcove Player, lo que reduce el código que tiene que escribir para la integración de sus anuncios. El marco se proporciona como un proyecto de código abierto sobre el que puede construir. El código del proyecto está disponible en el repositorio de GitHub. videojs-contrib-ads.

El marco publicitario permite a los socios publicitarios:

• Tenga un control total sobre la experiencia publicitaria (es decir, el aspecto y el comportamiento del reproductor mientras se reproducen los anuncios).
• Trabaje con servidores de anuncios personalizados o propietarios.
• Administre los detalles de implementación de anuncios de bajo nivel, como determinar cuándo se realizan las solicitudes de anuncios y cómo se almacenan en búfer las creatividades.
• Interopere fácilmente con proveedores de análisis de video y el ecosistema de Brightcove Player.

Conocimiento base

Para utilizar y desarrollar el marco de la API de publicidad, necesitará un conocimiento profundo de la arquitectura del complemento de Brightcove Player. Los siguientes documentos proporcionan este conocimiento:

• Descripción general: Plugins de reproductor
• Pasar datos al complemento
• Localización de complementos

Si es necesario para usted, aquí puede encontrar una descripción general rápida de la publicidad en video desde la perspectiva de Brightcove:

• Guía de aprendizaje: Publicidad video

Usando el marco

Las siguientes secciones proporcionan detalles sobre el uso del marco.

Incluir los recursos del marco

Para utilizar el complemento, primero debe asegurarse de incluir el CSS y JavaScript para el complemento.

<link rel="stylesheet" href="//mypath/videojs.ads.css">
<script src="//mypath/videojs.ads.js"></script>

Una vez que se incluye JavaScript, puede llamar a la función para inicializar el marco de anuncios.

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').one('loadedmetadata', function(){
    var myPlayer = this;
    // Initialize the ad framework
    myPlayer.ads();
  });
</script>

Opciones de configuración

Hay varias opciones de configuración disponibles para el marco. Por ejemplo, hay un timeout opción. Para configurar esta opción, usaría el siguiente código:

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').one('loadedmetadata', function(){
    var myPlayer = this;
    // Initialize the ad framework
    myPlayer.ads({
      "timeout": 3000
    });
  });
</script>

Esta tabla proporciona una lista de las opciones:

Eventos

Los siguientes eventos se agrupan en dos tipos diferentes. A continuación se muestran las agrupaciones y sus descripciones.

La adstart y adend Los eventos son activados por el marco en respuesta a llamadas a métodos del integrador de anuncios. El integrador de anuncios no debe activar estos eventos directamente.

La adskip y adtimeout Los eventos son eventos opcionales que el integrador de anuncios puede activar para indicar que el jugador debe omitir una oportunidad de pre-roll o postroll.

Configuración de tiempo de ejecución

Una vez que se inicializa el complemento, hay una propiedad que puede usar para modificar su comportamiento.

Ejemplo

Esta sección proporciona un ejemplo de una implementación con una muestra de trabajo completa.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contrib ads ad plugin</title>
</head>

<body>

  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="default"
    data-embed="default"
    controls=""
    data-video-id="6077029038001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"></video-js>

  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.9.0/videojs.ads.js"></script>

  <script>
    const player = videojs.getPlayer("myPlayerID");
    let creative = '';

    player.ads();

    player.on('contentupdate', function () {

    // Console output
    console.log("### videojs EVENT: contentupdate");

    // can fetch ad inventory here...
    player.setTimeout(() => {
      creative = 'https://solutions.brightcove.com/bcls/ads/bc-ads/bcls-ad-1-8seconds.mp4';
    }, 100);
    player.trigger('adsready');

    // Console output
    console.log("### videojs EVENT: adsready");

    });

    player.on('loadedmetadata', function () {
    // Console output
    console.log("### videojs EVENT: loadedmetadata");
    });

    player.on('readyforpreroll', function () {

      // Console output
      console.log("### videojs EVENT: readyforpreroll");

      player.ads.startLinearAdMode();
      // play your linear ad content
      player.src(creative);
      player.one('durationchange', function () {
        player.play();
      });
      // when ad has finished restore player
      player.one('adended', function () {

        // Console output
        console.log("### videojs EVENT: adended");

        player.ads.endLinearAdMode();
      });
    });

    player.on('ended', function () {
      // Console output
      console.log("### videojs EVENT: ended");
    });
  </script>
</body>

</html>

Preguntas más frecuentes