Insertion Dynamique Adsense Avec JavaScript

la technique simple utilisée pour charger asynchrone le script AdSense proposé par d'autres réponses ne fonctionnera pas parce que Google utilise le document.write() à l'intérieur de l'AdSense de script. document.write () ne fonctionne que pendant la création de page, et au moment où le script chargé asynchrone exécute, la création de page sera déjà terminée.

pour que cela fonctionne, vous aurez besoin d'écraser le document.write () donc quand le script AdSense l'appelle, vous pouvez manipuler le DOM vous-même. Voici un exemple:

<script>
window.google_ad_client = "123456789";
window.google_ad_slot = "123456789";
window.google_ad_width = 200;
window.google_ad_height = 200;

// container is where you want the ad to be inserted
var container = document.getElementById('ad_container');
var w = document.write;
document.write = function (content) {
    container.innerHTML = content;
    document.write = w;
};

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
document.body.appendChild(script);
</script>

l'exemple cache d'abord le document natif.write () function dans une variable locale. Puis il écrira le document.write () et à l'intérieur de celui-ci, il utilise innerHTML pour injecter le contenu HTML que Google enverra à la documentation.écrire.)( Une fois que cela est fait, il restaure le document natif.write() de la fonction.

cette technique a été empruntée ici:http://blog.figmentengine.com/2011/08/google-ads-async-asynchronous.html

j'ai déjà adsense sur ma page mais j'injecte aussi de nouvelles annonces dans les espaces réservés dans mon article de blog. Où je veux une injection de publicité j'ajoute un div avec une classe de 'adsense-inject' puis j'exécute ce script quand le doc est prêt et je sais que le script adsense a déjà été chargé pour les autres publicités: -

    $(document).ready(function()
    {
        $(".adsense-inject").each(function () {
            $(this).append('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3978524526870979" data-ad-slot="6927511035" data-ad-format="auto"></ins>');
            (adsbygoogle = window.adsbygoogle || []).push({});
        }); 
    });

Qu'en ayant le var (google_ad_client, etc) toujours dans la tête et dynamiquement ajouter l'autre partie comme ceci:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
myDIV.appendChild(script); 

Selon cette page, il est possible de générer des balises de script et de remplir leurs champs src à la volée - ce que suggère @noiv (ma version ici devrait être autonome; aucune bibliothèque html ou js externe n'est nécessaire). Avez-vous essayé ceci? Il ne semble pas si difficile...

function justAddAdds(target_id, client, slot, width, height) {
  // ugly global vars :-P
  google_ad_client = client;
  google_ad_slot = slot;
  google_ad_width = width;
  google_ad_height = height;
  // inject script, bypassing same-source
  var target = document.getElementById(target_id);
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
  target.appendChild(script);
}

Voici une mise à jour de l'implémentation, c'est utile si vous n'avez pas besoin de gérer les annonces en utilisant un javascript externe commun inclure, dans mon cas, j'ai beaucoup de fichiers statiques html et cela fonctionne bien. Il offre également un point de gestion unique pour mes scripts AdSense.

var externalScript   = document.createElement("script");
externalScript.type  = "text/javascript";
externalScript.setAttribute('async','async');
externalScript.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.getElementsByTagName('body')[0].appendChild(externalScript);

var ins   = document.createElement("ins");
ins.setAttribute('class','adsbygoogle');
ins.setAttribute('style','display:block;');/*add other styles if required*/
ins.setAttribute('data-ad-client','ca-pub-YOUR-CLIENTID');
ins.setAttribute('data-ad-slot','YOUR-SLOTID');
ins.setAttribute('data-ad-format','auto');
document.getElementsByTagName('body')[0].appendChild(ins);

var inlineScript   = document.createElement("script");
inlineScript.type  = "text/javascript";
inlineScript.text  = '(adsbygoogle = window.adsbygoogle || []).push({});'  
document.getElementsByTagName('body')[0].appendChild(inlineScript); 

Exemple d'utilisation:

<script type="text/javascript" src="/adinclude.js"></script>

ces méthodes fonctionneront mais elles ne fonctionneront pas pour https. Si vous souhaitez placer des annonces dynamiquement et utiliser https, vous devrez vous inscrire pour Double clic pour les éditeurs.

j'ai eu ce problème sur mon site donc j'ai mis en place un module npm pour résoudre ce problème pour moi-même. J'espère que vous trouverez utile.

utilisez Adsense dans les applications Web à Page Unique

Le lien contient plein code d'exemple de la façon d'utiliser le module dans une page web App.

une Fois le module installé ce code va afficher votre annonce dans l'élément que vous spécifiez: ViceView.showAdsense({adslot: {slot: "myslot", sizes: "[300,100]", id:"your adsenseid"}, element: "element", adwidth: 300, adheight: 100});