¶ Description
Le Videofeed par Digiteka vous propose une nouvelle façon innovante d'intégrer vos vidéos à vos environnement mobiles Web et applicatifs ainsi que Desktop.
Pour la documentation relative aux intégrations dans les environnements applicatifs, merci de consulter cette page dédiée.
¶ Intégration Web Mobile
¶ Script requis
Pour afficher l'environnement Videofeed, vous devrez intégrer le script suivant sur la page depuis laquelle l'expérience devra être lancée.
<script defer src="//videofeed.digiteka.com/launcher.min.js"></script>
<script type="text/javascript">
MDTK_videofeed = "[MDTK]";
</script>Nous recommandons que ce script soit intégré directement dans la balise <head> du code HTML, l'attribut defer ou async rend le chargement de ce script asynchrone.
La valeur de la variable [MDTK] vous sera communiquée par les équipes Digiteka et devra donc être adaptée lors de votre intégration.
¶ Lancement de l'expérience Videofeed
Le lancement de l'expérience verticale Videofeed peut se faire au clic de n'importe quel élément de la page (une image, un bouton, un lien, une div, etc.).
Il suffit d'ajouter à cet élément la classe css dtk-videofeed
Cela fonctionnera même après un redraw (un appel ajax par exemple), n'importe quel élément possédant cette classe en "live" déclenchera l'ouverture de l’expérience (seulement sur mobile, sur desktop le comportement normal de l'élément prendra le relai).
¶ Exemple
<!DOCTYPE html>
<html lang="fr" class="no-js" >
<head>
<script async src="//videofeed.digiteka.com/launcher.min.js"></script>
<script type="text/javascript">MDTK_videofeed = "01234567";</script>
</head>
<body>
<ul class="linksBar">
<li class="linksBar-item"><a class="linksBar-link dtk-videofeed" href="https://www.exemple.fr/videos/">Vidéos</a></li>
<li class="linksBar-item"><a class="linksBar-link" href="https://www.exemple.fr/actus">Le direct</a></li>
<li class="linksBar-item"><a class="linksBar-link" href="https://www.exemple.fr/podcasts">Nos podcasts</a></li>
</ul>¶ Lancement du Videofeed depuis les players classiques Digiteka
L'expérience verticale Videofeed peut également être lancée depuis n'importe quel player classique Digiteka et n'importe quel Visible Player Mobile :
Pour cela il suffit d'intégrer le script du Videofeed sur une page disposant déjà d'un Player classique. L'expérience vidéo verticale relancera alors la lecture de la vidéo qui était en train de jouer dans le Player.
¶ Lancement du Videofeed depuis un Player classique chromeless
Le Videofeed de Digiteka peut être facilement intégré à un player vidéo classique chromeless, ce qui permet d'afficher un lecteur sans interface graphique (sans skin). Cette fonctionnalité est utile si vous souhaitez offrir une expérience utilisateur simplifiée, tout en intégrant le Videofeed dans un flux vidéo sans distraction visuelle.
¶ Étapes pour activer le mode Chromeless
- Prérequis
La page doit contenir les éléments nécessaires pour le lancement du Videofeed : présence du launcher et variables renseignées. Voir chapitre “Script requis”
- Intégration du Player Vidéo Classique Chromeless
Pour activer le mode chromeless, il suffit d'ajouter un paramètre spécifique à l'URL de l'iframe du player vidéo classique. Le paramètre à ajouter est/chromeless/1.
Exemple d'URL pour un player vidéo classique sans skin (chromeless) :<iframe src="//www.ultimedia.com/deliver/generic/iframe/mdtk/178960/zone/2/showtitle/1/src/xr0s333/chromeless/1" width="810" height="456" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" hspace="0" vspace="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allow="autoplay" referrerpolicy="no-referrer-when-downgrade"></iframe>
- Fonctionnement du Player Chromeless
Lorsque le player est configuré en mode chromeless, l'interface graphique (skin) est complètement retirée. Seul le bouton de contrôle du son reste visible et accessible pour l'utilisateur. Cela permet d'afficher un player minimaliste, parfait pour une expérience vidéo épurée.
- Lancement du Videofeed
Lorsqu'un utilisateur clique sur ce player chromeless, le Videofeed s'active automatiquement, permettant ainsi une expérience fluide et intégrée.
A noter : le Player chromeless couplé au Videofeed fonctionnent aussi bien sur Desktop que sur Web Mobile.
¶ Mise en avant d'une vidéo sur vos pages
Pour afficher une vidéo spécifique en première position au lancement du videoFeed, il suffit de passer cette variable dans le script du lancement du feed :
<script>
MDTK_videofeed_video_id = “idEncryptéDeVotreVidéo”;
</script>
Vous pouvez également indiquer l'ID de la vidéo à lire en première position directement en attribut de l'objet cliquable qui sert au lancement du Videofeed :
<a href="..." class="videofeed" data-videofeed_video_id="xjw4x">Lancer le Videofeed</a>Vous pouvez ainsi envisager un lancement du Videofeed directement depuis un slot de vos homepages :
¶ Intégration d'un Carrousel et ouverture du VideoFeed
En plus du vidéofeed, il est possible d'intégrer sur votre site web un carrousel présentant des vidéos verticales, qui, au clic, sur ces vidéos ouvriront l'expérience verticale. Le carrousel remonte les dernières vidéos verticales publiées sur votre catalogue.
Afin de profiter du carrousel il y a quelques pré-requis :
- Avoir le launcher VideoFeed d'activé sur la page
- Avoir la variable
MDTK_videofeedde renseignée
Ainsi il suffira d'intégrer la div suivante à l'endroit que vous souhaitez
<div id="dtk-videofeed-carrousel"></div>
¶ Lancement du Videofeed et du carrousel sur un feed précis
Il est possible d'ajouter une variable au code d'intégration du Videofeed pour pouvoir le lancer sur un autre feed que le premier.
Elle s'applique également aux intégrations de type “carrousel” pour afficher le carrousel d'un autre feed que le premier.
Il suffit de passer cette variable dans le script d'intégration :
<script>
MDTK_videofeed_zone_index = 2;
</script>Attention : les feeds sont numérotés à partir de 0. Par conséquent si vous souhaitez afficher le 2ème feed, il faut passer la variable MDTK_videofeed_zone_index = 1; de même l'index 2 pour le feed n°3 etc.
¶ Intégration du carrousel sur les placeholders du Visible Player
Lorsque vous avez un Simple Player intégré avec l'option Visible Player, vous pouvez afficher le carrousel à la place du placeholder du player principal en ajoutant la variable suivante dans le script d'intégration :
<script>
CARROUSEL_videofeed=true;
</script>¶
¶ Intégration Desktop
Si le videofeed est intégré sur mobile, il est automatiquement aussi présent sur desktop sans ajout de code (si vous aviez conditionné l'affichage du videofeed au mobile, vous devez enlever la restriction existante)
¶ Monétisation Videofeed Desktop
Sur la vue du videofeed, il est possible d'ajouter une publicité à gauche et à droite de la vue
Pour cibler ces deux emplacements publicitaires, nous avons mis en place 2 id qui vous le permettront de le faire :
- dtk_ads_right
- dtk_ads_left
¶ URL de Partage Videofeed
Pour activer le partage d'une URL vidéo sur votre site, veuillez suivre ces trois étapes :
¶ Créer un CNAME
Le CNAME redirige un sous-domaine de votre site vers notre service de partage, nous en avons besoin pour que l'URL partagée ne soit pas une URL Digiteka mais bien une URL de chez vous. Nous avons donc besoin que vous nous créiez un sous domaine et que vous effectuiez un cname sur share.digiteka.com.
¶ Envoyer l'URL de votre Favicon
Envoyez-nous l'URL de votre favicon (icône de site web) afin de personnaliser l'apparence des pages de partage vidéo.
¶ Fournir un JS hébergé chez vous
Vous devez aussi nous fournir une URL de script JavaScript qui nous permet d'activer en priorité votre plateforme de gestion du consentement (CMP) pour garantir la conformité RGPD, cette partie de script est obligatoire. Il peut aussi permettre entre autre, la collecte de statistiques, comme celles de Médiamétrie, Piano, Gemius ou d'autres pour suivre l'audience de vos vidéos.
Si vous avez des questions sur l'intégration de ces fonctionnalités, n'hésitez pas à nous contacter.
¶ Réseaux disponibles pour le partage
Lors du partage, vous partagerez des meta spécifiques reconnues par la plupart des réseaux :
- Meta (Facebook, Whatsapp..)
- X (Anciennement Twitter)
- La majorité des messageries directes ( Slack, SMS, Instagram DM, Messenger…)
Vous ne partagerez donc pas simplement une URL, mais aussi un aperçu spécifique de la vidéo (son titre, sa description, sa miniature entre autres données)
¶ Référencement des vidéos du videofeed
Par défaut les vidéos du vidéofeed ne sont pas référencées comme des vidéos classiques. Cependant, si vous avez un sous-domaine avec des liens de partage, vous pouvez être présents sur l'onglet Vidéos Courtes de Google.
Pour ce faire, il est nécéssaire de passer par votre Account Manager.
¶ Monétisation du Videofeed
¶ Intégration d'une publicité Display
Il est possible d'intégrer un tag display dans le videofeed qui s'affichera s'il n'y a pas de pub vidéo de programmée. Pour ce faire, il est nécessaire de passer une variable dans votre script :
<script>
var MDTK_videofeed_adunit_path = "networkCode/cheminDuBlocdAnnonce";
</script>