Динамическая вставка Adsense с JavaScript

Ответ 1

Простая методика, используемая для асинхронной загрузки AdSense script, предложенная другими ответами, не будет работать, потому что Google использует document.write() внутри AdSense script. document.write() работает только во время создания страницы, и к моменту запуска асинхронной загрузки script создание страницы уже завершено.

Чтобы выполнить эту работу, вам необходимо перезаписать document.write(), поэтому, когда AdSense script называет ее, вы можете самостоятельно манипулировать DOM. Вот пример:

<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>

Пример сначала кэширует встроенную функцию document.write() в локальной переменной. Затем он перезаписывает document.write() и внутри него, он использует innerHTML для вставки содержимого HTML, которое Google отправит в document.write(). После этого он восстанавливает собственную функцию document.write().

Этот метод был заимствован отсюда: http://blog.figmentengine.com/2011/08/google-ads-async-asynchronous.html

Ответ 2

Как насчет того, что в голове всегда есть vars (google_ad_client и т.д.) и динамически добавляет другую часть следующим образом:

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

Ответ 3

У меня уже есть adsense на моей странице, но также добавьте новые объявления в заполнители в моей статье в блоге. Когда я хочу рекламировать рекламу, я добавляю div с классом "adsense-inject", тогда я запускаю этот script, когда документ готов, и я знаю, что adsense script уже загружен для других объявлений: -

    $(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({});
        }); 
    });

Ответ 4

Согласно этой странице, можно генерировать теги script и заполнять их поля src на лету - вот что @noiv (моя версия здесь должна быть автономной, не требуется внешних библиотек html или js). Вы пробовали это? Это не кажется таким трудным...

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);
}

Ответ 5

Вот обновленная реализация, это полезно, если вам не нужно управлять рекламой с использованием общего внешнего javascript include, в моем случае у меня много статических html файлов, и это работает хорошо. Он также предлагает единую точку управления для моих сценариев 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); 

Пример использования:

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

Ответ 6

Эти методы будут работать, но они не будут работать для https. Если вы хотите разместить объявления динамически и использовать https, вам нужно будет зарегистрироваться для Double Click For Publishers.

У меня была эта проблема на моем сайте, поэтому я собрал модуль npm для решения этой проблемы для себя. Надеюсь, вы сочтете это полезным.

Использовать Adsense в веб-приложениях с одной страницей

Ссылка содержит полный пример кода использования модуля в одностраничном веб-приложении.

После установки модуля этот код отобразит ваше объявление в указанном вами элементе: ViceView.showAdsense({adslot: {slot: "myslot", sizes: "[300,100]", id:"your adsenseid"}, element: "element", adwidth: 300, adheight: 100});