jQuery 将 Google Adsense 附加到 div

Posted 2023-03-06

技术标签:

【中文标题】jQuery 将 Google Adsense 附加到 div【英文标题】：jQuery append Google Adsense to div 【发布时间】：2010-11-11 16:29:59 【问题描述】：

我在使用 google adsense 时遇到问题，它在我的 jQuery 之前加载并杀死我的代码，所以我想我会尝试使用 document ready 函数将 Google Adsense javascript 附加到适当的 div，这是我的代码我想写：

<script language="javascript" type="text/javascript">
$(document).ready(function()
    $(".googleBanners").html("<script language='javascript' type='text/javascript'>\n" + "google_ad_client = 'pub-8487967187298044';\n" + "google_ad_slot = '1088799521';\n" + "google_ad_width = 250;\n" + "google_ad_height = 250;\n" + "</" + "script>\n" + "<script language='javascript' src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>" + "</" + "script>");
);
</script>

但是我不太擅长编写 javascript/jQuery，所以如果有人可以帮助我实现这个，那就太棒了。

我目前得到的 FF 错误是“错误：google_protectAndRun 未定义”。我不确定这意味着什么，但我猜我写错了 jQuery 代码.. 哈哈

【问题讨论】：

好的，所以我尝试了另一个角度，但我仍然遇到同样的错误。我在 Joomla 中创建了一个组件，它只显示谷歌广告代码 - sportsneo.com/google-ads 我想我会在使用 Ajaxify 时调用它 - 这对于我使用 ajax 内容完成的其他网站来说效果很好，但出于某种原因，这个 google adsense代码讨厌我.. sportsneo.com/fantasy-killed-my-hsc 【参考方案1】：

您不能以这种方式包含外部脚本。

要在页面加载后包含 javascript，您应该使用 jQuery 的 jQuery.getScript() 函数，但我不知道这是否适用于 Google Adsense。

更多信息可以在这里找到：

http://geek.littleredstring.com/17-load-adsense-last-jquery

【讨论】：

感谢您的链接，我在来这里之前尝试过，由于某种原因，adsense 代码杀死了我在 IE 中的其他 jquery 脚本.. :/ 将检查 getScript 的东西.. :)【参考方案2】：

我遇到了同样的问题。我最终通过使用 jQuery 加载一个 src 来解决它，该 src 指向一个包含 Google AdSense javascript 的 html 文件。这是相当不雅的，因为 Google AdSense 代码会创建一个<iframe>。而且，我碰巧正在使用 Facebook 应用程序，所以在我的情况下，我在 <iframe>（我用来解决 Firefox 错误的那个）中有一个 <iframe>（Google 广告）在一个 @ 987654324@（我的 Facebook 应用程序）。但是，它有效。

【讨论】：

只是一个建议，学习如何使用后期编辑工具将您的 HTML 标签突出显示为代码（以及任何代码）。那么你的帖子就会有意义:)【参考方案3】：

我这样做的方法是在我希望广告出现的位置放置一个占位符。

<html>
   <body>
      <div id="googleadgoeshere"></div>
   </body>
</html>

然后将 google-code 放入页面末尾的容器中。

<div id="adsense" style="display:none;">all the google javascript goes here</div>

然后我使用 jQuery 移动页面加载完成后 adsense 代码创建的 iframe。

$(window).load(function()
    $("#adsense").find("iframe").appendTo("#googleadgoeshere"); 
    $("#adsense").remove();
);

如果您只是尝试移动#adsense div，您最终会得到一个空白页。如果您尝试以其他任何方式执行此操作，您最终会得到一个空白页面。谷歌已经建立了积极的方式来检查代码没有被移动。如果是，您的页面将是空白的。为什么谷歌这样做是超出我的，但我发现这个解决方法对我有用......

【讨论】：

Google 对此有何政策？您是否违反了 AdSense 服务条款？我同意 Scott 的说法。如果这违反了 ad sense tos，有人需要澄清，因为我们不会对 adsense 代码进行任何更改。有没有人在 Adsense 论坛中询问这是否违反了 Google Adsense 政策这几乎对我有用。不知何故，广告在 appendTo 之后出现在页面的左上角。它确实将它移动到 googleadgoeshere，但它不显示该 div 的位置。另一个问题是广告脚本只在加载的第一页上执行。它不会在后续页面上执行或显示。【参考方案4】：

在我自己进行了广泛的实验失败后，丹尼的回答解释了这个问题的基本解决方案，所以谢谢！但是，我需要一个更精细的解决方案，因为我想在给定页面上替换未知数量的广告，所以我做了以下操作：

