Publicité avec le plugin IMA3 v3

Introduction

Le plugin IMA intègre le lecteur Brightcove avec les publicités multimédias interactives (IMA) de Google pour HTML5 version 3. Cela vous permet de demander et de suivre les annonces VAST, VPAID et VMAP pour votre lecteur. Pour des informations détaillées concernant Google IMA, consultez le document Using the IMA HTML5 SDK Version 3 (Utilisation du SDK IMA HTML5 Version 3).

Exemple de joueur

L'exemple de vidéo ci-dessous montre l'utilisation du plugin IMA. Lisez la vidéo pour voir un pré-roll, un demi-rouleau sautable à 5 secondes, puis enfin un post-roll.

Test du serveur publicitaire

La première chose à faire est de vérifier la validité de la balise publicitaire que vous envisagez d'utiliser. Assurez-vous d'avoir copié son URL et naviguez jusqu'à la page suivante : Inspecteur de la suite vidéo (en cliquant sur ce lien, la page s'ouvrira dans une nouvelle fenêtre ou un nouvel onglet).

Collez l'URL de votre tag d'emplacement publicitaire dans le Input type champ de saisie du formulaire. Cliquez sur Test Ad et vous verrez vos annonces jouer, avec la vidéo fournie par Google entrecoupée. Si votre balise publicitaire ne fonctionne pas dans cet environnement de test, elle ne fonctionnera pas avec Brightcove Player.

Mettre en œuvre en utilisant le module des joueurs - section Publicité

Dans cette section du document, vous utiliserez Studio pour mettre en œuvre la publicité en utilisant le La publicité section. Dans ce cas, vous êtes limité aux options fournies par le formulaire. Si vous souhaitez personnaliser l'implémentation en utilisant certaines des nombreuses options disponibles qui ne sont PAS fournies dans cette section, utilisez le Implémenter en utilisant le module Players - Plugins section , qui offre la possibilité de fournir des options via JSON.

Pour implémenter le plugin IMA à l'aide du module Players, procédez comme suit:

