Créer une annonce interstitielle

Vous pouvez à tout moment créer une nouvelle annonce interstitielle dans l'Espace de travail Prenly. Avant de commencer, veuillez noter qu'il y a des exigences de système pour afficher les annonces interstitielles.

Configuration requise

HTML. Pour afficher votre publicité, le contenu de la publicité doit être au minimum une balise image en HTML (jpg ou png).

HTTPS. Pour des raisons de sécurité, tout lien en dehors de la solution électronique en mode lecture papier doit utiliser HTTPS en ce qui concerne les publicités interstitielles.

Publicitécliquable . Pour que le lecteur puisse cliquer sur une publicité, la balise image doit être entourée d'une balise d'ancrage.

Étapes de création de la publicité

Sélectionnez "Marketing" puis "Annonces" dans le menu de gauche.

1. Sélectionnez "Nouveau" pour créer une nouvelle publicité interstitielle.

Créez une nouvelle publicité en sélectionnant "Nouveau".

2. Entrez un nom pour votre publicité. Cela vous permettra de la retrouver plus facilement à l'avenir et de la rechercher dans la liste des publicités.

Donnez un nom à votre annonce pour pouvoir la retrouver plus facilement dans la liste des annonces à l'avenir.

3. Indiquez après quelle page votre annonce doit être affichée. Saisissez une liste de pages séparées par des virgules pour permettre à votre annonce d'être visible après plusieurs pages. La publicité sera affichée entre la ou les pages sélectionnées et la page suivante, c'est-à-dire qu'au lieu d'afficher la page suivante, votre publicité sera affichée et la page suivante sera affichée après la publicité.

Définissez la page après laquelle la publicité doit être affichée.

4. Choisissez une date de début et indiquez si l'annonce doit être active jusqu'à ce qu'elle soit désactivée manuellement ou si elle doit avoir une date de fin déterminée. Choisissez une date de fin pour désactiver automatiquement votre annonce à minuit le jour suivant la date de fin saisie.

Définissez l'intervalle de temps pendant lequel la publicité doit être affichée.

5. Voici du jargon technique !

Saisissez une balise d'image HTML (<img>) qui sera utilisée pour afficher l'image de votre publicité. La source de l'image(attribut src) doit utiliser le protocole HTTPS pour des raisons de sécurité.

Si votre annonce est cliquable, c'est-à-dire si vous souhaitez que le lecteur puisse cliquer sur l'image de l'annonce et être dirigé vers la page web de l'annonceur, entourez la balise d'image d'une balise d'ancre (<a>) dont la référence d'ancre(attribut href-) doit également utiliser le protocole HTTPS.

Choisissez si vous souhaitez utiliser une image différente entre le mode portrait et le mode paysage. Vous devez sélectionner l'un ou l'autre mode au minimum, mais vous pouvez choisir les deux. Si vous choisissez d'en saisir un, par exemple le mode portrait, Prenly utilisera le même code pour afficher votre publicité sur les appareils portables en mode paysage.

Qu'est-ce que le HTTPS ? HTTPS est une communication cryptée entre le navigateur web (client) et le serveur web et est noté "https://".

Comparez http://example.com/ et https://example.com/. De nombreux navigateurs web signalent que la communication est cryptée via HTTPS en ajoutant une icône de cadenas dans la barre d'URL pour indiquer que la communication est sécurisée.

Pourquoi Prenly exige-t-il HTTPS ? Android interdit l'ouverture de liens HTTP à partir d'une application. Par conséquent, Prenly exigera que les liens existants dans une application utilisent HTTPS. Les lecteurs bénéficieront également d'une expérience de lecture plus sûre en utilisant HTTPS car la communication est cryptée.

Prenly prend en charge le code JavaScript qui vous permet d'avoir un contenu publicitaire dynamique. Tout code JavaScript valide est accepté, mais le code doit produire une balise d'image et, éventuellement, une balise d'ancre environnante, une fois qu'il est exécuté.

Prenly ne validera pas votre code. Il est recommandé d'essayer votre code sur une page HTML avant d'activer votre publicité.

Exemple de code pour les images :

Portrait :