基本的 html (php) 大纲，ala Danny 的格式——请注意我根据 db 查询的行的各种因素增加了广告计数，即不可能事先知道计数：

<html>
   <body>
<? while ($r = mysql_fetch_assoc($rs))  if (true)  ?>
      <div class="adslide"><?=$ads++?></div>
<?   ?>
   </body>
</html>

我将稍后创建的 adsense div 的 css 分离出来，因为上面创建的每个 adslide div 都有一个：

<style> .adsense  display: none;  </style>

在这里，放置在页面底部，我将来自 google 的实际广告放入 html 中，计数取决于我从上方为它们有多少个广告位：

<?php for ($i = 0; $i < $ads; $i++)  echo '<div class="adsense">'.$adscript.'</div>';  ?>

最后，我循环浏览所有写入 html 的 adsense 广告，并将它们一一填充到在 html 中创建的 adslide 插槽中，确保每个广告和插槽仅使用/填充一次，方法是删除在我处理完他们或他们的班级后：

<script>
// http://***.com/questions/1142861/jquery-append-google-adsense-to-div
$(function ()  var b, a = $(".adsense").first();
 for (; a.length > 0; a = $(".adsense").first())
  b = $(".adslide").first(); b.append(a.find("iframe"));
  a.remove(); b.removeClass("adslide");  );
</script>

这是来自 google 的一个非常奇怪的错误。我只能假设它与谷歌创建的一些保护有关，以防止人们隐藏他们的广告（通过将它们放置在屏幕外或其他 html 元素或其他东西的后面）来尝试收集展示次数而不实际显示广告（即你可以放置一百万这些在 html 中，但用户永远不会看到它们，并且您收集现金，直到谷歌发现）。然而，这个错误并没有出现在 IE 和 Safari 中，而是出现在 Firefox 和谷歌自己的 Chrome 中……这很奇怪。他们绝对应该站在他们这边解决这个问题。

对于使用相同软件的人：我自己在实施 jQuery Carousel (http://sorgalla.com/projects/jcarousel/) 时遇到了这个问题，该轮播中的广告与用户提交的照片混合在一起。

【讨论】：

【参考方案5】：

只有这段代码有效

var i = 0;
obj = $(".materialContent p");
size = obj.size();
for (i=0; i<size; i++)

    cur = obj[i];
    if (i == 2)
    
        $("#mainTopAdvDiv").appendTo(cur);

不要删除，移动整个 div。

【讨论】：

【参考方案6】：

在尝试使用此处的代码但失败后，我最终将我正在使用的 jQuery 对象放入一个新的 html 页面中。完成此操作后，我只需使用 iframe 将其放置在带有 adsense 的页面上。

现在，adsense 和 jQuery 可以同时运行，没有任何问题。

【讨论】：

【参考方案7】：

在link 到通过ajax 加载的页面中，我设置了data-ajax="false"，然后在加载的页面上我要求用户使用后退按钮。

【讨论】：

【参考方案8】：

在您的页面某处添加一个带有adsense代码的隐藏DIV：

<div id='adsense' style="display:none">
    <script type="text/javascript"><!--
        google_ad_client = "ca-pub-xxxxxxxxxxxxxx";
        google_ad_slot = "xxxxxxxxxx";
        google_ad_width = 300;
        google_ad_height = 250;
        //-->
    </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

使用 javascript 为您的广告创建动态 DIV 以加载：

$("body").append("<div id='adslot' ></div>");

插入广告的jQuery代码：

var ad = $("#adsense").html();
$("#adslot").html(ad);

这对我有用。

【讨论】：

我如何为谷歌广告生成一个随机位置？例如，我有 10 个帖子并希望其中 2 个替换为谷歌广告但随机。我该怎么做@krisrak？【参考方案9】：

我会这样做。简单而简短。

<script>
$(window).load(function()
    $('#adsense').fadeIn(0);
);
</script>

<div id="adsense" style="display:none;">
   [YOUR ADSENSE SCRIPT HERE]
</div>

【讨论】：

以上是关于jQuery 将 Google Adsense 附加到 div的主要内容，如果未能解决你的问题，请参考以下文章

如何将 Google Adsense 添加到 Svelte/Sapper 网络应用程序？

申请Google adsense

来自 Google Adsense 的 Javascript 错误

内容安全政策能否与 Google Analytics 和 AdSense 兼容？

CSS修改Google adsense广告

如何在 VuePress 上实现 Google Adsense？