1. Ouvrez le JOUEURS module et soit créer un nouveau lecteur, soit localiser le lecteur auquel vous souhaitez ajouter des fonctionnalités publicitaires.
2. Cliquez sur le lien correspondant au lecteur pour ouvrir ses propriétés.
3. Cliquez sur Publicité dans le menu de navigation de gauche.
4. Cochez la case Activer le côté client (IMA).
5. Entrer le Server URL pour le serveur publicitaire.
6. Sélectionnez le Request Ads réglage.
   • On load- Les annonces sont demandées immédiatement lors du chargement du lecteur (c'est normalement la meilleure expérience pour DFP / VPAID).
   • On play- La première demande d'annonce est retardée jusqu'à ce que la lecture soit lancée.
   • On demand- Toutes les demandes d'annonces seront lancées par programmation à l'aide du player.ima3.adrequest() méthode. Ce mode ne prend pas en charge les annonces pré-roll ou postroll.
   • On cue point- Les demandes d'annonces seront lancées sur un point publicitaire envoyé. Voir le Affichage d'annonces à l'aide de points de repère publicitaire document pour plus de détails.
7. Sélectionnez l'annonce VPAID Mode. Le mode VPAID est utilisé pour activer la prise en charge de VPAID 2 dans les annonces IMA.
   • Enabled- Diffusez des annonces VPAID dans une iframe avec un domaine différent
   • Insecure- Diffusez des annonces VPAID dans une iframe avec le même domaine
   • Disabled- Les annonces VPAID génèrent une erreur
8. Met le Timeout valeur. Il s'agit de la durée maximale d'attente, en millisecondes, pour qu'une annonce s'initialise avant la lecture.
9. Faites un choix pour Délais difficiles. Si vous décochez cette option, une publicité à chargement lent pourrait interrompre la lecture vidéo.
10. Définissez le nombre maximal de redirections. Ceci spécifie le nombre maximal de redirections avant que les redirections suivantes ne soient refusées et que la charge publicitaire soit abandonnée. Le nombre de redirections affecte directement la latence et donc l'expérience utilisateur.
11. Pour le Version du plugin , il est fortement recommandé d'utiliser la dernière version.
12. Voir un exemple, formulaire rempli:

    

13. Cliquez sur Save.
14. Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
15. Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.

Lorsque les modifications apportées aux propriétés publicitaires sont enregistrées, le plugin IMA est configuré dans le cadre des paramètres du plugin. Le JavaScript et le CSS seront masqués puisque vous les avez ajoutés via le Advertising section.

Le plug-in IMA prend en charge des propriétés supplémentaires qui ne sont pas disponibles dans cette section de l'interface utilisateur. Voir la section suivante de ce document pour une manière d'utiliser plus d'options de configuration.

Implémenter à l'aide du module Players - section Plugins

Si vous souhaitez configurer le plugin IMA3 au-delà des options fournies dans le La publicité section, vous pouvez utiliser la Plugins section, qui fournit un moyen de fournir des options via JSON.

Pour implémenter le plugin IMA3, vous allez ajouter le nom de la fonction du plugin et les URL aux fichiers JavaScript et CSS du plugin:

1. Ouvrez le module PLAYERS et créez un nouveau lecteur ou localisez le lecteur auquel vous souhaitez ajouter le plugin.
2. Cliquez sur le lien correspondant au lecteur pour ouvrir ses propriétés.
3. Cliquez sur Plugins dans le menu de navigation de gauche.
4. Du Ajouter un plugin liste déroulante, sélectionnez Plugin personnalisé.

   

5. Pour le nom du plugin, entrez ima3.
6. Pour le JavaScript URL, saisissez :

   https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js

7. Pour le CSS URL, saisissez :

   https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css

8. Entrez les options de configuration dans la zone de texte Options (JSON) .

   {
     "serverUrl": "//pubads.g.doubleclick.net/gampad/ads?sz=400x300&iu=%2F6062...",
     "timeout": 5000,
     "debug": true
   }

9. Cliquez sur Save.
10. Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
11. Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.

Notation JSON vs JavaScript

Si vous examinez le Options ci-dessus, vous voyez que les informations de configuration sont fournies au format JSON. Si vous utilisez du code pour implémenter votre plugin IMA3, la notation pour définir les options avec JavaScript est légèrement différente.

Vous voyez ici les options au format JSON que vous pouvez utiliser dans Studio:

{
  "requestMode": "onload",
  "serverUrl": "//solutions.brightcove.com/bcls/brightcove-player/vmap/simple-vmap.xml?cust_params={mediainfo.ad_keys}",
  "timeout": 5000
}

Si vous utilisez JavaScript pour configurer vos options, le format JSON fonctionnera, mais vous pouvez également utiliser la syntaxe JavaScript comme indiqué ici:

{
  requestMode: 'onload',
  serverUrl: '//solutions.brightcove.com/bcls/brightcove-player/vmap/simple-vmap',
  timeout: 5000
}

Options

Le plugin IMA3 video.js est construit au-dessus du Cadre publicitaire video.js et accepte toutes les options fournies par le cadre publicitaire. Jetez un œil au cadre publicitaire LISEZ-MOI pour plus de détails sur l'ensemble actuel de paramètres remplaçables. Les options spécifiques au plugin IMA et les options du cadre publicitaire sont décrites ici.

Les options disponibles sont les suivantes :

• clickTrackingElement
• débogage
• debugContribAds
• disableCustomPlaybackForIOS10Plus
• hardTimeouts
• ima3SdkSettings
• requestMode
• serverUrl
• showVpaidControls
• temps libre
• useMediaCuePoints
• usePlayerAutoplayHandling
• vpaidMode

clickTrackingElement

Type: HTMLElement Valeur par défaut : indéfinie

Si la technologie publicitaire HTML est utilisée dans lecture d'annonces personnalisées mode, cela spécifie un élément HTML alternatif à utiliser pour suivre les taps publicitaires sur les appareils qui ne prennent pas en charge les événements d'entrée sur l'élément vidéo. Plus de détails sont disponibles dans la documentation des paramètres du IMA AdDisplayContainer. Si vous fournissez un élément de suivi des clics, il est de votre responsabilité de l'afficher et de le masquer aux moments appropriés sur les plateformes appropriées. Dans la plupart des cas, il est préférable de laisser ce paramètre indéfini et d'autoriser le plug-in et IMA à gérer l'interaction publicitaire.

débogage

Type: boolean Valeur par défaut : false

Si debug est défini sur true, le framework d'annonces affichera des informations supplémentaires sur son état actuel pendant la lecture. Cela peut être pratique pour diagnostiquer des problèmes ou un comportement inattendu dans une intégration d'annonce.

Cette option fait partie du framework publicitaire et est configurée comme suit :

player.ima3({
  debug: true
});

La capture d'écran suivante montre les informations détaillées affichées en activant le débogage.

debugContribAds

Type: boolean Valeur par défaut : false

Utilisé pour activer la journalisation du débogage pour videojs-contrib-ads. Pour ID3 oncue demandes de travail, la trame ID3 TXXX reçue doit contenir des données JSON avec les champs suivants:

• Format de la balise publicitaire:
  • name: Obligatoire - doit être la chaîne adCue
  • ID : Obligatoire - une valeur unique pour identifier l'annonce étant donné que les heures sont relatives dans les diffusions en direct
  • serverUrl: Facultatif - Remplacez le serverUrl dans la configuration IMA3 pour cette annonce uniquement
  • durée: Facultatif - ajouté en tant que breaklength paramètre à l'url du serveur
  Exemple: {"name": "adCue", "id": 123}
• Format du tag d'annulation d'annonce:
  • name: Obligatoire - doit être la valeur de chaîne adCancel
  • ID : Obligatoire - une valeur unique pour identifier l'annulation de l'annonce étant donné que les heures sont relatives dans les diffusions en direct
  Exemple: {"name": "adCancel", "id": 234}

disableCustomPlaybackForIOS10Plus

Type: boolean Valeur par défaut : false

Cette propriété fait partie du ima3SdkSettings objet. Il agit comme un getter et un setter pour contrôler s'il faut désactiver la lecture personnalisée sur les navigateurs iOS 10+. Le comportement est le suivant:

• Lorsque cette option est définie sur true, les annonces seront lues en ligne si le contenu vidéo est intégré, ce qui permet les annonces désactivables. Cependant, l'annonce restera en ligne et ne prendra pas en charge le plein écran natif d'iOS.
• Lorsqu'elle est fausse, les annonces seront diffusées dans le même lecteur que votre contenu.

Voir le Annonces désactivables iOS section de ce document pour un exemple d'utilisation de ce paramètre.

hardTimeouts

Type: boolean Valeur par défaut : true

Abandonnez les annonces dont le chargement est terminé après expiration du délai. Cela empêchera les annonces de prélancement lentes de s'interrompre après la timeout s'est écoulée et la lecture du contenu vidéo a commencé.

Cette option fait partie du framework publicitaire et est configurée comme suit :

player.ima3({
  hardTimeouts: true
});

Définir cette option sur false entraînera un flash de contenu avant les annonces.

ima3SdkSettings

Type: object Valeur par défaut : indéfinie

S'il est fourni, les propriétés de cet objet sont utilisées pour définir le niveau de page Ima3SdkSettings une fois le chargement du SDK IMA terminé. On s'attend à ce que les propriétés de cet objet soient l'équivalent camel-cased des méthodes setter sur le SDK objet settings, moins le préfixe "set" Par exemple, si vous avez fourni cet objet lors de l'initialisation du plugin:

player.ima3({
  ima3SdkSettings: {
    'numRedirects': 3,
    'ppid': 'publisher-provided-id'
  }
}

Ensuite, le plugin IMA video.js exécuterait un code qui ressemblerait à ceci lorsque IMA aurait chargé:

window.google.ima.ImaSdkSettings.setNumRedirects(3);
window.google.ima.ImaSdkSettings.setPpid('publisher-provided-id');

requestMode

Type: string Valeur par défaut : onload

Cette option fait partie du framework publicitaire est configuré comme suit :

player.ima3({
  requestMode: 'onplay'
});

Il existe quatre valeurs possibles pour cette option:

• onload: Les annonces sont demandées immédiatement lors du chargement du lecteur. Il s'agit normalement de la meilleure expérience pour DFP / VPAID.
• onplay: La première demande d'annonce est retardée jusqu'à ce que la lecture soit lancée. Ceci est important pour les réseaux publicitaires qui considèrent les demandes d'annonces comme des lectures, vous ne voudriez donc pas une demande d'annonce avant une demande de lecture. Cela entraînera la chute des annonces dont le trafficking est effectué, ou le client recevra moins pour les annonces affichées.
• :ondemand Les annonces ne seront lues que lorsqu'elles seront lancées à l'aide player.ima3.adrequest() méthode manuellement. Ce mode ne prend pas en charge les annonces pré-roll ou postroll.
• oncue: Cette option se comporte différemment selon qu'elle est utilisée avec le useMediaCuePoints option.

  Utilisation des points de repère avec Video Cloud

  Vous pouvez créer des points de repère pour une vidéo dans Studio, puis faire jouer une publicité lorsque le point de repère est déclenché. Pour plus de détails, consultez le Afficher des annonces utilisant des points de repère publicitaire document.

  Utilisation de points de repère dans un flux en direct

  Les annonces sont demandées en fonction des points de repère ID3 dans un flux en direct. Pour que ce type de requête fonctionne correctement, la trame ID3 TXXX reçue doit contenir des données JSON avec les champs suivants:

  • :name Obligatoire; doit être la valeur de la chaîne adCue
  • id: Obligatoire; Une valeur unique pour identifier l'annonce étant donné que les heures sont relatives dans les diffusions en direct
  • serverUrl: Optionnel; Ajouté en tant que paramètre de longueur de pause à l'URL du serveur
  • :duration Optionnel; durée de l'annonce

  Exemple :

  {"name": "adCue", "id": 123}

  Vous pouvez également annuler les points de repère ID3 dans un flux en direct créé par un adCue en utilisant adCancel. Le format suivant doit être utilisé pour l'objet envoyé:

  {"name": "adCancel", "id": 123}

  Les deux name et id sont requis.

  • Les repères publicitaires ID3 en direct ne sont pas pris en charge sur Android.
  • Les signaux d'annulation d'annonces ID3 en direct ne sont pas pris en charge sur iOS.

serverUrl

Type: string ou function

Valeur par défaut (une annonce Google générique):

//pubads.g.doubleclick.net/gampad/ads?sz=400x300&iu=%2F6062%2Fiab_vast_samples&ciu_szs=300x250%2C728x90&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1&url=[referrer_url]&correlator=[timestamp]&cust_params=iab_vast_samples%3Dlinear

Ici, vous fournirez l'URL de votre serveur publicitaire. Cette option peut être configurée dans Brightcove Studio comme indiqué ci-dessus. Vous pouvez également définir la valeur dans le code. Deux exemples sont présentés ci-après. (Rappelez-vous, vous devriez tester le tag d'emplacement publicitaire sur votre serveur avant d'essayer de l'utiliser dans le plugin.)

Si la valeur est une chaîne, elle représente l'URL du serveur publicitaire à partir de laquelle les annonces sont demandées et peut être définie dans le code comme suit:

player.ima3({
  serverUrl: 'your ad server'
});

Si la valeur est une fonction, le paramètre de fonction est un callback fonction qui doit être appelée avec l'URL de votre serveur comme argument. Cela prend en charge les processus asynchrones tels que les enchères d'en-tête. Dans l'exemple suivant, vous voyez les informations du mediainfo objet utilisé pour déterminer quelle URL d'annonce doit être utilisée en fonction d'un identifiant de compte:

// Initialize IMA plugin
myPlayer.ima3({
  serverUrl: function(callback) {
    if (myPlayer.mediainfo.id === '4034552795001') {
      callback('https://pubads.g.doubleclick.net/.../url1');
    } else {
      callback('https://pubads.g.doubleclick.net/.../url2');
    }
  },
  requestMode: 'onload',
  debug: true,
  debugContribAds: true
});

showVpaidControls

Type: boolean Valeur par défaut : false

Mis à true pour afficher les commandes Brightcove personnalisées sur les annonces VPAID. Ils peuvent ou non fonctionner en fonction de la mise en œuvre de VPAID, c'est pourquoi Brightcove suggère de tester cette fonctionnalité avec vos annonces avant de l'activer en production.

temps libre

Type: number Valeur par défaut : 4000

Durée maximale, en millisecondes, d'attente de la lecture des annonces avant qu'une coupure publicitaire ne soit ignorée.

Cette option fait partie du framework publicitaire est configuré comme suit :

player.ima3({
  timeout: 5000
});

Lors des tests internes de Brightcove, il a été constaté que quatre secondes semblaient être suffisamment longues pour permettre une initialisation lente dans la plupart des cas, mais suffisamment courtes pour que les échecs d'initialisation ne ressemblent pas à des échecs du lecteur ou du contenu vidéo.

useMediaCuePoints

Type: boolean Valeur par défaut : false

Permet l'utilisation de ad points de repère (tels que définis dans Studio) pour déclencher la lecture d'une annonce.

Pour que les points de repère publicitaires de Video Cloud soient utilisés pour déclencher des publicités, les éléments suivants sont requis dans la configuration du plug-in:

• useMediaCuePoints: vrai
• :requestMode La ficelle oncue
• serverUrl: Doit pointer vers une annonce VAST valide

Si vous utilisez Studio pour configurer la publicité, lorsque vous sélectionnez Au point de repère la useMediaCuePoints et requestMode les options seront définies correctement pour vous.

usePlayerAutoplayHandling

Type: boolean Valeur par défaut : false

Mis à true pour utiliser la gestion de la lecture automatique principale du Brightcove Player. Sinon, utilise la gestion de la lecture automatique par défaut du plug-in IMA3.

vpaidMode

Type: string Valeur par défaut : ENABLED

Spécifiez le mode VPAID 2 dans le SDK IMA HTML5.

Il existe trois valeurs possibles pour cette option:

• :ENABLED Diffusez des annonces VPAID dans une iframe avec un domaine différent.
• :INSECURE Diffusez des annonces VPAID dans une iframe avec le même domaine.
• :DISABLED Les annonces VPAID génèrent une erreur.

Cette option est configurée comme suit:

player.ima3({
  vpaidMode: 'DISABLED'
});

Propriétés

Une seule propriété existe pour le plugin:

• html5: C'est la seule technologie publicitaire qui peut être chargée lorsque le plugin s'initialise.

Macros publicitaires et serverUrl

Des macros publicitaires sont disponibles pour vous faciliter la tâche lors de la création de l'URL du serveur publicitaire. Ces macros vous permettent d'utiliser des variables dans l'URL du serveur pour lesquelles le plugin IMA3 substituera les valeurs appropriées. Par exemple, l'URL du serveur suivant contient certaines des variables:

{"serverUrl": "//myadserver.com/ad?video={mediainfo.id}&duration={player.duration}"}

Les plugins IMA3 remplaceraient les valeurs appropriées, et l'URL du serveur réellement utilisée apparaîtrait comme suit:

{"serverUrl": "//myadserver.com/ad?video=12340001&duration=60"}

Voici la liste complète des variables pour lesquelles des valeurs substituées seront utilisées:

cust_params={mediainfo.ad_keys}

Valeurs par défaut et macros d'annonces

Vous pouvez attribuer des valeurs par défaut aux macros publicitaires. Une valeur par défaut peut être fournie dans une macro, auquel cas cette valeur sera utilisée lorsqu'une variable n'est pas définie. La syntaxe est la suivante :

{macro=default}

Par exemple,

http://example.com/ad/{pageVariable.adConf=1234}

se résoudrait comme suit si elle window.adConf n'est pas définie :

http://example.com/ad/1234

Macros dynamiques

Les macros dynamiques permettent d'accéder aux valeurs suivantes:

• La vidéo customFields objet à travers le mediainfo.customFields variable.
• Les DOM window objet à travers le pageVariable variable.

Par exemple, vous pouvez utiliser les éléments suivants dans votre demande d'annonce:

//myadserver.com/ad?l={pageVariable.navigator.language}&category={mediainfo.customFields.type}

Pour le pageVariable valeurs, seuls certains types de valeurs peuvent être utilisés, comme indiqué dans ce tableau:

Macros TCF

Si une plate-forme de gestion du consentement, ou CMP (essentiellement une gamme de technologies publicitaires réunies en une seule plate-forme facile à utiliser), la prise en charge de la Cadre de transparence et de consentement GDPR (TCF) est en cours d'utilisation, des macros supplémentaires sont disponibles. La syntaxe est {tcf.*}, * étant une propriété de l'objet tcData .

Les macros les plus couramment utilisées sont :

Étant donné que gdprApplies est un booléen et que de nombreux serveurs publicitaires s'attendent à ce que la valeur soit un nombre entier, un {tcf.gdprAppliesInt} supplémentaire est fourni, qui renverra 1 ou 0.

Si le lecteur est dans un iframe, un proxy sera ajouté si l'API TCF est détectée dans n'importe quel frame parent pour obtenir le consentement avec le post-message API. Le CMP doit être chargé avant le lecteur.

Valeurs par défaut dans les macros

Une valeur par défaut peut être fournie dans une macro, auquel cas cette valeur sera utilisée lorsqu'elle n'est pas résoluble, par exemple

http://example.com/ad/{pageVariable.adConf=1234}

http://example.com/ad/1234

si fenêtre.adConf est indéfini.

Macros d'annonces personnalisées

Bien que le Dynamic macros La technique décrite juste ci-dessus est la méthode préférée pour accéder à des informations spécifiques via des macros, vous pouvez avoir défini des valeurs personnalisées que vous utilisez lorsque vous demandez des annonces à votre serveur publicitaire que vous ne pouvez pas atteindre via des macros dynamiques. Dans ce cas, vous pouvez utiliser vos valeurs en remplaçant le adMacroReplacement() méthode. Lorsque vous remplacez cette méthode, cela vous permet de transmettre vos valeurs spécialisées pour la demande d'annonce.

Voici un exemple de remplacement de la adMacroReplacement() méthode. Dans cet exemple, les valeurs personnalisées sont définies dans le cadre du DOM de la page, ce qui permet de personnaliser les demandes d'annonces par page. Dans cet exemple, mySite.category est l'emplacement où les informations de demande d'annonce sont stockées.

brightcovePlayer.ima3.adMacroReplacement = function (url) {
    var parameters = {
    '{category}': mySite.category
  };
  for (var i in parameters) {
    url = url.split(i).join(encodeURIComponent(parameters[i]));
  }
  return url;
}

L'utilisation de valeurs spécifiques aidera à clarifier exactement ce qui se passe. Supposons que l'URL de votre requête vers le serveur publicitaire est la suivante:

//myadserver.com/myads?adWord={category}

Et supposons que la valeur attribuée dynamiquement à mySite.category dans la page se trouve la chaîne fishing-pole. Ensuite, après votre version du adMacroReplacement() est appelée. L'URL de votre demande d'annonce apparaîtra comme suit:

//myadserver.com/myads?adWord=fishing-pole

Pour résumer, lorsque vous remplacez le adMacroReplacement() Cette méthode vous permet d'utiliser des valeurs personnalisées en tant que macros d'annonces et d'attribuer dynamiquement des valeurs à la demande d'annonce d'URL.

Méthodes

Lorsque vous avez besoin d'interagir avec le SDK IMA, vous devez attendre le ima3-ready événement à distribuer avant que l'utilisation réussie du SDK puisse avoir lieu. Cela inclut les deux méthodes suivantes.

player.ima3.adrequest ()

L'appel de cette méthode créera une demande à la demande dès la réception d'une réponse publicitaire. L'appel de cette méthode crée un nouveau gestionnaire d'annonces IMA, ce qui signifie que toutes les informations de réponse d'annonce précédente (par exemple, une annonce postroll renvoyée dans une réponse VAST précédente) seront perdues. Brightcove vous recommande de n'utiliser cette méthode que dans les cas où la connaissance initiale des horaires des annonces n'est pas connue ou vous effectuerez tous les appels d'annonces à la demande. Dans tous les autres cas, il est logique de placer toutes les données publicitaires dans l'appel VAST initial lors de l'initialisation du plugin.

Voici deux points importants à considérer lors de l'utilisation player.ima3.adrequest( ):

• La méthode est à utiliser avec le ondemand mode demande uniquement.
• La méthode n'est pas recommandée pour les prélèvements, car le contenu sera lu avant la fin de la demande d'annonce, ce qui entraînera un flash de contenu.

Paramètres

• adRequestUrl String Chemin vers un tag d'emplacement publicitaire VAST. Vous pouvez et devez transmettre des URL relatives. Ce paramètre est facultatif et le paramètre configuré serverUrl est utilisé si aucun paramètre n'est passé.

Retours :

• Rien

Exemple

player.ima3.adrequest('//pubads.g.doubleclick.net/gampad/ads?sz=640x360&iu=/6062/iab_vast_samples/skippable&ciu_szs=300x250,728x90&impl=s&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1&url=[referrer_url]&correlator=[timestamp]');

player.ima3.setAdsRenderingSettings ()

Cette méthode vous permet de définir les paramètres de rendu des annonces pour le SDK IMA pour HTML5.

S'il n'y a pas encore de gestionnaire d'annonces, cette méthode enregistre vos paramètres et lorsqu'un gestionnaire d'annonces est créé, il utilise les paramètres que vous avez fournis. Si un gestionnaire de publicités existe déjà, il est mis à jour pour utiliser vos paramètres. Dans les deux cas, tout nouveau gestionnaire d'annonces créé à l'avenir utilisera également les paramètres les plus récents que vous avez fournis. Vous pouvez créer un AdsRenderingSettings objet en accédant directement au SDK IMA. Une variété de paramètres sont disponibles.

Paramètres

• google.ima.AdsRenderingSettings objet

Retours :

• Rien

Exemple :

var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.bitrate = 2500;
adsRenderingSettings.enablePreloading = true;
player.ima3.setAdsRenderingSettings(adsRenderingSettings);

Gestionnaire d'annonces Google

Il existe des méthodes et des propriétés disponibles auprès de Google google.ima.AdsManager Interface. Vous pouvez utiliser les propriétés/méthodes de l'interface qui récupèrent des informations. Il n'est pas conseillé d'utiliser les méthodes qui effectuent des actions, comme destroy , setAutoPlayAdBreaks et stop. Par exemple, une méthode que vous pouvez utiliser est illustrée ici :

AdsManager.getRemainingTime

Type: google.ima.AdsManager.getRemainingTime

Usage: myPlayer.ima3.adsManager.getRemainingTime()

L'appel de cette méthode renvoie le temps restant pour l'annonce en cours. Si une annonce n'est pas disponible ou a terminé la lecture, elle renvoie -1. Pour plus d'informations, consultez Google Documentation sur la méthode.

Accéder directement au SDK IMA

Un certain nombre de paramètres IMA sont disponibles sur l'objet plugin au moment de l'exécution. Par exemple, pour déterminer le numéro d'annonce que vous utiliseriez:

var adId = player.ima3.currentAd.getAdId();

Soyez prudent en interagissant directement avec ces propriétés. L'appel de la mauvaise méthode peut entraîner des résultats inattendus et l'échec de la lecture des publicités.

adsLoader

Type: google.ima.AdsLoader

Objet utilisé pour créer des demandes d'annonces. Voir ima.AdsLoader. Le chargeur d'annonces peut ne pas être disponible avant adsready a été déclenché par le plugin.

adsManager

Type: google.ima.AdsManager

L'objet responsable de la lecture des publicités. Voir ima.AdsManager. Le gestionnaire d'annonces n'est pas disponible avant adsready a été déclenché par le plugin.

adDisplayContainer

Type: google.ima.AdDisplayContainer

L'objet responsable de la gestion des éléments d'affichage des publicités. Voir ima.AdDisplayContainer. Le conteneur Ads Display peut ne pas être disponible avant adsready a été déclenché par le plugin.

currentAd

Type: google.ima.Ad

Lorsqu'une annonce est en cours de lecture, un objet qui encapsule des informations sur l'annonce actuelle. Voir ima.Ad.

Evénements

Le plugin émet certains types d'événements personnalisés lors du chargement, de l'initialisation et de la lecture. Vous pouvez écouter les événements IMA3 et du cadre publicitaire comme vous le feriez pour tout autre événement:

player.on('ima3-ready', function(event) {
  console.log('event', event);
});

Ré-expédié ima3- événements préfixés

Lorsque le plugin IMA3 est utilisé en mode HTML, tous AdErrorEvents , AdEvents et AdsManagerLoadedEvents sont redistribués sur le joueur. Lorsque les événements sont redistribués, ils sont précédés du préfixe ima3-. Le tableau suivant présente les événements redistribués:

Vidéo en direct et IMA3

Si vous utilisez la version 3.1.0+ du plugin IMA3, vous pouvez utiliser des pré-rolls avec un événement en direct. Le pré-roll sera lu lorsque chaque spectateur commencera à regarder l'événement en direct, et non la seule fois où l'événement en direct commencera. Lors de la configuration de votre événement dans le module Live, comme indiqué dans le Création et gestion d'événements en direct à l'aide du module en direct document, vous êtes invité à sélectionner un lecteur. Vous voudrez configurer la publicité pour le joueur que vous sélectionnez, comme indiqué dans la Pas à pas: Mise en œuvre de la publicité document.

Notez les détails suivants de l'implémentation:

• Seuls les pré-rolls joueront. Les annonces vidéo mid-roll et post-roll ne sont pas prises en charge.
• le Request Ads le type doit être soit On load ou On play.
• Vous devez utiliser la version 3.1.0 or later du plugin IMA3, comme mentionné précédemment.

Bibliothèques publicitaires pour joueurs

Les videojs/videojs-contrib-annonces Le référentiel GitHub contient un plugin qui fournit les fonctionnalités communes nécessaires aux bibliothèques de publicité vidéo fonctionnant avec Brightcove Player. Le plugin fournit des fonctionnalités communes requises par les intégrations de publicités vidéo et prend en charge un certain nombre de préoccupations pour les intégrateurs de publicités, réduisant ainsi le code que vous devez écrire pour l'intégration de vos annonces. Le plugin est entièrement documenté, avec un sommaire comme meilleur point de départ.

Il existe des méthodes, des événements et des propriétés utilisables à partir du plugin. Tous les détails sont fournis dans le Informations de référence sur l'API videojs-contrib-ads. Un échantillon des outils disponibles est fourni ici, en commençant par les méthodes:

Le plugin envoie également de nombreux événements, dont quelques-uns sont répertoriés ici:

Le plugin fournit également de nombreuses propriétés, dont quelques-unes sont répertoriées ici:

Le code suivant illustre l'utilisation des propriétés :

var myPlayer,
  player = bc('myPlayerID');
player.ima3({
  serverUrl: '//solutions.brightcove.com/bcls/brightcove-player/vmap/simple-vmap.xml'
});
player.ready(function () {
  myPlayer = this;
  myPlayer.on('ads-ad-started', function (evt) {
    console.log('ads-ad-started event passed to event handler', evt);
    console.log('myPlayer.ads.ad.id', myPlayer.ads.ad.id);
    console.log('myPlayer.ads.ad.index', myPlayer.ads.ad.index);
    console.log('myPlayer.ads.ad.duration', myPlayer.ads.ad.duration);
    console.log('myPlayer.ads.ad.type', myPlayer.ads.ad.type);
  });
});

La sortie de la console à partir du code ci-dessus est affichée ici :

Implémenter à l'aide

Pour implémenter le plugin IMA3, le lecteur doit connaître l'emplacement du code du plugin, une feuille de style, le nom du plugin et les options de configuration du plugin. L'emplacement du code et de la feuille de style du plugin est le suivant :

https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js

https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css

Le nom du plugin est ima3 , et un exemple d'ensemble d'options est:

{
  "serverUrl": "//pubads.g.doubleclick.net/gampad/ads?sz=400x300&iu=%2F6062...",
  "timeout": 5000
}

L'exemple suivant utilise l'implémentation In-Page Embed du lecteur pour associer le plug-in IMA à une seule instance d'un lecteur.

• Ligne 12 : link Utilise une balise pour inclure le CSS head du plugin dans la page HTML.
• Ligne 15 : Donne à la video balise un id attribut, avec une certaine valeur, dans ce cas myPlayerID.
• Ligne 23 : script Utilise une balise pour inclure le JavaScript body du plugin dans la page HTML.
• Lignes 26-29: Initialise le lecteur à l'aide du bc() méthode, puis appelle la ima3() méthode.
• Lignes 30-33: Sur le joueur ready , une référence au lecteur est créée. Le commentaire est affiché pour indiquer où vous pouvez placer le code pour ajouter d'autres comportements de joueur au-delà de la configuration et de la configuration du plugin IMA3.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>IMA3 Plugin Code Example</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>
  <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet">
</head>
<body>
  <video-js id="myPlayerID"
    data-video-id="3851380732001"
    data-account="1752604059001"
    data-player="Hy3gDJHu"
    data-embed="default"
    controls=""></video-js>
  <script src="https://players.brightcove.net/1752604059001/Hy3gDJHu_default/index.min.js"></script>
  <script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>
  <script>
    var myPlayer;
    var player = bc('myPlayerID');
    player.ima3({
      serverUrl: '//solutions.brightcove.com/bcls/brightcove-player/vmap/simple-vmap.xml'
    });
    player.ready(function() {
      myPlayer = this;
      //Do something
    });
  </script>
</body>
</html>

Implémentation hybride

Jusqu'à présent dans ce document vous avez vu le plugin IMA implémenté dans Studio, puis dans le code. Certains clients aiment effectuer une implémentation hybride où le plugin de base est ajouté dans Studio, mais ensuite la configuration est effectuée dans le JavaScript de la page. Cette implémentation hybride est abordée dans cette section.

Comme vous venez de le voir dans la section précédente, lors de l'implémentation du plugin IMA3 purement en code, vous manipulez le plugin au format fonction. Lorsque vous installez le plugin dans Studio, puis configurez dans la page, vous devez traiter le plugin comme un objet. Par exemple, supposons que vous avez installé le plugin IMA3 à l'aide de Studio comme indiqué ici, en notant Tag publicitaire est fourni:

Maintenant, dans le JavaScript de la page, vous pouvez attribuer des valeurs de propriété (rappelez-vous, traitez le plugin comme un objet maintenant) comme indiqué ici:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  myPlayer.ima3.settings.serverUrl = 'http://solutions.brightcove.com/bcls/brightcove-player/vmap/simple-vmap.xml';
});

