jquery - jQuery append Google Adsense to div

Question

I'm having issues with google adsense and it loading before my jQuery and killing my codes, so I thought I'd try to append the Google Adsense javascript to the appropriate div using the document ready function, here's the code I'm trying to write:

<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>

But I'm not so good writing javascript/jQuery so if someone could help me implement this that would be fantastic.

The error in FF I'm currently getting is "Error: google_protectAndRun is not defined". I'm not sure what that means, but I'm guessing I've written the jQuery code wrong.. lol

score 22 · Accepted Answer

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

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

然后将谷歌代码放在页面末尾的容器中。

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

score 3 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

在尝试使用此处的代码并失败后，我最终将我正在使用的 jQuery 对象放入一个新的 html 页面中。一旦我这样做了，我只需使用 iframe 将其放置在带有 adsense 的页面上。

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

score 1 · Accepted Answer

在页面的某处添加一个带有 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);

这对我有用。

score 0 · Accepted Answer

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

基本的 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://stackoverflow.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>

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

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

score 0 · Accepted Answer

我就是这样做的。简单而简短。

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

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

score 0 · Accepted Answer

只有这段代码有效

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。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

jquery - jQuery append Google Adsense to div

9 回答 9

Related

Reference