¶ 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
¶ 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 un Visible Player
L'expérience verticale Videofeed peut également être lancée depuis n'importe quel Visible Player Digiteka au format “bandeau” :
Pour cela il suffit d'intégrer le script du Videofeed sur une page disposant déjà d'un Visible Player. L'expérience vidéo verticale relancera alors la lecture de la vidéo qui était en train de jouer dans le Visible Player.
¶ Intégration d'une vidéo en première position du feed
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>¶ 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>
¶ 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 iOS
¶ Installation
Ajouter la dépendance à votre projet avec l'une de ces solutions :
¶ CocoaPods
Vous pouvez utiliser CocoaPods pour installer VideoFeedSDK en ajoutant ce code à votre fichier Podfile :
pod 'VideoFeedSDK', '~> 1.0.1'¶ Swift Package Manager
Vous pouvez intégrer VideoFeedSDK en tant que package Swift en ajoutant l'URL suivante du repository public dans Xcode :
https://github.com/digiteka/newssnack-ios-build.git
¶ Utilisation
Dans la méthode application(_:, didFinishLaunchingWithOptions:) de votre class ApplicationDelegate, ajoutez le code suivant pour initialiser la librairie :
do {
try VideoFeed.shared.initialize(config: DTKNSConfig(apiKey: "01472001"))
} catch {
print("Can't init VideoFeed with error \(error.localizedDescription)")
}¶ Logger
Il est possible de définir un logger personnalisé pour récupérer les logs de la librairie. Le logger doit implémenter le protocol DTKNSLoggerDelegate :
extension AppDelegate: DTKNSLoggerDelegate {
func VideoFeedDebug(message: String) {
print("debug " + message)
}
func VideoFeedInfo(message: String) {
print("info " + message)
}
func VideoFeedWarn(message: String) {
print("warn " + message)
}
func VideoFeedError(message: String, error: Error?) {
print("error " + message, error as Any)
}
}Puis passez le logger à la librairie :
VideoFeed.shared.setLoggerDelegate(self)¶ Tracking
Pour traquer les évènements provenant de la librairie, il est possible de passer un tracker personnalisé. Le tracker doit implémenter le protocol DTKNSTrackingDelegate :
extension AppDelegate: DTKNSTrackingDelegate {
func trackEvent(_ event: TrackingEvent, sessionId: String?) {
print("Tracking event received \(event) for sessionId \(sessionId ?? "nil")")
}
}Puis passez le tracker à la librairie :
VideoFeed.shared.setTrackingDelegate(self)¶ Afficher le VideoFeed UIViewController
Le VideoFeedSDK fournis un UIViewController que vous pouvez utiliser comme vous le souhaitez. Dans l'exemple suivant, le UIViewController est présenté en tant que modale :
do {
let vc = try VideoFeed.shared.videoFeedViewController()
present(vc, animated: true)
} catch {
print(error)
}¶ Personnalisation de l'UI
Par défaut, le VideoFeed UIViewController utilisera la configuration système. L'interface peut être personnalisée en passant une instance de DTKNSUIConfig au VideoFeedSDK :
let vc = try VideoFeed.shared.videoFeedViewController(
uiConfig: DTKNSUIConfig(
titleFont: UIFont.boldSystemFont(ofSize: 42),
descriptionFont: UIFont.italicSystemFont(ofSize: 12),
zoneFont: UIFont.systemFont(ofSize: 25),
playImageName: "Play",
pauseImageName: "Pause",
emptyStateImageName: "EmptyState"
)
)¶ Erreurs et Logs
| Type | Code d'erreur | Niveau | Message | Cause |
|---|---|---|---|---|
| Configuration | DTKNS_CONF_1 | Critical | MDTK must not be null, empty or blank. Please provide a valid Api Key. | mdtk nul ou vide |
| Configuration | DTKNS_CONF_2 | Error | No data were provided for your Api key (mdtk), please check your Api Key is valid, and you do provide data for it in the digiteka console. | Le tableau data est vide ou aucune zone ne contient de vidéo |
| Configuration | DTKNS_CONF_3 | Error | VideoFeed sdk has not yet been initialized. Please call VideoFeed.initialize first. |
VideoFeed.shared.initialize ou VideoFeed.initialize n'ont pas encore été appelé |
| Configuration | DTKNS_CONF_4 | Warning | No video available in zone | Aucune vidéo disponible dans la zone |
| Network | Info | Network connection re-established | La connexion au réseau a été (r)établie | |
| Network | DTKNS_NET_1 | Warning | Network connection lost. | La connexion au réseau a été perdue |
| Network | DTKNS_NET_2 | Warning | Network connection unavailable. | La connexion au réseau est indisponible lors d'une requête réseau |
| Data | DTKNS_DATA_1 | Warning | DataIntegrity error <ClassName>: <short message describing why> | L'une des données requises du modèle envoyé par le serveur est invalide. |
| Data | Info | Can't load image from url | L'image placeholder n'a pas pu être chargée | |
| SDK | DTKNS_SDK_1 | Critical | Can't convert URL from string <string> | La conversion de l'url string en URL remonte une erreur. Veuillez contacter le support si cela arrive |
| SDK | DTKNS_SDK_2 | Error | Failed to communicate with server | La réponse du serveur était invalide, ou la connexion au serveur à échouée (p.e. timeout). Veuillez contacter le support si le problème persiste. |
¶ Build / Dev
Afin de tester le framework, il faut d'abord cloner le repository 'videofeed-ios-build' au même niveau que ce repository puis executer le script build-local.sh. Ce script créera le .xcframework directement dans le dossier 'videofeed-ios-build'. Ensuite, il suffit d'ajouter la dépendance au projet de démo en mode 'Local' et de lancer l'application.
¶ Intégration Android
¶ Installation
Ajouter la dépendance à votre fichier build.gradle:
dependencies {
implementation("com.digiteka.android:newssnack:1.0.0")
}
Et ajouter le token d’accès jitpack à votre projet dans votre fichier settings.gradle.kt :
dependencyResolutionManagement {
maven{
url = uri("https://jitpack.io")
credentials {
username = "your_digiteka_jitpack_access_token_here"
}
}
}
¶ Utilisation
Dans la méthode onCreate de votre classe Application, si vous n’en avez pas, créez-en une, et ajoutez-le code suivant pour initialiser la librairie :
//Créer la configuration DTKNSConfig
val dtknsConfig: DTKNSConfig = DTKNSConfig.Builder(mdtk = "my_mdtk_key_here")
.build()
//Puis initialiser la librairie VideoFeed
VideoFeed.initialize(applicationContext = this, config = dtknsConfig)
¶ Logger
Il est possible de définir un logger personalisé pour récupérer les logs de la librairie. Le logger doit implémenter l’interface DTKNSLogger.
import android.util.Log
import com.digiteka.newssnack.core.log.DTKNSLogger
object MyLogger : DTKNSLogger {
private const val TAG = "MyAppLogger"
override fun debug(message: String) { Log.d(TAG, message) }
override fun info(message: String) { Log.i(TAG, message) }
override fun warning(message: String, throwable: Throwable?) { Log.w(TAG, message, throwable) }
override fun error(message: String, throwable: Throwable?) { Log.e(TAG, message, throwable) }
}
Puis passer le logger à la librairie :
VideoFeed.setLogger(logger = MyLogger)
¶ Tracking
Pour traquer les évènnements provenant de la librairie, il est possible de passer un tracker personalisé. Le tracker doit implémenter l’interface DTKNSTracker.
import com.digiteka.newssnack.logic.tracking.DTKNSTracker
import com.digiteka.newssnack.logic.tracking.TrackingEvent
object MyTracker: DTKNSTracker {
override fun trackEvent(event: TrackingEvent) {
// Track the event
}
}
Puis passer le tracker à la librairie :
VideoFeed.setTracker(tracker = MyTracker)
¶ Afficher le NewsSnackFragment
Le NewsSnackFragment étend la classe android Fragment, vous pouvez le gérer comme n’importe quel autre fragment.
Dans l’exemple suivant, il est inséré avec un FragmentContainerView dans un layout XML.
<androidx.fragment.app.FragmentContainerView
android:id="@+id/defaultUiActivityContainerView"
android:name="com.digiteka.newssnack.ui.NewsSnackFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Recommendations
- Le
NewsSnackFragmenta des comportements de déroulement vertical et horizontal, il n’est donc pas recommandé de l’insérer dans un layout possédant du déroulement, telle qu’une ScrollView ou qu’une
RecyclerView.
¶ Personnaliser l’UI
Par défaut, le NewsSnackFragment utilisera le mode d’UI du système.
L’interface peut être personnalisée en passant une instance de DTKNSUiConfig au NewsSnackFragment.
val uiConfig: DTKNSUiConfig = DTKNSUiConfig.Builder()
.setForcedDarkMode(true) // Forece l'affichage en mode sombre ou clair. Par défaut, la librairie utilisera le mode d'UI du système.
.setPlayIcon(R.drawable.ic_vm_play) // Définit l'icône play pour le lecteur video.
.setPauseIcon(R.drawable.ic_vm_pause) // Définit l'icône pause pour le lecteur video.
.setTitleFont(R.font.source_serif) // Définit la police d'écriture pour le titre du panneau d'information.
.setDescriptionFont(R.font.arial) // Défini la police d'écriture pour la description du panneau d'information et les puces de catégories.
.setDeactivateAds(false) // Désactive les emplacements publicitaires (les vues de repli sont également désactivées).
.setTagParams { zoneName, adId -> // Définit les tagParams pour un zoneName et adId donné.
mapOf(
"category" to "$zoneName _ $adId",
"sub_category" to "news"
)
}
.build()
// Puis passer la configuration à l'instance du NewsSnackFragment affichée
findViewById<FragmentContainerView>(R.id.vingtMinutesFragmentContainerView)
.getFragment<NewsSnackFragment>()
.setUiConfig(uiConfig)
¶ Personnaliser la vue de repli
VideoFeed fourni une interface DTKNSViewInjector permettant d’injecter une vue de repli lorsqu’un emplacement publicitaire n’a pas de publicité à afficher .
En cas d’erreur de chargement d’une publicité, la vue de repli n’est pas utilisée.
class SampleInjector : DTKNSViewInjector {
override fun hasViewAvailable(placement: FallbackPlacementEntity): Boolean {
Log.i("SampleInjector", "hasViewAvailable - placement: $placement")
return true
}
override fun buildView(placement: FallbackPlacementEntity, parent: ViewGroup): View? {
val binding = SampleFallbackViewBinding.inflate(LayoutInflater.from(parent.context))
return binding.root
}
override fun onViewCreated(view: View) {
Log.i("SampleInjector", "onViewCreated - view: $view")
}
override fun onViewDestroyed(view: View) {
Log.i("SampleInjector", "onViewDestroyed - view: $view")
}
override fun onViewVisibilityChanged(view: View, isVisible: Boolean) {
Log.i("SampleInjector", "onViewVisibilityChanged - view: $view, isVisible: $isVisible")
}
}
Puis il suffit de passer l’injecteur au VideoFeedFragment:
findViewById<FragmentContainerView>(R.id.vingtMinutesFragmentContainerView)
.getFragment<VideoFeedFragment>()
.setInjector(SampleInjector())
¶ Erreurs et Logs
| Type | Code d’erreur | Niveau | Message | Cause |
|---|---|---|---|---|
| Configuration | DTKNS_CONF_1 | Critical | Mdtk must not be null, empty or blank. Please provide a valid Api Key. | mdtk nul ou vide |
| Configuration | DTKNS_CONF_2 | Error | No data were provided for your Api key (mdtk), please check your Api Key is valid, and you do provide data for it in the digiteka console. | Le tableau data est vide ou aucune zone ne contient de vidéo |
| Configuration | DTKNS_CONF_3 | Error | VideoFeed sdk has not yet been initialized. Please call VideoFeed.initialize first. |
NewSnack.shared.initialize ou VideoFeed.initialize n’ont pas encore été appelé |
| Configuration | DTKNS_CONF_4 | Warning | No video available in zone | Aucune vidéo disponible dans la zone |
| Network | Info | Network connection re-established | La connexion au réseau a été (r)établie | |
| Network | DTKNS_NET_1 | Warning | Network connection lost. | La connexion au réseau a été perdue |
| Network | DTKNS_NET_2 | Warning | Network connection unavailable. | La connexion au réseau est indisponible lors d’une requête réseau |
| Data | DTKNS_DATA_1 | Warning | DataIntegrity error <ClassName>: <short message describing why> | L’une des données requises du modèle envoyé par le serveur est invalide. |
| Data | Info | Can’t load image from url <url> | L’image placeholder n’a pas pu être chargée | |
| SDK | DTKNS_SDK_1 | Critical | Can’t convert URL from string <string> | La conversion de l’url string en URL remonte une erreur. Veuillez contacter le support si cela arrive |
| SDK | DTKNS_SDK_2 | Error | Failed to communicate with server | La réponse du serveur était invalide, ou la connexion au serveur à échouée (p.e. timeout). Veuillez contacter le support si le problème persiste. |
¶ 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.