Bien entendu, d'autres propriétés peuvent recevoir des valeurs de cette manière.

Aide au débogage

Il existe deux options d'assistance lors du débogage des problèmes de lecture des annonces. Si vous ne faites rien, dans la console, vous ne verrez que des informations sur le début et la fin des annonces:

La première option est mentionnée plus haut dans ce document dans le Options section. Cela active le débogage au niveau du plugin. Vous verrez des informations de débogage supplémentaires:

La deuxième option utilise un outil fourni par Google. Vous spécifiez un sdkurl option avec une valeur pointant vers un fichier JavaScript fourni par Google. Un exemple de configuration est présenté ici:

var myPlayer = bc('myPlayerID');
myPlayer.ima3({
  "serverUrl": "//solutions.brightcove.com/bcls/brightcove-player/vmap/simple-vmap.xml",
  "debug": true,
  "sdkurl": "//imasdk.googleapis.com/js/sdkloader/ima3_debug.js"
});
myPlayer.ready(function() {
  myPlayer = this;
});

Les informations de débogage développées ressembleraient aux suivantes. (Les informations surlignées en jaune proviennent du débogage du plugin et les informations surlignées en bleu sont générées par l'outil Google.)

Pour plus de détails sur les erreurs IMA de Google, consultez le Classe google.ima.AdError section de Google Google IMA HTML5 SDK APIs document.

Problèmes connus

Picture-in-Picture désactivé

le contrôle d'image dans l'image désactivé lorsque le plugin IMA3 est implémenté. Il s'agit d'une décision de conception intentionnelle.

Définition de la lecture automatique dans Studio

Ne définissez PAS la lecture automatique dans Studio si vous utilisez le plug-in IMA3 pour afficher des publicités. La configuration de la lecture automatique dans Studio peut entraîner un échec de lecture des annonces. Voir le Considérations relatives à la lecture automatique document pour plus d'informations.

Apprendre encore plus et Compte à rebours des annonces n'est plus affiché par défaut

Un contournement existe en utilisant le useStyledLinearAds propriété du SDK IMA de Google. Définissez cette valeur sur true, comme indiqué ici:

adsRenderingSettings.useStyledLinearAds=true;

Pour plus de détails, voir Google google.ima.AdsRenderingSettings Documentation.

Chrome sur Android: Activer le pré-roll, la vidéo ne sera pas lue automatiquement

Lorsque vous utilisez Chrome (dernière version) sur Android et réactivez le lecteur pendant la lecture du pre-roll, le lecteur ne démarre pas automatiquement la lecture d'une vidéo après la fin du pre-roll. Si vous réactivez le son de l'annonce, la fonction de persistance du volume de Brightcove Player réactivera également le contenu puisque l'intention du spectateur est d'entendre l'audio. Cependant, sur les versions plus récentes de Chrome Android, le contenu non désactivé ne peut pas être lu automatiquement et l'exigence de geste de l'utilisateur pour commencer la lecture a été ajoutée. Il s'agit d'un paramètre au niveau du système d'exploitation / de l'appareil et non quelque chose que Brightcove peut remplacer.

L'affichage de l'heure actuelle de Preroll peut ne pas être précis

Ce problème est lié à une limitation de la manière dont le SDK IMA signale l'heure actuelle. Il n'y a aucun travail autour documenté pour le moment.

Les midrolls non muets peuvent ne pas être lus sur Safari 11 Desktop

Les midrolls non muets peuvent ne pas être lus sur Safari 11 Desktop en raison d'un changement dans le SDK IMA de Google. Un nouveau comportement a été introduit pour déclencher une erreur et annuler une annonce lorsque la lecture automatique est rejetée par Safari 11 (bureau et éventuellement iOS). Les midrolls concernés de cette manière déclenchent une erreur publicitaire 400, le code d'erreur 1205 indiquant que la lecture automatique a été empêchée.

Environnements pris en charge

Pour vérifier les combinaisons prises en charge de plates-formes, de normes publicitaires et de supports vidéo, consultez Google Fonction vidéo et compatibilité SDK document. Ce document et le Inspecteur de la suite vidéo vous aidera à diagnostiquer les configurations de publicité IMA3 qui ne fonctionneront tout simplement pas.

Superpositions et transitions plein écran

video.js utilise le API plein écran le cas échéant. Différents navigateurs implémentent la transition vers le plein écran différemment et cela peut produire des différences d'apparence lors de la transition vers et hors du mode plein écran. Dans la plupart des implémentations, l'élément qui est pris en plein écran est géométriquement mis à l'échelle (c'est-à-dire zoomé) de sa taille d'origine à la taille cible. Cependant, la plupart des publicités en superposition sont conçues pour être affichées à une taille fixe et peuvent donc apparaître déformées jusqu'à la fin de l'animation.

