33

我不敢相信这是多么难找到，但即使在谷歌开发者文档中我也找不到。我需要能够动态地，只用 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>i 命名中（如果有帮助，我将Sizzle用于我的 JS 库）

4

9 回答 9

24

其他答案提出的用于异步加载 AdSense 脚本的简单技术将不起作用，因为 Googledocument.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注入 Google 将发送到的 HTML 内容document.write()。完成后，它将恢复本机document.write()功能。

这种技术是从这里借来的：http: //blog.figmentengine.com/2011/08/google-ads-async-asynchronous.html

于 2013-04-05T18:53:26.020 回答
13

我的页面上已经有 adsense，但也在我的博客文章中将新广告注入到占位符中。在我想要广告注入的地方，我添加了一个带有“adsense-inject”类的 div，然后在文档准备好时运行这个脚本，并且我知道已经为其他广告加载了 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({});
        }); 
    });
于 2016-03-29T05:27:20.130 回答
4

这是一个更新的实现，如果您不需要使用通用的外部 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>
于 2018-01-18T11:47:44.730 回答
3

始终将变量（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);
于 2012-02-17T13:56:22.610 回答
1

根据这个页面，可以动态生成脚本标签并填充它们的 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);
}
于 2012-08-01T19:06:09.600 回答
1

好的，这似乎对我有用，但与往常一样，如果谷歌改变他们的模型，这可能会被弃用并且不再有效。它只需要将 Google 提供的标准代码剥离成 3 个组成部分，它们是……

  1. Google JS 脚本链接（在整个页面上包含一次。）：<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

  2. <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，但您可以执行 adocument.createElement并根据您的要求手动添加所有属性。我个人认为这两种方式都没有明显的优势，所以归结为品尝恕我直言。

  3. 构建页面后（通过您的 javascript 代码），最后调用构建 Google 广告：(adsbygoogle = window.adsbygoogle || []).push({});

这种方法对我很有用，我可以在<ins></ins>通过循环遍历 AJAX JSON 结果集（例如）构建分页结果时将 Google Ad 标签放在中间列表中，然后一旦构建了列表，我就可以调用 Google JS（3以上）。并且它允许我重建一个列表并根据需要多次调用 Google Ad 构建（上面的 3）（例如下一页或更改每页的数量）。

希望这可以帮助。

于 2019-12-22T17:42:59.143 回答
0

您可以使用 setTimeout("adsenseladen()", 1); 如果给予同意。

 <script type="text/javascript">
 function adsenseladen() {
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
 document.body.appendChild(script);
 }
 </script>


 <ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-##########"
 data-ad-slot="##########"
 data-ad-format="auto"
 data-full-width-responsive="true"></ins>

 <script>
 (adsbygoogle = window.adsbygoogle || []).push({});
 </script>
于 2022-02-03T09:39:35.253 回答
0

这有点好笑。我也很困惑。Adsense 告诉我们：

复制广告单元代码并将其粘贴到网页的正文标记之间

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

这意味着我们应该这样实现：

$.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>`)
  }
)

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

于 2020-04-12T03:48:56.617 回答
-2

这些方法可以使用，但不适用于 https。如果您想动态放置广告并使用 https，则需要注册 DFP 广告管理系统。

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

在单页 Web 应用程序中使用 Adsense

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

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

于 2016-02-09T05:39:43.767 回答