Partager via

Didacticiel vidéo sur MRAID et mobile

Cette page offre une introduction à MRAID et à la vidéo mobile. Il tente de répondre à des questions telles que :

  • Qu’est-ce que MRAID ? Comment fonctionne-t-il et comment l’utiliser ?
  • Quelle est la relation entre MRAID et la vidéo mobile ?
  • Quelles sont les différentes façons d’exécuter la vidéo mobile ?
  • Quelles sont les fonctionnalités vidéo de la publicité web mobile par rapport à la publicité in-app ?

MRAID

Dans cette section, nous allons parler de ce qu’est MRAID et de ce qu’il peut faire en combinaison avec HTML et JavaScript. Nous allons également parler de ce que n’est pas MRAID.

Définition MRAID

MRAID est souvent utilisé comme mot à la mode pour décrire les créatifs multimédias riches mobiles. En réalité, MRAID est une technologie conçue pour un cas d’usage spécifique (publicité in-app) avec certaines fonctionnalités spécifiques. Cette vue d’ensemble vous aidera à mieux comprendre cette technologie. Après avoir lu cette page, vous devriez être en mesure de répondre à des questions telles que :

  • Xandr prend-il en charge MRAID ?
  • Ai-je besoin de MRAID pour ce comportement ?
  • Puis-je exécuter une création MRAID sur cet inventaire ?

Description MRAID de l’IAB

MRAID, ou « Mobile Rich Media Ad Interface Definitions » est le projet du Centre d’excellence du marketing mobile IAB visant à définir une API commune (Interface de programmation d’applications) pour les publicités multimédias riches mobilesqui s’exécuterontdans les applications mobiles . Il s’agit d’un ensemble standardisé de commandes, conçues pour fonctionner avec HTML5 et JavaScript , que les développeurs qui créent des publicités multimédia enrichies utiliseront pour communiquer ce que font ces publicités (développer, redimensionner, accéder aux fonctionnalités de l’appareil telles que les événements de calendrier, etc.) avec les applications dans lesquelles elles sont servies.

Examinons les parties indiquées ci-dessus en gras :

  • API commune - MRAID est un jeu de commandes courant que les développeurs créatifs peuvent utiliser. Toutes les applications qui prennent en charge MRAID prennent en charge les mêmes commandes courantes afin que toute création qui utilise une fonctionnalité MRAID s’exécute correctement dans différentes applications et différents appareils utilisant le même code créatif.
  • Publicités multimédia enrichies mobiles qui s’exécuterontdans les applications mobiles : MRAID est uniquement pertinent pour les créations multimédias riches mobiles qui s’exécutent dans un environnement intégré à l’application. MRAID n’est pas pertinent pour l’environnement web mobile.
  • Conçu pour fonctionner avec HTML5 et JavaScript : MRAID n’est pas conçu pour remplacer HTML5 et JavaScript. Il est conçu pour permettre aux créatifs qui utilisent JavaScript d’interagir avec le système d’exploitation natif qui exécute l’application dans laquelle la création est affichée.

Remarque

Tout le contenu de ce document fait référence à MRAID 2.0. Vous pouvez télécharger la spécification complète ici.

Cas d’usage de MRAID

Pour expliquer la nécessité de MRAID, nous devons examiner les deux main cas d’usage dans lesquels les publicités sont affichées sur les appareils mobiles ; Web mobile et in-app. Il y a une différence fondamentale dans les technologies impliquées dans les deux cas, et cette différence crée le besoin de MRAID.

Web mobile

Le web mobile est pratiquement identique au web de bureau. Les sites web mobiles exécutent le même code HTML5 et JavaScript que les sites de bureau, avec une conception optimisée pour les appareils mobiles. Cela signifie que l’inventaire web mobile est un iframe (page web) de taille publicitaire s’exécutant dans une page web de taille réelle :

Capture d’écran du web mobile.

Dans le web mobile, l’annonce et le conteneur qu’elle exécute dans (le navigateur) « parlent » html5/JS, afin qu’ils puissent communiquer librement entre eux. Le créatif peut demander à la page web d’effectuer des actions sur l’iframe, telles que modifier sa taille (développer).

In-App

L’inventaire dans l’application est fondamentalement différent du web mobile, car l’application dans laquelle le créatif est affiché n’exécute pas HTML5 et JavaScript. Au lieu de cela, il exécute le code natif du système d’exploitation des appareils (Objective-C pour iOS, Java pour Android). Le contenu créatif s’affiche dans un conteneur appelé WebView, qui est une page web entièrement fonctionnelle et de taille publicitaire qui exécute HTML5 et JavaScript :

Capture d’écran de Dans l’application.

Dans ce cas, le créatif et le conteneur dans lequel il s’exécute (l’application) ne peuvent pas se parler, car le créatif parle uniquement html5/JS et l’application parle uniquement Objective-C ou Java. C’est là qu’intervient MRAID. MRAID définit un ensemble de commandes qui permet au créatif d’utiliser JavaScript pour communiquer avec le code natif de l’application et lui demander d’effectuer diverses actions.