Annonces désactivables sur les appareils iOS

Avec le plug-in IMA3, les publicités désactivables peuvent être lues sur les iPhones lorsque les conditions suivantes sont remplies:

• le playsinline l'attribut est présent sur le video élément
• le disableCustomPlaybackForIOS10Plus le paramètre est transmis au plugin et défini sur true

Pour le playsinline attribut, incluez-le simplement comme attribut dans le video marque:

<video-js id="player"
  width="640"
  height="360"
  data-video-id="4524585416001"
  data-account="4360108595001"
  data-player="r12ukws9l"
  data-embed="default"
  playsinline
  controls=""></video-js>

Pour le disableCustomPlaybackForIOS10Plus réglage, attribuez-le comme propriété de ima3SdkSettings:

player.ima3({
  ima3SdkSettings: {
    "disableCustomPlaybackForIOS10Plus": true
  }
})

Si vous utilisez Studio et souhaitez utiliser le paramètre là-bas, ajoutez ceci à la configuration de votre plugin IMA3:

{
  "ima3SdkSettings": {
    "disableCustomPlaybackForIOS10Plus": true
  }
}

Pour plus de détails sur ce paramètre, consultez le disableCustomPlaybackForIOS10Plus entrée dans le ima3SdkSettings section de ce document.

Skippable ad limitations:

