¶ 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/0178960/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="dtk-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.
¶ Réinitialisation du Carrousel dans un Environnement SPA
Le carrousel est conçu pour s'initialiser une seule fois. Lorsqu'il est retiré du DOM — ce qui se produit fréquemment dans les SPA où les mises à jour de contenu sont dynamiques et ne déclenchent pas un rechargement complet de la page — son script JavaScript ne se ré-exécute pas automatiquement. Pour assurer une fonctionnalité continue et garantir que le carrousel s'affiche et fonctionne correctement en permanence, il est impératif d'implémenter le processus expliqué ci-dessous.
Pour réinitialiser le carrousel de manière programmatique, suivez les étapes ci-dessous :
- Supprimez l'attribut
data-carrousel_initialisedde l'élément<div>servant de cible au carrousel, identifié par l'ID"dtk-videofeed-carrousel".
Exemple :
<div id="dtk-videofeed-carrousel" data-carrousel_initialised="true"></div>
- Appelez la fonction
window.insertCarrouselIntoDom(). Cette fonction est responsable de la réinitialisation et de l'affichage du carrousel dans le DOM.
En suivant ces étapes, vous pouvez assurer la persistance et la fonctionnalité de notre carrousel au sein de vos environnements SPA.
¶ Intégration du "Scroll2Feed" et ouverture du Videofeed
Pour enrichir les modes d'ouverture de notre Videofeed, nous avons créé le Scroll2Feed. Ce nouveau déclencheur disponible sur Mobile uniquement s'active automatiquement dès que l'utilisateur atteint un point spécifique dans l'article. Ce point est marqué par l'intégration d'une simple balise HTML.
.gif)
¶ Configuration Technique
Pour activer la fonctionnalité,insérez la balise <scroll2feed> à l'emplacement désiré dans l'article.
Pour offrir une expérience utilisateur optimale et non intrusive, nous vous recommandons fortement de placer cette balise après l'article. Le déclenchement du Videofeed ne doit pas surprendre l'utilisateur, mais s'intégrer naturellement dans son expérience de lecture.
Voici les attributs que vous pouvez utiliser pour personnaliser son comportement :
data-zone_index(optionnel): Cet attribut permet de forcer l'affichage d'un feed en particulier.
Si rien n'est spécifié, c'est le premier feed paramétré qui est affiché par défaut.
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 valeurdata-zone_indexà"1".
Par exemple :
<scroll2feed data-zone_index="2"></scroll2feed>.
data-video_id(optionnel): Cet attribut permet de forcer l'affichage d'une vidéo en particulier.
Par exemple :
<scroll2feed data-video_id="xxxx"></scroll2feed>.Note : Ces deux paramètres peuvent être utilisés en même temps.
¶ Priorités et règles de déclenchement
Le Scroll2Feed est conçu pour une expérience utilisateur fluide et sans interférences. Il ne se déclenchera jamais dans les situations suivantes :
- Si un player vidéo "sticky" est déjà actif : Cela évite la superposition visuelle et sonore.
- Si une publicité est en cours de diffusion sur le player principal : Priorité est donnée à la publicité pour ne pas créer de conflit.
¶ 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 vers un nom de domaine Digiteka que nous vous communiquerons.
¶ 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>
MDTK_videofeed_adunit_path = "networkCode/cheminDuBlocdAnnonce";
</script>
¶ Utilisation des ‘tagparam’ pour le Videofeed
Il est possible d'utiliser l'équivalent de la variable “tagparam” du player classique Digiteka avec le produit Videofeed.
Deux variables différentes sont à votre disposition, l'une pour la monétisation vidéo, l'autre pour la monétisation display :
<script>
MDTK_videofeed_custparams = "tagparam_pubs_video";
MDTK_videofeed_targetings = "tagparam_pubs_display";
</script>Il vous est possible de renseigner le PPID directement au sein de ces variables, elles seront alors transmises au tag publicitaire indépendamment dans le champ dédié ppid.
Exemple d'utilisation :
<script defer src="//videofeed.digiteka.com/launcher.min.js"></script>
<script type="text/javascript">
MDTK_videofeed = "01234567";
MDTK_videofeed_custparams = "firstKey=video&secondKey=multipleValue1,multipleValue2&ppid=toto";
MDTK_videofeed_targetings = "firstKey=display&secondKey=multipleValue1,multipleValue2&ppid=tata";
</script>