Le Videofeed par Digiteka vous propose une nouvelle façon innovante d'intégrer vos vidéos à vos environnement mobiles Web et applicatifs.
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.
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).
<!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>
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.
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>
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>
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 :
MDTK_videofeed
de renseignéeAinsi il suffira d'intégrer la div suivante à l'endroit que vous souhaitez
<div id="dtk-videofeed-carrousel"></div>
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.
Ajouter la dépendance à votre projet avec l'une de ces solutions :
Vous pouvez utiliser CocoaPods pour installer VideoFeedSDK
en ajoutant ce code à votre fichier Podfile
:
pod 'VideoFeedSDK', '~> 1.0.1'
Vous pouvez intégrer VideoFeedSDK
en tant que package Swift en ajoutant l'URL suivante du repository public dans Xcode :
https://github.com/digiteka/videofeed-ios-build.git
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)")
}
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)
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)
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)
}
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"
)
)
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. |
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.
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"
}
}
}
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)
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)
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)
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
NewsSnackFragment
a 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’unePar 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)
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())
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. |