• le Skip Ad bouton peut être partiellement couvert par la barre de contrôle des annonces sur certains appareils mobiles. Cela rend difficile pour les utilisateurs finaux de sauter l'annonce. L'utilisateur peut pincer pour zoomer pour faire Skip Ad bouton plus gros sur les appareils mobiles pour pouvoir cliquer dessus.
• iPhone sans pour autant playsinline et disableCustomPlaybackForIOS10Plus - Les annonces désactivables ne sont pas lues.
• iPhone avec playsinline et disableCustomPlaybackForIOS10Plus - Les annonces sont lues en ligne, mais si vous utilisez le plein écran, les annonces ne s'affichent pas, mais l'audio de l'annonce sera lu. En d'autres termes, les publicités désactivables en plein écran ne fonctionnent pas correctement.
• iPad- Les annonces sont lues en ligne, mais le saut n'est pas disponible en mode plein écran

iPad et iPhone iOS 10: Les annonces Preroll ne fonctionnent pas lors de l'utilisation playsinline et passe en plein écran

Si vous utilisez playsinline sur iOS 10 iPad et iPhone pour permettre la visualisation d'une vidéo non en plein écran, puis une annonce pré-roll démarre et le bouton plein écran est cliqué, l'annonce ne continuera PAS à jouer. Il s'agit d'une limitation de la mise en œuvre IMA de Google, et Google n'a pas l'intention de corriger le problème.

