Êtes-vous propriétaire d’un site Web WordPress et vous cherchez à mettre sur vos pages ou articles un bouton de téléchargement, ou d’autres types de bouton, conditionné par un compte à rebours, pour valoriser la durée moyenne du temps passé sur vos pages et ainsi augmenter vos revenus Google Adsense ? Ne cherchez pas plus loin que GoTutoriel, nous mettons à votre profit nos compétences et notre expertise, pour vous soumettre un tutoriel, simple, rapide et efficient, qui vous présente le processus à suivre pour doter votre site d’un bouton avec un Timer aussi bien attractif que professionnel.
Avant de plonger dans le vif du sujet, on vous propose de comprendre pourquoi ce genre de bouton est si important pour la santé, les statistiques et les revenus passifs de votre site.
- Pourquoi ajouter un compte à rebours à vos boutons (utilité) ?
- Qu’est-ce que le temps moyen sur la page ?
- Pourquoi le temps moyen sur la page est important ?
- Qu’est-ce que Google AdSense ?
- Ajouter un Code CSS : Installer et configurer WPCode plugin (Extension)
- Cas d’un article (sans Elementor) : Installer et configurer Shortcodes Ultimate plugin (extension)
- Cas d’une page du site : En utilisant Elementor
- Observez les résultats par rapport à vos revenus Adsense
- Exemple en image
Pourquoi ajouter un compte à rebours à vos boutons (utilité) ?
Pour mieux comprendre l’utilité d’un compte à rebours précédant le déclenchement de vos boutons, particulièrement ceux dédiés au téléchargement, il faut connaitre et comprendre les éléments, qui agissent positivement ou négativement sur la santé et les statistiques de votre site web, et par voie de conséquence sur vos revenus passifs que votre site peut générer.
ArticlesRecommandés
L’un des éléments essentiels qui ont une importance capitale sur le référencement, la santé, et l’expérience utilisateur de votre site web, c’est le temps moyen passé sur votre site par chaque visiteur, pour chaque session, en lisant votre contenu, en parcourant les différentes pages, et en interagissant avec vos appels à l’action.
L’importance de cet élément (temps moyen passé sur votre site) ne se limite pas seulement à faire valoriser votre contenu, mais il permet de classer votre site en position avancée pour la concurrence des publicitaires de Google Adsense, en plus ce paramètre a d’autres influences majeures sur votre site. Alors, essayons de comprendre correctement cet élément.
Qu’est-ce que le temps moyen sur la page ?
À l’ère numérique d’aujourd’hui, le temps moyen que les utilisateurs passent sur les pages de votre site Web peut faire ou défaire votre succès en ligne. Il ne s’agit pas seulement d’attirer des visiteurs; il s’agit de les garder captivés, engagés et avides d’en savoir plus. Alors, plongeons dans le monde du temps moyen sur les pages de sites Web et explorons comment cela peut propulser votre présence en ligne vers de nouveaux sommets !
Un temps moyen sur la page plus élevé peut aider votre site à se classer plus haut dans les résultats de recherche. Cela vous donne également plus de temps pour persuader les visiteurs de votre site Web de s’abonner, d’acheter ou d’effectuer une autre action sur votre site Web.
Le temps moyen passé sur une page correspond au temps moyen que chaque utilisateur passe sur une page de votre site Web. Pour calculer le temps moyen sur la page, vous divisez le temps total passé sur la page par le nombre de pages vues sans sortie. Par exemple, disons qu’au cours d’un mois donné, 2 000 pages vues pendant un temps total de 500 minutes, mais 500 de ces pages vues étaient des sorties de page ou des rebonds, nous les excluons donc. Le temps moyen passé sur la page serait donc de :
500 minutes / (2 000 pages vues – 500 pages sorties ou rebonds) = 500/1 500 = 0,33 minutes ou 20 secondes
Pourquoi le temps moyen sur la page est important ?
Le temps moyen passé sur la page est une mesure clé qui mesure la durée que les visiteurs passent sur une page Web spécifique avant de quitter. C’est un indicateur puissant de l’engagement des utilisateurs et de la qualité de votre contenu. Lorsque les visiteurs s’attardent plus longtemps, cela signifie qu’ils trouvent de la valeur dans ce que vous proposez et qu’ils sont impatients d’explorer davantage. Cet engagement accru ouvre les portes à des taux de conversion plus élevés, à une fidélité accrue à la marque et à une présence en ligne plus forte.
Il ne suffit pas d’obtenir des tonnes de trafic sur votre site Web. Vous avez besoin que les visiteurs lisent réellement ce qui se trouve sur votre site Web, cliquent sur des liens, s’abonnent à votre liste de diffusion, achètent des produits et s’engagent d’autres manières. Il faut dire que le temps moyen passé sur la page est un paramètre essentiel pour augmenter vos revenus passifs Google Adsense.
Qu’est-ce que Google AdSense ?
Google AdSense est un programme publicitaire qui permet aux propriétaires de sites Web d’afficher des publicités pertinentes sur leurs pages Web. Ces publicités sont générées en fonctioejersted szekrény חזן צוקרמן שמלות כלה מחירים nike עודפים זכרון יעקב pantalon ski columbia femme vince neil mugshot via55 köves táska kinky boots quotes תנור בילד אין אייס מוצרי חשמל haider maula mp3 hp מדפסת פשוטה casio rangeman gpr b1000 1ber come pulire una caffettiera di alluminio vasca idromassaggio cinese amazon kinderwagen peg perego pliko p3 אוזניות מעולות לאמפי 3 n du contenu de la page et des intérêts des visiteurs, garantissant que les publicités affichées sont très ciblées et susceptibles d’attirer l’attention des utilisateurs. Adsense fonctionne sur un modèle de coût par clic (CPC) ou de coût par impression (CPM), ce qui signifie que vous gagnez de l’argent lorsque les visiteurs cliquent sur les annonces ou les visualisent.
Annonces au CPM
CPM signifie « coût pour mille impressions ». Les annonceurs diffusant des annonces CPM définissent leur prix souhaité pour 1 000 annonces diffusées et payent chaque fois que leur annonce est diffusée.
En tant qu’éditeur, vous gagnez des revenus chaque fois qu’une annonce au CPM est diffusée sur votre page et vue par un utilisateur. Les annonces au CPM sont mises en concurrence avec les annonces au coût par clic (CPC) lors de nos enchères, et nous diffusons l’annonce susceptible de vous rapporter plus.
Durée de visibilité moyenne
Il s’agit de la durée moyenne (en secondes) au cours de laquelle 50 % au moins des pixels de votre annonce ont été visibles à l’écran. Une annonce est considérée comme visible lorsqu’au moins 50 % de sa surface s’affiche à l’écran pendant une seconde ou plus, conformément aux critères minimaux établis par les normes de l’IAB (Interactive Advertising Bureau)
Maintenant, passons aux étapes concrètes de notre tutoriel. IL faut noter que dans le présent tutoriel nous allons expliquer les deux cas de figure possibles, à savoir l’implémentation du bouton de téléchargement avec un compte à rebours dans :
- Un article du site (sans utiliser Elementor);
- Une page du site en utilisant Elementor Pro (Disponible sur GoTutoriel Gratuitement, il suffit de cliquer dessus).
Dans les deux cas, il est nécessaire d’implémenter à votre site un Script CSS (Code CSS), qui fera office de timer (compte à rebours) avant le déclenchement de votre bouton. Pour se faire, on aura besoin d’installer et de configurer une extension appelée WPCode.
Ajouter un Code CSS : Installer et configurer WPCode plugin (Extension)
Pour commencer, il faut passer sur votre tableau de bord WordPress, puis passer à la section « Extensions » (Plugins), une fois dedans il faut cliquer sur « Ajouter » en haut à gauche de la page. Ensuite, on doit lancer une recherche pour le plugin « WPCode », l’installer puis l’activer.
Une fois l’extension installée et activée, passer sur le volet latéral gauche de votre tableau de bord WordPress et naviguer jusqu’au plugin installé, un sous-menu s’ouvre à vous, alors il faut choisir « Header & Footer ». une fois le panel de configuration du plugin ouvert, l’étape suivante consiste à aller sur la section « Footer » dans laquelle il faut coller le script CSS suivant :
<script>
var downloadButton = document.getElementById("download");
var counter = 60;
var newElement = document.createElement("p");
newElement.innerHTML = "Votre Lien Gratuit sera généré, Veuillez Patienter SVP ..... 60 secondes.";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
counter--;
if(counter < 0) {
newElement.parentNode.replaceChild(downloadButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "Votre Lien Gratuit sera généré, Veuillez Patienter SVP ..... " + counter.toString() + " secondes.";
}}, 1000);
</script>
Le présent code CSS permet d’afficher un message d’attente à votre visiteur disant « Votre Lien Gratuit sera généré, Veuillez Patienter SVP ….. 60 secondes. » avec le déclenchement d’un compte à rebours passant de 60 à 0 seconde. A ce niveau, il ne vous reste qu’à personnaliser deux éléments à votre guise :
- « 60 » : Le temps d’attente avant l’affichage du bouton, qui sera animé par un compte à rebours (Timer). Vous pouvez ajuster ce paramètre en fonction de vos besoins. En cas d’ajustement de ce temps d’attente, notez bien que la modification doit être portée en deux emplacements sur le code, comme précisé en haut;
- « Votre Lien Gratuit sera généré, Veuillez Patienter SVP ….. » : C’est le message personnalisable qui sera affiché aux visiteurs avant l’apparition du bouton. Vous avez la possibilité de personnaliser ce message comme il vous semble utile, mais cette modification doit être menée en deux emplacements du Script CSS, comme illustré en haut.
Un élément très important à retenir, c'est l'ID du code CSS, nécessaire pour appliquer ce code sur un bouton, dans notre cas c'est : download.
Cas d’un article (sans Elementor) : Installer et configurer Shortcodes Ultimate plugin (extension)
Maintenant que nous avons intégré à notre site web WordPress le script CSS nécessaire pour faire patienter vos visiteurs, avant de leur donner accès au bouton de téléchargement, à autre type de boutons, nous allons par la suite pencher sur l’étape qui consiste à créer, personaliser et lier le bouton avec le code CSS précédemment présenté, en utilisant l’extension (plugin) « Shortcodes Ultimate ».
À ce stade il faut, revenir sur votre tableau de bord WordPress, puis passer à la section « Extensions » (Plugins) encore une fois, puis il faut cliquer sur « Ajouter » en haut à gauche de la page. Enfin, on doit lancer une nouvelle recherche, cette fois-ci pour le plugin « Shortcodes Ultimate », l’installer puis l’activer, comme déjà procédé pour l’extension « WPCode ».
Dans la page de modification de votre article, il ne vous reste qu’à choisir l’endroit désiré pour intégrer le bouton avec le compte à rebours. Ensuite, cliquez sur le « + » pour ajouter un bloc à votre article, et dans la barre de recherche, inscrivez « Code court » ou « Short code », puis sélectionnez le bloc.
L’étape suivante consiste à personnaliser votre bouton, et pour le faire il suffit de cliquer sur l’onglet « Insérer le shortcode », puis dans la liste de choix il faut sélectionner « Bouton », ce qui vous donne accès au panel de configuration et de personnalisation de votre futur bouton. Une fois cette phase de modification et d’ajustement terminée, vous devez cliquer sur « Insérer le shortcode » pour intégrer le bouton à l’article.
L’étape finale de notre tutoriel, consiste à lier et paramétrer le bouton avec le script CSS, précédemment implémenté, alors pour se faire il est nécessaire de faire appel à l’ID du code entre le « su_button » et « url » en injectant id= »download » comme illustré ci-dissous :
[ su_button id = "download" url="............ ]
Cas d’une page du site : En utilisant Elementor
Dans ce cas, où vous désirez intégrer votre bouton conditionné par le compte à rebours à une page spécifique de votre site WordPress, nous vous recommandons vivement de faire appel aux fonctionnalités avancées d’Elementor Pro et des modules complémentaires de cette extension professionnelle, à savoir « Element Pack Pro » ou bien « Essential Addons for Elementor – Pro ». Ces modules complémentaires (Addons) permettent de créer des boutons aussi bien professionnels, qu’attrayants, de manière très simple et rapide grâce à la fonction Glisser-Déposer (drag-and-drop).
Pour commencer, une fois sur le panel de modification de votre page en question, il suffit de choisir l’option « Modifier avec Elementor », puis sur la panel à gauche de votre Elementor – Page Builder, lancez la création d’un élément en cliquant sur le « + » en haut à gauche (Ajouter un élément), et dans la barre de défilement vous avez la possibilité de choisir de créer un bouton soit avec les éléments de « Element Pack Pro » ou bien de ceux de « Essential Addons for Elementor – Pro ». Il faut reconnaitre qu’avec Elementor Pro vous avez une fourche de possibilités presque illimitées.
Une fois vous avez sélectionné un type de bouton, il serait facile de le personnaliser à votre guise tout simplement en modifiant quelques paramètres basiques, comme la couleur, le texte à afficher, et le plus important c’est le lien vers lequel votre bouton redirigera vos visiteurs, pour le téléchargement. Ensuite, il ne vous reste que la phase de lier votre bouton avec le code CSS précédemment implémenté. pour se faire, il est nécessaire de chercher l’attribut (paramètre) de votre bouton nommé « ID de CSS » et d’y mettre l’ID de notre script CSS à savoir « download », enfin il faut sauvegarder les changements en cliquant sur « Publier » en haut à droite.
ID de CSS : download
Observez les résultats par rapport à vos revenus Adsense
Pour dire simple, le présent tutoriel a comme objectif de faire valoriser le temps moyen passé par vos visiteurs sur les articles ou les pages de votre site WordPress, mais il est très facile de convertir ce temps passé sur votre site en des revenus passifs très importants. Dans ce cadre, il vous suffit d’injecter des publicités Adsense ou autres, sur l’article ou la page en question, exactement avant ou après le message d’attente du compte à rebours précédant votre bouton. De cette manière, vous avez la certitude que les publicités Adsense, seront affichées à vos visiteurs à chaque fois, pour une durée équivalente ou inférieure au temps d’attente configuré précédemment.
D’après les résultats obtenus, par la majorité des propriétaires des sites internet WordPress, ayant fait appel à cette technique, vous avez la possibilité de faire croitre vos revenus publicitaires d’au moins 15% à 25% en fonction du comportement de vos visiteurs, de votre contenu, et particulièrement de la pertinence soit du lien vers lequel votre bouton redirige les visiteurs, soit du contenu proposé pour le téléchargement via votre bouton conditionné par un compte à rebours.
Exemple en image
En suivant scrupuleusement les instructions de ce tutoriel, vous serez en mesure de réaliser facilement, rapidement, et de manière très professionnelle, un bouton dont l’affichage est conditionné par l’écoulement d’une durée déterminée par un compte à rebours. Le rendu final de ce guide professionnel est disponible sur certains articles et pages de votre site GoTutoriel. Les images ci-dessous présentent deux captures d’écran réelles du rendu final de ce tutoriel (à partir de l’article Elementor Pro sur votre site GoTutoriel), en faisant apparaitre l’instant de l’écoulement du compte à rebours et enfin l’instant où le bouton de téléchargement devient visible et opérationnel.
En espérant que notre tutoriel vous aidera à configurer facilement, et de manière efficace, le ou les boutons dont vous avez besoin pour rendre votre site WordPress attrayant, en bonne santé, et surtout rentable. En cas de besoin, surtout n’hésitez pas à nous laisser un commentaire sur la page de l’article, ou sur les réseaux sociaux, et ayez l’assurance que nos équipes d’experts vous répondront sans délai. Sachez bien que votre satisfaction est notre ultime source de motivation, et vos encouragements sont l’essence de nos efforts.
📢 Connectez-vous, et restez informé ! Rejoignez notre communauté en ligne dynamique et soyez le premier informé des offres exclusives, des événements passionnants et du contenu captivant. Ne manquez pas les dernières tendances, les discussions perspicaces et les interactions engageantes.
Abonnez-vous à nos réseaux sociaux dès maintenant et que le voyage numérique commence ! 🌐🔥