<a href="{INSERT-TARGET-URL}">
<img
src="{INSERT-IMAGE-SRC}"
alt="Publicité"
width="1100"
height="1700"
style="display : block ; width : 100% ; max-width : 100vw ; max-height : 100vh ; object-fit : contain ; margin : 0 auto ;"
>
</a>

Paysage:

<a href="{INSERT-TARGET-URL}">
<img
src="{INSERT-IMAGE-SRC}"
alt="Annonce"
width="1700"
height="1100"
style="display : block ; width : 100% ; max-width : 100vw ; max-height : 100vh ; object-fit : contain ; margin : 0 auto ;"
>
</a>

Exemple de code pour les vidéos MP4

Notez que les vidéos encodées en H.264 sont obligatoires pour fonctionner dans Safari

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annons</title>
<style>
body, html {
margin : 0 ;
padding : 0 ;
hauteur : 100% ;
background : #ffffff ;
overflow : hidden ; /* Empêche le défilement */
-webkit-overflow-scrolling : touch ; /* Important pour iOS */
}
.video-container {
position : fixed ;
top : 0 ;
left : 0 ;
width : 100% ;
hauteur : 100% ;
arrière-plan : blanc ;
affichage : flex ;
justify-content : center ;
align-items : center ;
overflow : hidden ;
}
video {
max-width : 100% ;
max-height : 100% ;

}
</style>
</head>
<body>
<div class="video-container">
<video id="videoPlayer" src="[INSERT-MP4-SRC]" autoplay playsinline loop muted></video>
</div>
<script>
const video = document.getElementById('videoPlayer') ;
// Essayez de lancer la vidéo par programme sur iOS
document.addEventListener('DOMContentLoaded', function() {
video.play().catch(function(error) {
console.log('Video could not autoplay due to restrictions:', error) ;
}) ;
}) ;
// Pour que le contenu de la vidéo s'améliore
document.body.addEventListener('touchstart', function(e) {
if (e.target !== video) {
e.preventDefault() ; // N'empêche le démarrage par défaut que si le toucher n'est pas sur la vidéo.
}
}, { passive : true }) ;

// Attention au clic sur la vidéo
video.addEventListener('click', function(e) {
e.preventDefault() ;
window.open('[INSERT-TARGET-URL}', '_blank') ;
}) ;
</script>
</body>
</html>

Saisissez votre code relatif à l'image en tant que contenu publicitaire.

6. Sélectionnez l'application qui doit afficher votre annonce.

Sélectionnez l'application qui doit afficher votre publication.

7. Sélectionnez les titres qui doivent afficher votre annonce.

Sélectionnez le titre qui doit afficher votre annonce.

8. Enregistrez vos paramètres en sélectionnant "Enregistrer". Si l'icône est floue après la dernière série, c'est que vous n'avez pas configuré une section. Recherchez un point rouge dans le coin droit de chaque section. Sélectionnez la section mal configurée et poursuivez la configuration à partir de là.

Sélectionnez "Enregistrer" pour sauvegarder vos paramètres.

9. Activez votre publicité en basculant l'interrupteur dans le coin supérieur droit. Si la publicité est inactive, vous l'activerez. Si la publicité est active, vous la désactiverez.

Seules les annonces actives pourront être affichées par vos lecteurs, car Prenly les enverra pour qu'elles soient affichées dans l'application et la page configurées en mode de lecture papier. Les annonces inactives ne seront pas affichées lorsque le lecteur passera la page marquée.

Basculez le commutateur pour activer la publicité.

Exemple d'une publicité configurée et active.

10. Supprimer la publicité. Sélectionnez le menu à trois points dans le coin supérieur droit et sélectionnez "Supprimer la publicité" pour supprimer la publicité sélectionnée. La publicité sera supprimée de l'Espace de travail Prenly. Si l'annonce était active avant sa suppression, elle sera d'abord désactivée avant d'être supprimée.

Pour supprimer la publicité, sélectionnez le menu à trois points, puis "Supprimer la publicité".

Sélectionnez la vidéo ci-dessous pour voir comment créer une publicité interstitielle en tant que guide vidéo.

Créer une publicité interstitielle.

Le nouvel interstitiel plus fluide et moins intrusif