Динамическая вставка AdSense с помощью JavaScript

Question

Я не могу поверить, как трудно это найти, но даже в документах для разработчиков Google я не могу найти это.Мне нужно быть в состоянии динамически, только с JavaScript AdSense вставки.Я также посмотрел на StackOverflow, и некоторые другие спрашивали об этом, но без ответа.Надеюсь, это будет лучшее объяснение и получит некоторые ответы.

По сути, пользователь вставляет мой скрипт, давайте назовем его my.js (не могу сказать, что это конкретно на данный момент.) my.jsзагружается и в my.js на их странице отображаются некоторые встроенные медиа, тогда мне нужно каким-то образом добавить сгенерированный HTML-код из:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxx";
/* my.js example Ad */
google_ad_slot = "yyy";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Внутри определенного <div> (или любого другого) элемента.Любые идеи?

PS Нет библиотек, таких как jQuery, и я не могу вставить HTML на страницу, если это не через JavaScript, и его нужно вставить в определенное имя <div>, которое я назвал (яиспользуя Sizzle для моей библиотеки JS, если это поможет)

Answer 1

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

Чтобы сделать эту работу, вам потребуется перезаписать document.write() поэтому, когда его вызывает скрипт AdSense, вы можете самостоятельно управлять 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 = 'https://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

Answer 2

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

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

Answer 3

Вот обновленная реализация, это полезно, если вам не нужно управлять рекламой, используя общий внешний 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>

Answer 4

Как насчет того, чтобы переменные (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); 

Answer 5

Согласно этой странице , можно генерировать теги сценариев и заполнять их поля 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);
}

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