Comment ajouter une annonce Sticky Footer dans Wordpress ?

Dans cet article, je vais vous montrer comment vous pouvez ajouter une annonce de pied de page collant en bas à votre site Web Wordpress.

Les annonces collantes dans Adsense sont plus performantes pour les propriétaires de sites, car les chances de clics sur ce type d'annonces augmentent. ainsi, le taux de clics global, l'impression et les gains s'améliorent.

En fait, de nombreux grands sites Web et maisons d'édition d'actualités utilisent ces annonces collantes de pied de page pour augmenter leurs revenus Adsense.

Alors, comprenons ce que sont les publicités collantes, des exemples de publicités collantes et comment vous pouvez les mettre en œuvre sur votre site Web Wordpress.

Qu'est-ce qu'une annonce collante ?

Comme son nom l'indique , les publicités collantes sont des publicités qui restent à une certaine position sur le site Web malgré le défilement de la page par les utilisateurs . De cette façon, les publicités collantes obtiennent une meilleure exposition et attirent l'attention des visiteurs.

Vous pouvez également obtenir le plus d'impressions d'annonces dans cette annonce collante. Il existe déjà une fonctionnalité d'annonce collante dans les paramètres d'annonces automatiques d'Adsense appelée " annonces d'ancrage ".

Mais nous ne pouvons pas le personnaliser et afficher les publicités selon notre propre choix. C'est pourquoi, dans cet article, je vais vous montrer le moyen le plus simple d' ajouter des annonces de pied de page collantes dans Wordpress .

Certaines personnes les ont également appelées publicités collantes inférieures ou publicités flottantes .

Les utilisateurs peuvent facilement ignorer l'annonce affichée en cliquant sur le bouton croix au-dessus de l'annonce. De cette façon, vous obtiendrez plus de revenus sans trop gêner l'expérience utilisateur.

Ici, une chose à noter est que n'utilisez aucun élément cliquable au-dessus de ces annonces et qu'elles doivent être séparées du reste du contenu. Vous pouvez consulter les directives Adsense sur les publicités collantes ici.

Consignes Adsense pour les annonces persistantes

• Ne surchargez pas votre page avec des publicités. Vous devez vous assurer que toutes les publicités, y compris les publicités persistantes, occupent moins que la quantité de contenu sur l'écran ou la fenêtre d'affichage visible.
• Les annonces collantes verticales ne doivent jamais chevaucher ou sous-coucher tout autre contenu de page.
• L'annonce ne doit jamais être trop proche du contenu, des fonctions de navigation du site (y compris les barres de défilement) ou d'une autre annonce.
• Toute implémentation d'annonce doit fournir une différenciation claire entre l'annonce et le contenu.
• Les blocs d'annonces fixes horizontaux ne peuvent pas s'éloigner des bords de la fenêtre ni suivre le curseur.
• Les blocs d'annonces fixes horizontaux ne peuvent pas s'éloigner des bords de la fenêtre ni suivre le curseur.
• Les annonces Sticky Footer ne doivent pas couvrir plus de 30 % de l'écran de votre ordinateur, tablette ou mobile.

Étapes pour ajouter une annonce de pied de page collant dans Wordpress

Pour ajouter l'annonce collante du bas dans Wordpress, suivez les étapes ci-dessous

Étape 1 : Connectez- vous à votre tableau de bord Adsense et créez un bloc d'annonces display réactif.

Étape-2 : Maintenant, copiez le identifiant de l'éditeur et code d'espace publicitaire de données et remplacez-le dans le code ci-dessous.

 <div class='sticky-ads'> <div class='sticky-ads-close'><svg viewbox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div> <div class='sticky-ads-content'> <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxxx" data-ad-slot="xxxxxxxxx"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div> <style> .sticky-ads{ position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; }.sticky-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } .sticky-ads .sticky-ads-close svg { width: 22px; height: 22px; fill: #000; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px;</style>

Étape-3 : Allez maintenant à Apparence > éditeur de thème > Footer.php fichier et recherchez la balise </body>.

Étape 4 : Collez le code juste au-dessus et mettez à jour le fichier.

