Découvrez dans ce court tutoriel comment intégrer une pop-up à retardement à vos documents partagés, afin de collecter de précieuses données utilisateurs.
Ce tutoriel s'adresse à des utilisateurs avancés qui ont des bases en écriture de code :)
Pour tous les autres, ne soyez pas timides, demandez-nous de l'aide : support@ar-go.co
Qu'est ce qu'une pop up à retardement ?
Une pop-up est un terme de marketing qui peut être défini de plusieurs façons. Sur Internet, dans le cadre de que l'on appelle le marketing digital, une pop-up désigne une fenêtre qui s'affiche sur l'écran de façon automatique à l'ouverture d'une page web. Il s'agit la plupart du temps d'un message publicitaire.
Une pop-up à retardement est donc l'affichage d'une fenêtre qui s'affiche en plein écran après un certain délai (sec, min) une fois le document ouvert dans la liseuse ARGOflow.
Cet affichage nécessite une action de la part de l'utilisateur (cliquer pour fermer, renseigner des données...) et peut s'avérer utile à des fins marketing, comme :
- Afficher un message publicitaire avec une offre spéciale passé un certain délai.
- Teaser vos lecteurs en leur offrant l'accès à la lecture du document pendant un temps défini avant de leur demander de s'identifier
Comment intégrer une pop-up à retardement sur l'un de vos Smartlinks ?
- Ouvrez l'éditeur d'interactions sur votre document cible, et restez en 1ere page si votre document comporte plusieurs pages
- Sélectionnez l'asset "Webview" et glissez-le sur l'espace de travail
- Cochez l'option "Lecture auto" qui permettra au code contenu dans cette webview de s'exécuter dès l'ouverture de la liseuse dans le navigateur.
- Cliquez sur l'icône "croix" dans le champ "Image" afin de remplacer l'image de couverture par défaut par une image transparente.
- Puis cliquez sur le champ "Modifier HTML", une fenêtre d'edition html s'ouvre à vous
- Voici ci-dessous un exemple de code permettant d'afficher une fenêtre avec un formulaire de renseignement qui s'affiche 5 secondes après l'ouverture.
Code couleur
- En rouge les éléments de code obligatoires
- En vert le code à modifier (Vous pouvez directement modifier le html fourni ou renseigner votre propre code
- En bleu le nombre de secondes à modifier pour préciser le délai d'ouverture
- En violet l'espace où insérer vos lignes de commande pour aller peupler la base de données de votre choix (dans le cas ici présent pour aller inscrire les coordonnées utilisateurs récupérées)
|
<html>
<head>
<script id="onload">
/******* SECTION TO CUSTOMIZE *******/
var nagHtml = `
<div class="pico-content pico-modal" id="pico-1" role="dialog" aria-describedby="pico-1" style="display: block; position: fixed; z-index: 10001; left: 50%; top: 38.1966%; max-height: 90%; box-sizing: border-box; width: min(90%, 400px); transform: translate(-50%, -38.1966%); flex-direction: column; overflow: auto; background-color: white; padding: 4px 38px; border-radius: 4px;">
<div class="pico-modal__wrapper">
<br>
<h2 class="pico-modal__title" data-l10n-id="cred_title">
ARGO
</h2>
<span class="pico-modal__subtitle" data-l10n-id="cred_subtitle">
Merci de l'intérêt porté à ce document.
Nous vous invitons à vous identifier afin de poursuivre sa lecture.
</span>
<br>
<div style="width:100%">
<label for="email" class="pico-modal__label"><b data-l10n-id="cred_email">NOM</b></label>
<br>
<input type="text" name="nom" id="nag_nom" class="pico-modal__input">
<br>
<label for="email" class="pico-modal__label"><b data-l10n-id="cred_email">PRÉNOM</b></label>
<br>
<input type="text" name="prénom" id="nag_prenom" class="pico-modal__input">
<br>
<label for="email" class="pico-modal__label"><b data-l10n-id="cred_email">EMAIL</b></label>
<br>
<input type="text" name="email" id="nag_email" class="pico-modal__input">
<br>
<label for="email" class="pico-modal__label"><b data-l10n-id="cred_email">TÉLÉPHONE</b></label>
<br>
<input type="text" name="téléphone" id="nag_telephone" class="pico-modal__input">
<br>
<br>
<!--
<div style="display:flex">
<input type="checkbox" name="email_checkbox" id="email_checkbox">
<label for="email_checkbox" class="pico-modal__subtitle" style="margin-left:10px; color:#707070" data-l10n-id="cred_accept">
I accept the recording of my email address as well as the use of cookies for statistical purposes, and that the person who sent me this document is informed of the reading.
</label>
<br>
</div>
-->
</div>
<br>
<button id="nag_envoyer" class="pico-modal__button" data-l10n-id="cred_continue">ENVOYER</button>
<br>
</div>
</div>
`;
var nagCss = `
{
background-color:white;
left: 30%;
right: 30%;
top: 20%;
bottom: 20%;
text-align: center;
padding: 10px;
}
`;
var nagTimeoutInSecond = 5;
function sendFormData() {
/* Read the data from the form and send it to a dedicated service */
}
/***** END SECTION TO CUSTOMIZE *****/
console.debug("nagscreen load");
const storageKey = PDFZ.api.getPdfzUuid() + "_nag";
function closeNagScreen() {
localStorage.setItem(storageKey, "passed");
PDFZ.api.resetModal();
PDFZ.api.thawWindow();
}
function openNagScreen() {
PDFZ.api.freezeWindow();
PDFZ.api.setModalHtml(nagHtml);
PDFZ.api.setModalStyle(nagCss);
setTimeout(() => {
window.parent.document.getElementById("nag_envoyer").onclick = () => {
sendFormData();
closeNagScreen();
};
});
}
if(typeof PDFZ === "undefined") {
alert("Internal error. Please reload.");
} else {
const nagged = localStorage.getItem(storageKey);
console.debug("nag:", nagged);
if(!nagged) {
setTimeout(openNagScreen, nagTimeoutInSecond*1000);
}
}
</script>
</head>
</html>
|
- Copiez/collez votre code une fois satisfait dans la fenêtre HTML de l'asset Webview.
- Cliquez sur "sauver" puis sur l'icône sauvegarder une fois dans l'éditeur.
- Ouvrez votre smartlink dans un navigateur et patientez le temps indiqué dans votre code : votre fenêtre pop-up s'ouvre alors avec le message/formulaire/mise en page de votre choix.
BRAVO, vous venez d'intégrer une fenêtre pop-up à retardement dans votre document augmenté!
Commentaires
Vous devez vous connecter pour laisser un commentaire.