Le diagramme ci-dessous illustre la relation entre le créatif qui utilise HTML5/JS, MRAID et l’application qui s’exécute en code natif.

Capture d’écran de la création qui utilise HTML5/JS, MRAID et l’application qui s’exécute en code natif.

La main chose à retenir est que HTML5/JS et MRAID ne sont pas des technologies qui s’excluent mutuellement. MRAID a été conçu pour permettre aux créatifs d’utiliser HTML5/JS pour communiquer avec des applications mobiles natives.

Fonctionnalité MRAID

La fonctionnalité main de MRAID consiste à permettre à un créatif qui s’exécute sur l’inventaire in-app de modifier sa taille, d’obtenir des informations sur sa position sur l’écran et sur la taille de l’écran. Des fonctions supplémentaires permettent au créatif de stocker des photos dans la mémoire de l’appareil, de créer un événement de calendrier et d’accéder au lecteur vidéo natif.

Voici la liste de toutes les méthodes disponibles dans l’API définie par MRAID, regroupées par fonctionnalité :

Méthodes utilisées pour le changement/l’expansion de taille Autres fonctionnalités de l’interface utilisateur Fonctionnalités autres que l’interface utilisateur
-Proche
-Développer
-Redimensionner
- getCurrentPosition
- getDefaultPosition
- getMaxSize
- getResizeProperties
- getScreenSize
- getState
- setExpandProperties
- setResizeProperties
- useCustomClose		 -Ouvert
- createCalendarEvent
- playVideo
- storePicture		 -Addeventlistener
- getPlacementType
- getVersion
- isViewable
- removeEventListener
-Soutient

Il est facile de voir que 50 % des méthodes définies par MRAID sont liées aux changements de taille. Il s’agit d’un résultat direct de l’incapacité du créatif à communiquer directement avec l’application comme il le fait avec le navigateur sur le web mobile et de bureau.

Selon les méthodes répertoriées ci-dessus, l’utilisateur peut voir quatre choses :

  • MRAID permet au créatif de modifier sa taille et de demander des informations sur la taille de l’écran, sa position sur l’écran et s’il est actuellement visible.
  • MRAID permet aux créatifs d’accéder au lecteur vidéo natif de l’appareil.
  • MRAID permet aux créatifs de stocker des photos dans la mémoire permanente de l’appareil.
  • MRAID permet aux créatifs d’accéder au calendrier pour créer des événements de calendrier.

Résumé MRAID

Tous les autres trucs de fantaisie que vous avez peut-être vu les créatifs multimédias mobiles faire comme le dessin, les jeux et les sons est fait en HTML5 et JavaScript. Ce comportement n’est pas le résultat de MRAID. La raison pour laquelle ces créatifs sont souvent appelés créateurs MRAID est que MRAID est devenu un synonyme de « Mobile Rich Media » créatif. La raison en est que ces créatifs doivent généralement s’étendre pour révéler cette fonctionnalité supplémentaire, et pour développer, ils doivent utiliser MRAID.

  • Tous les éléments créatifs qui utilisent l’API MRAID sont des créatifs multimédias mobiles, in-app et riches.
  • Toutes les créations multimédias riches mobiles n’utilisent pas les fonctionnalités fournies par MRAID (par exemple, les créations s’exécutant sur le web mobile).

Vidéo mobile

Il existe plusieurs façons de lire une vidéo sur un appareil mobile, chacune avec ses propres fonctionnalités et comportements. Vous pouvez voir comment les vidéos MRAID et HTML5 se comportent en chargeant l’ID de placement 2579103, taille 300 x 250, dans l’application sdk. Le code de chaque création est décrit ci-dessous.

Kit de développement logiciel (SDK) publicitaire

Avant de continuer, quelques mots sur le terme « Kit de développement logiciel (SDK) publicitaire » utilisé ci-dessous. Un Kit de développement logiciel (SDK) est un élément de code qui permet aux développeurs d’applications d’afficher facilement des publicités dans leurs applications. Les deux rôles main que les Kits de développement logiciel (SDK) publicitaires effectuent sont les suivants :

  • Gérez les communications avec le serveur publicitaire et affichez la publicité dans l’espace alloué par l’application (WebView).
  • Implémenter l’API MRAID

Pour plus d’informations sur nos Kits de développement logiciel (SDK) mobiles, consultez Kits de développement logiciel (SDK) Xandr Mobile

Vidéo MRAID