Conflit avec gpt_proxy.js

Si vous utilisez le script de proxy GPT avec IMA3, et adTechOrder est HTML5 tout d'abord, des problèmes de lecture peuvent survenir. Le plugin IMA3 sera affecté lors de l'utilisation de tout script utilisant window.google ou window.google.ima. Il est suggéré de vérifier si vous utilisez Brightcove Player et, si tel est le cas, de ne pas charger le proxy à ces occasions.

Redimensionner Skip Ad bouton

Il n'est pas possible de redimensionner Skip Ad bouton. L'API Brightcove Player n'a pas de méthodes ou de propriétés pour spécifier la taille du Skip Ad bouton. Au niveau du développeur, si un éditeur utilise des annonces VPAID, les annonces peuvent mettre en œuvre leurs propres Skip Ad bouton et logique pour s'adapter à l'interface utilisateur et à la distribution des éléments de Brightcove Player.

Les annonces ne seront pas lues automatiquement sur iOS

Bien que non spécifique au plugin IMA3, sachez que autoplay est limité à iOS, de sorte que les publicités ne commenceront pas tant qu'un geste de l'utilisateur n'aura pas été effectué.

Problèmes liés aux points publicitaires

Pour les problèmes spécifiques à l'utilisation des points de repère, consultez Known issues section de la Affichage d'annonces à l'aide de points de repère publicitaire document.

SDK IMA3 URL paramètre

Google Ad Manager URL Le paramètre est l'URL complète à partir de laquelle la demande d'annonce est envoyée. Notez que cette valeur est automatiquement définie par le SDK IMA et écrasera en fait toutes les valeurs que vous pourriez fournir.

Changelog

Voir le Notes de version du plug-in IMA3.

Pour les notes de version historiques, voir le changelog ici.