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>（或其他）元素中。有什么想法吗？

P.S。没有像jQuery这样的库，我不能在页面上插入HTML，除非它是通过JavaScript而且必须插入特定的<div>我命名（我正在使用Sizzle作为我的JS库，如果这有帮助）

Answer 1

用于异步加载其他答案提议的AdSense脚本的简单技术无效，因为Google在AdSense脚本中使用了document.write()。 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来注入Google将发送给document.write()的HTML内容。完成后，它将恢复本机document.write()功能。

这项技术借鉴于此：http://blog.figmentengine.com/2011/08/google-ads-async-asynchronous.html

Answer 2

我的网页上已经有了adsense，但也在我的博客文章中向占位符注入了新广告。在我想要广告注入的地方，我添加了一个带有＆＃39; adsense-inject＆＃39;然后我在文档准备就绪时运行这个脚本，我知道已经为其他广告加载了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包含管理广告，这很有用，在我的情况下，我有很多静态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

根据this page，可以生成脚本标签并动态填充他们的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

好的，这似乎对我有用，但是与往常一样，如果Google更改其模型，则可能会弃用它，并且不再起作用。只需将Google提供的标准代码剥离为3个组成部分即可。

Google JS脚本链接（在整个页面上包含一次）。<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="GOOGLE_KEY" data-ad-client="GOOGLE_CLIENT" data-ad-slot="GOOGLE_AD_ID"></ins>标记，包含Google提供的原始定义。这是您需要通过JS构建代码将其放置在DOM中的任何地方。我倾向于简单地使用.innerHTML将其作为字符串插入，但是您可以执行document.createElement并根据需要手动添加所有属性。我个人认为这两种方式都没有明显的优势，因此可以归结为品尝恕我直言。
（通过javascript代码）构建页面后，最后调用构建Google广告：(adsbygoogle = window.adsbygoogle || []).push({});

此方法非常适合我，在通过循环遍历AJAX JSON结果集（例如）来构建分页结果时，可以将Google Ad <ins></ins>标签放置在列表的中间，然后在构建列表后，然后进行Google JS调用（上面的3）。并且它使我可以重建列表并根据需要多次调用Google Ad build（上面的3）（例如，下一页或每页更改编号）。

希望这会有所帮助。

Answer 7

这很有趣。我也很困惑。 Adsense告诉我们：

将广告单元代码复制并粘贴到页面的body标签之间

将此代码放置在您希望广告展示的位置。在每个页面上为每个单独的广告单元执行此操作。

这意味着我们应该有这样的悟性：

$.ajax('/api/xxx',
  function(data) {
    var container = $("#container")
    for (var item of data) {
      container.append( handleItem(item) );
    }
    // and append ALL the code, include two script tags and one ins tag.
    container.append(
`<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-xxx"
    data-ad-slot="xxx"
    data-ad-format="auto"
    data-full-width-responsive="true"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>`)
  }
)

???，只需将所有示例代码粘贴到您要展示广告的所有位置。

Answer 8

这些方法可行，但它们不适用于https。如果您想动态投放广告并使用https，则需要注册Double Click For Publishers。

我在我的网站上遇到了这个问题，所以我整理了一个npm模块来解决这个问题。希望你觉得它很有用。

Use Adsense in Single Page Web Apps

该链接包含如何在单页Web应用程序中使用该模块的完整示例代码。

安装模块后，此代码会在您指定的元素中显示您的广告： ViceView.showAdsense({adslot: {slot: "myslot", sizes: "[300,100]", id:"your adsenseid"}, element: "element", adwidth: 300, adheight: 100});

使用JavaScript进行动态Adsense插入

8 个答案: