Étape 1 : Ajouter des vidéos et des métriques de suivi

Vous pouvez ajouter une vidéo à une création Studio. Pour l'ajouter, le meilleur moyen consiste à utiliser la balise HTML5 <video>.

Si vous concevez une création Studio pour la première fois, consultez les guides de conception de créations HTML5.

À noter

Lorsque vous ajoutez un élément vidéo à votre création, des frais de diffusion d'annonce vidéo s'appliquent. Si vous avez l'intention d'utiliser une vidéo dans votre création, n'incluez aucun élément vidéo.

Ajouter une vidéo dans une création

Créez un élément vidéo dans une création en ajoutant le tag "video" au fichier HTML. Attribuez un ID à votre élément, par exemple, video1. Définissez la position et la taille de la vidéo à l'aide de code CSS. Ajoutez ensuite un identifiant de rapport unique à la vidéo afin de faire correspondre les métriques avec la vidéo dans les rapports sur les campagnes.

Étape 1 : Ajoutez un élément vidéo et du code JavaScript

Créez un élément vidéo dans une création en ajoutant le tag "video" au fichier HTML. Attribuez un ID à votre élément, par exemple, video1. Au lieu de définir directement la source de la vidéo, utilisez le composant Enabler pour obtenir l'URL de fichier correcte à utiliser lorsque l'annonce est diffusée sur les ad servers de Google.

Consultez l'exemple de code ci-dessous. Il effectue les opérations suivantes :

1. Ajoute un élément vidéo dans un fichier HTML.
2. Charge le composant Enabler de Studio.
3. Crée une fonction permettant de charger l'URL de vidéo appropriée. Lorsque vous effectuez un test en local, vous pouvez charger votre fichier local directement. Lorsque l'annonce est en ligne, vous devez utiliser le composant Enabler pour charger le fichier vidéo.
4. Crée une fonction qui configure l'élément vidéo et la source, puis lit la vidéo.
5. Crée une fonction qui attend l'initialisation du composant Enabler, puis qui charge l'annonce.

Exemple de tag <video> avec JavaScript

<video id="video1" muted playsinline></video>

<script src="https://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script>
<script type="text/javascript">
  (function() {
    function getVideoUrl(filename) {
      if (Enabler.isServingInLiveEnvironment()) {
        return Enabler.getUrl(filename);
      } else {
        return filename;
      }
    }

    function initAd() {
      var video = document.getElementById("video1");
      var source = document.createElement('source')
      source.setAttribute('type', 'video/webm; codecs=vp9')
      source.setAttribute('src', getVideoUrl('video.webm'))
      video.appendChild(source);
      video.play();
    }

    window.onload = function() {
      var isInitialized = Enabler.isInitialized();
      isInitialized ? initAd() : Enabler.addEventListener(studio.events.StudioEvent.INIT, initAd);
    }
  }());
</script>

Remarques

• Un tag "video" est un élément HTML5 qui ne fait pas partie du composant Enabler de Studio. Pour en savoir plus, consultez la référence concernant la balise <video> de W3School.
• L'attribut playsinline lit la vidéo dans la bannière sur iOS, et non en mode plein écran. Afin d'optimiser l'expérience utilisateur, nous vous recommandons de toujours inclure cet attribut.

Étape 2 : Ajoutez du code CSS pour appliquer un style à votre vidéo

Ajoutez du code CSS pour définir la taille et la position de l'élément vidéo.

Exemple de style et d'ID dans le fichier CSS

#video1 {
  position: absolute;
  width: 205px;
  height: 154px;
}

Étape 3 : Ajoutez un identifiant de rapport

Pour suivre les métriques sur les vidéos, chargez le module vidéo du composant Enabler et associez un identifiant de rapport. Cela permet de mettre en correspondance les métriques des rapports avec la vidéo appropriée dans les rapports sur les campagnes et de connaître la durée de visionnage de la vidéo au moment où l'annonce est diffusée.

var video1 = document.getElementById('video1');

Enabler.loadModule(studio.module.ModuleId.VIDEO, function() {
  studio.video.Reporter.attach('video_1', video1);
});