Comment utiliser les annonces Google AdSense sur les sites Web Responsive

<p style&equals;"text-align&colon; justify&semi;">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&rsquo&semi;il puisse s&rsquo&semi;adapter à n&rsquo&semi;importe qu&rsquo&semi;elle taille d&rsquo&semi;écran&semi; que ce soit les téléphones mobiles&comma; tablettes&comma; ordinateurs de bureau ou même la télévision&period;<&sol;p>&NewLine;<p style&equals;"text-align&colon; justify&semi;">Nous allons faire en sorte que nos annonces publicitaires soit adaptatives ou responsive avec JavaScript&period; L&rsquo&semi;annonce sera automatiquement servie en fonction de la largeur du navigateur du visiteur&period;<&sol;p>&NewLine;<blockquote>&NewLine;<p style&equals;"text-align&colon; justify&semi;"><a href&equals;"https&colon;&sol;&sol;webmasters&period;googleblog&period;com&sol;" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">Google recommande<&sol;a> également le design adaptatif car cette approche améliore l&rsquo&semi;indexation&period; D&rsquo&semi;après Google &colon; &lsquo&semi;Le contenu optimisé pour ordinateur et le contenu optimisé pour mobile utilise une seule et même URL&period;&rsquo&semi;<&sol;p>&NewLine;<&sol;blockquote>&NewLine;<p style&equals;"text-align&colon; justify&semi;">Si vous utilisé des annonces Google AdSense sur votre site web responsive&comma; vous avez sans doute remarqué que&comma; contrairement à votre contenu&comma; les annonces Google ont une largeur fixe et elles ne diminuent ni n&rsquo&semi;augmentent en fonction de la taille de l&rsquo&semi;appareil&period;<&sol;p>&NewLine;<p style&equals;"text-align&colon; justify&semi;">Par exemple&comma; si vous utilisez une annonce publicitaire de dimensions 728&&num;215&semi;90&lpar;largeur x hauteur&rpar; sur votre site Web&comma; l&rsquo&semi;annonce peut s&rsquo&semi;étendre bien au-delà de l&rsquo&semi;écran de l&rsquo&semi;appareil si quelqu&rsquo&semi;un visite votre site Web sur un smartphone &lpar;320 pixels de large&rpar; ou une tablette de résolution inférieure&period;<&sol;p>&NewLine;<p style&equals;"text-align&colon; justify&semi;">Les annonces Google AdSense ne sont pas encore responsive par défaut&comma; mais vous pouvez utiliser un morceau de code JavaScript pour les adapter à la taille de l&rsquo&semi;écran&period; Vous pouvez créer plusieurs ensembles d&rsquo&semi;annonces &lpar;par exemple 768&&num;215&semi;90&comma; 468&&num;215&semi;60 et 300&&num;215&semi;250&rpar; et en fonction de la taille &lpar;largeur&rpar; de l&rsquo&semi;appareil de l&rsquo&semi;utilisateur&comma; le format le plus approprié sera affiché&period;<&sol;p>&NewLine;<p style&equals;"text-align&colon; justify&semi;">Voici le code JavaScript correspondant &colon;<&sol;p>&NewLine;<blockquote>&NewLine;<p style&equals;"text-align&colon; justify&semi;">&lt&semi;script type&equals; »text&sol;javascript »&gt&semi;<br &sol;>&NewLine;google&lowbar;ad&lowbar;client &equals; « ca-publisher-id »&semi;<br &sol;>&NewLine;if &lpar;window&period;innerWidth &gt&semi;&equals; 800&rpar; &lbrace;<br &sol;>&NewLine;google&lowbar;ad&lowbar;slot &equals; « ad-unit-1 »&semi;<br &sol;>&NewLine;google&lowbar;ad&lowbar;width &equals; 728&semi;<br &sol;>&NewLine;google&lowbar;ad&lowbar;height &equals; 60&semi;<br &sol;>&NewLine;&rcub; else if &lpar;window&period;innerWidth &lt&semi; 400&rpar; &lbrace;<br &sol;>&NewLine;google&lowbar;ad&lowbar;slot &equals; « ad-unit-2 »&semi;<br &sol;>&NewLine;google&lowbar;ad&lowbar;width &equals; 300&semi;<br &sol;>&NewLine;google&lowbar;ad&lowbar;height &equals; 250&semi;<br &sol;>&NewLine;&rcub; else &lbrace;<br &sol;>&NewLine;google&lowbar;ad&lowbar;slot &equals; « ad-unit-3&Prime&semi;&semi;<br &sol;>&NewLine;google&lowbar;ad&lowbar;width &equals; 468&semi;<br &sol;>&NewLine;google&lowbar;ad&lowbar;height &equals; 60&semi;<br &sol;>&NewLine;&rcub;<br &sol;>&NewLine;&lt&semi;&sol;script&gt&semi;<br &sol;>&NewLine;&lt&semi;script type&equals; »text&sol;javascript »<br &sol;>&NewLine;src&equals; »http&colon;&sol;&sol;pagead2&period;googlesyndication&period;com&sol;pagead&sol;show&lowbar;ads&period;js »&gt&semi;<br &sol;>&NewLine;&lt&semi;&sol;script&gt&semi;<&sol;p>&NewLine;<&sol;blockquote>&NewLine;<p style&equals;"text-align&colon; justify&semi;">N&rsquo&semi;oubliez pas de remplacer les identifiants google&lowbar;ad&lowbar;client et google&lowbar;ad&lowbar;slot avec vos propres valeurs &lpar;vous pouvez les trouver facilement dans votre code JavaScript AdSense&rpar;&period;<&sol;p>&NewLine;<p style&equals;"text-align&colon; justify&semi;">Le plus important est le paramètre <strong>window&period;innerWidth<&sol;strong>&period; Ce paramètre contient la largeur &lpar;en pixels&rpar; de la fenêtre du navigateur de l&rsquo&semi;utilisateur et une fois que vous savez cette valeur&comma; vous pouvez donc afficher des annonces AdSense plus grandes ou plus petites &period;<&sol;p>&NewLine;<p style&equals;"text-align&colon; justify&semi;">Bien qu&rsquo&semi;il est recommandé de vérifier ces modifications de code avec google&comma; cela ne devrait pas&comma; à mon avis&comma; violer les conditions d&rsquo&semi;utilisations de Google AdSense&comma; car nous ne redimensionnons pas les annonces et nous ne modifions pas le code JavaScript&period; Nous sommes juste entrain de servir un bloc d&rsquo&semi;annonces différent basé sur la taille du navigateur du visiteur&period;<&sol;p>&NewLine;