Comment utiliser Google AdSense sur des sites Web Responsive

Les sites Web ayant adopté un design Responsive, disposent d’un affichage qui s’adapte automatiquement à la résolution du navigateur du visiteur (ordinateur, mobile, tablette, TV…).

google-adsense-logo

Ils s’adaptent automatiquement à la taille de l’écran. Cela évite d’avoir une multitude de versions de son site en fonction des différents cas de figure rencontrés, ce qui est aussi une meilleure approche pour plaire à Google en évitant des URLs qui pointent vers le même contenu.

Avec la régie publicitaire AdSense, on intègre des encarts de pub ayant une taille fixe qui ne s’adaptent pas d’eux-même à la résolution de l’écran du visiteur, parfois ils peuvent être trop grands, parfois trop petits. Par exemple avec un encart 728 x 90 sur un site Web, il va déborder sur l’écran d’un visiteur qui utilise un téléphone portable (320 pixels de large) pour venir sur votre site. Google Adsense n’est pas Responsive par défaut.

Pour pallier à ce problème il faut passer par du JavaScript avec du code qui va tester la résolution de l’écran du visiteur avant d’afficher l’encart de pub qui va bien. Pour cela, il faut créer autant d’encarts que nécessaire (par exemple 768 x90, 468 60 et 300 x 250) et afficher sur l’écran du visiteur la publicité qui s’y adapte.

Cela donne un code de ce genre :

<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="xxxxx">
</script>

Évidemment il faut remplacer les variables google_ad_client et google_ad_slot avec vos propres valeurs de votre compte Adsense.

C’est la propriété window.innerWidth qui fait tout le travail dans ce script. Elle contient la largeur (en pixels) de la fenêtre de navigation du visiteur. Une fois que l’on connaît cette valeur, il est facile de présenter l’encart de pub le plus adapté en faisant les tests appropriés.

Cette technique de tests  A/B en JavaScript est également souvent utilisée pour tester la performance des encarts de pub Adsense en faisant varier les couleurs, les types, les tailles…

Les commentaires sont fermés.