Maintenant, les annonces de pied de page collant seront affichées sur votre site Web Wordpress. Vous pouvez essayer d'ouvrir la page Web en mode incognito si cela fonctionne ou non.

Résoudre les problèmes d'annonce collante

Si le code ne fonctionne pas correctement, vous devez vérifier si vos plugins de mise en cache comme le cache WP-Rocket ou LiteSpeed, etc. sont à l'origine de ce problème. Dans certains cas, les paramètres Supprimer les CSS ou javascript inutilisés provoquent ce type de problème, empêchant le chargement du code dans le frontal.

Vous pouvez essayer de désactiver temporairement le plugin, vider le cache et vérifier en mode incognito. Je vous recommande également d'ajouter le code dans la section d'en-tête de votre site Web. De plus, dans certains cas, vous pouvez voir une annonce vide. Cela se produit parfois si le taux de remplissage des annonces est faible. Cela signifie que s'il n'y a pas suffisamment d'annonces à afficher du côté AdSense, l'espace publicitaire s'affichera vide. Essayez d'ouvrir une ancienne page populaire sur laquelle vous obtenez le plus de trafic et vérifiez si l'annonce s'affiche ou non.

Ou vous pouvez utiliser ce code alternatif Sticky Ad sur votre site Web. (faites-moi savoir si cela fonctionne ou non)

Guide vidéo

Si vous ne souhaitez pas modifier le code du thème, vous pouvez utiliser un plugin de gestion de code qui vous permet d'ajouter des codes dans la section d'en-tête et de pied de page.

Pour cela, je préfère utiliser le plugin « Header Footer Code Manager » de « 99robots ». Il s'agit d'un plugin de gestion de code gratuit dans Wordpress.

vous pouvez également définir des règles d'affichage pour ce code, comme afficher uniquement sur ordinateur ou mobile, charger uniquement sur la page d'accueil ou la page de publication, etc.

Si vous utilisez la version Pro du thème Kadence, vous pouvez coller le code dans la section "Scripts d'en-tête/pied de page" du personnalisateur.

Vous pouvez activer cette fonction en allant dans Apparence > kadence .

Au fait, le thème Kadence est livré avec de nombreuses fonctionnalités uniques et vous pouvez facilement personnaliser votre site Web Wordpress.

Voici quelques-uns des tutoriels du thème Kadence [ Vidéo ], qui pourraient vous intéresser :

Comment masquer cette annonce de pied de page collante sur la page d'accueil ?

Vous pouvez masquer l'annonce sticky footer de la page d'accueil de votre site Wordpress en bloquant le chargement du code d'annonce.

Donc, pour cela, vous pouvez utiliser un plugin de gestionnaire de code mentionné ci-dessus ou un plugin de gestionnaire Adsense comme Adinserter sur votre site Web.

Ici, collez le code dans l'un des blocs et définissez-le uniquement sur la page de publication ou vous pouvez cocher plusieurs options ici.

Maintenant, définissez l'emplacement sur le pied de page et conservez l'alignement au centre, comme indiqué dans l'image ci-dessus.

Maintenant, enregistrez le code et l'annonce de pied de page collante ne s'affichera que sur la page de publication uniquement et ne se chargera sur aucune autre page. Ainsi, de cette manière, vous pouvez personnaliser davantage le chargement du code d'annonce.

Remarque : Si vos annonces ne s'affichent pas correctement ou s'affichent sur des pages très limitées, je vous recommande d'utiliser le code dans la section d'en-tête au lieu du pied de page. Aussi, n'utilisez pas trop d'annonces sur une seule page Web.

Conclusion

J'espère que vous avez ajouté avec succès les annonces de pied de page collantes à votre site Web Wordpress. Si vous rencontrez des problèmes au cours de ce processus ou si vous avez des doutes, n'hésitez pas à me le demander dans la section des commentaires.

Dites-moi également si l'annonce collante améliore votre taux de clics (CTR) ou non.

N'oubliez pas de vous abonner à notre chaîne YouTube pour plus de tutoriels comme celui-ci.