使用 JavaScript 的动态 Adsense 插入

IT技术 javascript api adsense sizzle
2021-03-17 19:43:44

我不敢相信这有多难找到,但即使在 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 库)

6个回答

用于异步加载其他答案提出的 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

@JohnnyOshika 哦妈妈咪呀,答案来自 2013 年!
2021-04-20 19:43:44
@enRaiser 我和你一样讨厌做这些事情,你当然不必使用它。:-) 但是当我陷入困境时它救了我。它让我能够继续解决实际的业务问题,而不是与我无法控制的 AdSense 脚本作斗争。
2021-04-23 19:43:44
没有测试过,但听起来很合理。很好的解决方法。另一方面,这种技术可以通过 google-ads 代码中的适当编程来抢占...
2021-04-27 19:43:44
@Irina Googledocument.write()在 2021 年仍在使用吗?
2021-05-08 19:43:44
谢谢!唯一对我有用的东西。
2021-05-11 19:43:44

我已经在我的页面上安装了 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({});
        }); 
    });
嗨,你能向我解释一下这是做什么的吗: (adsbygoogle = window.adsbygoogle || []).push({});
2021-04-20 19:43:44
太好了 - 这个解决方案是最简单、侵入性最小的。为我工作。
2021-05-08 19:43:44
@VladimirKostov,这直接来自提供给 AdSense 使用的代码。我敢打赌,它的目的是让客户端页面将需要呈现的广告传达给 AdSense 脚本。以这种方式执行此操作允许将广告排队,同时在后台异步加载 AdSense 渲染脚本。
2021-05-09 19:43:44

这是一个更新的实现,如果您不需要使用常见的外部 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>
这是对 Google 官方标签的优雅重写。与 Vue.js 完美配合。
2021-05-20 19:43:44

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

根据这个页面,可以生成脚本标签并动态填充它们的 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);
}
是的 :) 我知道它适用于随机文件,但有一个特定的原因它不适用于 adsense,我现在记不清了,因为已经有一段时间了
2021-04-22 19:43:44
尽管如此,它仍然是一个有趣的工具。有点可怜的人的 XmlHttpRequest ......
2021-04-24 19:43:44
这种技术不适用于 AdSense,因为 AdSense 在脚本中使用了 document.write。document.write 仅在页面创建期间有效,并且由于您正在异步加载脚本,因此在 AdSense 脚本执行时页面创建过程已经完成。在 Google 停止使用 document.write 之前,此技术将不起作用。关于 document.write 的更多信息:stackoverflow.com/a/802943/188740
2021-04-24 19:43:44
不是用 adsense,但我刚刚验证了这允许你在 Jsfiddle 中执行任意外部 JS ......
2021-05-06 19:43:44
这是很久以前的事了,但是动态插入有问题。我确定另一个 SO 线程上有这个原因,但是是的,无论如何它一年前都无法与 Adsense 脚本一起使用。你最近试过吗?
2021-05-13 19:43:44