Comment utiliser les annonces Google AdSense sur les sites Web Responsive

Le web design adaptatif ou Responsive web design en anglais est une technique simple mais puissante permettant de modifier le design de votre site pour qu’il puisse s’adapter à n’importe qu’elle taille d’écran; que ce soit les téléphones mobiles, tablettes, ordinateurs de bureau ou même la télévision.

Nous allons faire en sorte que nos annonces publicitaires soit adaptatives ou responsive avec JavaScript. L’annonce sera automatiquement servie en fonction de la largeur du navigateur du visiteur.

Google recommande également le design adaptatif car cette approche améliore l’indexation. D’après Google : ‘Le contenu optimisé pour ordinateur et le contenu optimisé pour mobile utilise une seule et même URL.’

Si vous utilisé des annonces Google AdSense sur votre site web responsive, vous avez sans doute remarqué que, contrairement à votre contenu, les annonces Google ont une largeur fixe et elles ne diminuent ni n’augmentent en fonction de la taille de l’appareil.

Par exemple, si vous utilisez une annonce publicitaire de dimensions 728×90(largeur x hauteur) sur votre site Web, l’annonce peut s’étendre bien au-delà de l’écran de l’appareil si quelqu’un visite votre site Web sur un smartphone (320 pixels de large) ou une tablette de résolution inférieure.

Les annonces Google AdSense ne sont pas encore responsive par défaut, mais vous pouvez utiliser un morceau de code JavaScript pour les adapter à la taille de l’écran. Vous pouvez créer plusieurs ensembles d’annonces (par exemple 768×90, 468×60 et 300×250) et en fonction de la taille (largeur) de l’appareil de l’utilisateur, le format le plus approprié sera affiché.

Voici le code JavaScript correspondant :

<script type=”text/javascript”>
google_ad_client = “ca-publisher-id”;
if (window.innerWidth >= 800) {
google_ad_slot = “ad-unit-1”;
google_ad_width = 728;
google_ad_height = 60;
} else if (window.innerWidth < 400) {
google_ad_slot = “ad-unit-2”;
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = “ad-unit-3″;
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

N’oubliez pas de remplacer les identifiants google_ad_client et google_ad_slot avec vos propres valeurs (vous pouvez les trouver facilement dans votre code JavaScript AdSense).

Le plus important est le paramètre window.innerWidth. Ce paramètre contient la largeur (en pixels) de la fenêtre du navigateur de l’utilisateur et une fois que vous savez cette valeur, vous pouvez donc afficher des annonces AdSense plus grandes ou plus petites .

Bien qu’il est recommandé de vérifier ces modifications de code avec google, cela ne devrait pas, à mon avis, violer les conditions d’utilisations de Google AdSense, car nous ne redimensionnons pas les annonces et nous ne modifions pas le code JavaScript. Nous sommes juste entrain de servir un bloc d’annonces différent basé sur la taille du navigateur du visiteur.

Partager
Kamleu Noumi Emeric

Je suis un ingénieur en télécommunications et je suis le créateur du site tech-connect.info. J'ai une grande passion pour l'art, les hautes technologies, les jeux, les vidéos et le design. Aimant partager mes connaissances, Je suis également blogueur pendant mon temps libre. Vous pouvez me suivre sur ma page sociale Facebook.

Voir les Commentaires

Publié par
Kamleu Noumi Emeric

Articles récents

Microsoft annonce la sortie du nouveau Office 2024 pour Windows et Mac cette année

Lors du lancement de la version 2021 de Microsoft Office il y a un peu…

19 mars 2024

Samsung lève le voile sur ses puces en substrat de verre, une avancée technologique majeure

Les avancées technologiques dans le domaine des puces ont permis de doubler la puissance de…

18 mars 2024

Apple rachète une start-up en IA spécialisée dans l’optimisation des composants de fabrication

Il⁢ semblerait qu'Apple ait fait ⁢une ​nouvelle acquisition dans⁣ le domaine de⁤ l'intelligence artificielle avec…

16 mars 2024