Il s’agit en fait de la façon la plus simple de lire automatiquement une vidéo, mais elle présente un inconvénient important, car il est impossible de définir un clic sur la vidéo. Autrement dit, les utilisateurs ne peuvent pas cliquer sur la vidéo et être redirigés vers le site web de l’annonceur. La raison de cet inconvénient est que l’utilisation de MRAID pour lire une vidéo ouvre la vidéo dans le lecteur natif de l’appareil, qui n’est pas une page web et ne prend donc pas en charge les clics. C’est pourquoi lorsque vous cliquez sur une vidéo en cours de lecture à l’aide de MRAID, vous voyez les contrôles du lecteur. Voici un exemple simple de travail d’une vidéo MRAID d’un chien :

<script src="mraid.js"></script>
<script type="text/javascript">
mraid.addEventListener('ready', function() { 
  mraid.playVideo("http://v.madnxs.com/p/e0/16/69/e6/e01669e619d6424f6b7e4597092764e3.m4v")
});
</script>

Vidéo HTML5

Une chose que toutes les publicités mobiles ont en commun est qu’elles s’exécutent dans les navigateurs web réels. L’iFrame d’une page web mobile et le WebView s’exécutant dans une application mobile native sont des navigateurs web entièrement fonctionnels et disposent donc d’une prise en charge complète de HTML5. HTML5 prend en charge la lecture de vidéos dans le navigateur sans nécessiter de lecteur externe. Toutefois, iOS et Android ont des comportements et des implémentations différents pour la vidéo HTML5. Voici un exemple de code d’une vidéo HTML5 de travail d’un chat.

<body>
<video id="videoAd" width="300" height="250" autoplay controls muted webkit-playsinline poster="http://cdn.adnxs.com/p/20/0e/21/96/200e2196675e9ca10e89f5b63c127935.png" onclick="click_thru">
<source src="http://v.madnxs.com/p/23/35/06/3b/2335063b4a2d9871922f60bca7d97a66.m4v" type="video/mp4">
Your browser does not support the video tag.
<script type="text/javascript">
//code to *handle* click event on Android and iOS
function click_thru() {
  document.getElementbyId("videoAd").pause(); 
  window.open("http://www.appnexus.com"); 
}
//code to *catch* the click event on iOS
document.getElementById("videoAd").addEventListener('touchstart', click_thru);
</script>
</video>
</body>

Complications potentielles avec la vidéo HTML5

  • Les appareils exécutant Android 4.4+ ou iOS 6+ n’autorisent pas la lecture automatique des vidéos HTML5 par défaut. Cela signifie que les développeurs doivent ajouter l’attribut controls à l’élément <video> afin que le lecteur vidéo affiche les contrôles lecture/pause, barre de recherche et muet afin que l’utilisateur puisse lancer et interagir avec la vidéo. Bien que le comportement de lecture automatique puisse être contrôlé par le KIT de développement logiciel (SDK) publicitaire en cours d’exécution dans l’application, il ne résout pas le problème de l’inventaire web mobile et ne promet pas un comportement cohérent pour les créatifs sur différentes applications exécutant différents KITS de développement logiciel (SDK) publicitaires.

    Remarque

    Le Kit de développement logiciel (SDK) Xandr prend en charge la lecture automatique des vidéos HTML5, ce qui correspond au comportement que vous verrez lors de l’utilisation de l’application SDK. Toutefois, un navigateur mobile sur le même appareil ne lira pas automatiquement la vidéo.

  • Les vidéos iPhone et iPad en plein écran ne prennent pas en charge le clic, car elles s’exécutent dans le lecteur vidéo natif de l’appareil et non dans un navigateur web (un iFrame/WebView). Les appareils Android prennent en charge les clics sur les vidéos en plein écran.

  • Il est possible d’utiliser le clic pour une exécution créative dans un environnement in-app sur iPhones uniquement en n’autorisant pas la vidéo à passer en plein écran. Cela nécessite l’ajout de l’attribut webkit-playsinlineà l’élément et l’activation <video> de la lecture inline dans le Kit de développement logiciel (SDK) publicitaire. Cette implémentation n’est pas standard et ne promet pas un comportement cohérent pour les créatifs entre différentes applications exécutant différents SDK publicitaires.

  • Par défaut, les téléphones et tablettes Android et les iPad lisant des vidéos HTML5, aucune modification n’est nécessaire pour utiliser la fonctionnalité cliquée.

  • Il n’est pas possible de visionner automatiquement des vidéos HTML5 dans l’inventaire web mobile dans Android et iOS en même temps.

Lecteurs vidéo incorporés

C’est l’option la plus polyvalente. Gardez à l’esprit qu’il dépend du KIT de développement logiciel (SDK) et non standard. Si le KIT de développement logiciel (SDK) publicitaire qui s’exécute dans l’application inclut un lecteur vidéo, le KIT de développement logiciel (SDK) publicitaire peut diriger l’appel mraid.playVideo() vers ce lecteur et y inclure une URL de clic. Toutefois, étant donné que cette API n’est pas définie dans MRAID, il n’existe aucune garantie que la publicité s’exécute de la même façon sur différentes applications.