无法让 Google DFP 广告在 jQuery-UI 选项卡中显示答案

【问题标题】：Trouble Getting Google DFP Ads to Display in jQuery-UI Tabs无法让 Google DFP 广告在 jQuery-UI 选项卡中显示
【发布时间】：2012-10-02 00:05:13
【问题描述】：

我在 jQuery-UI 标签（通过 ajax 加载）中显示 Google DFP 广告时遇到问题。我这里有一个例子：

http://www.anecka.com/google_dfp/

如您所见，初始页面加载和刷新工作正常，当用户在标签之间切换时，Google DFP 广告消失。 Google 控制台显示我的标记是正确的，并且控制台中没有 javascript 错误。

我有一个推送广告的方法：

function pushVerticalGoogleAd(slot, div_id) {
        googletag.cmd.push(function() { 
            googletag.defineSlot('/7085388/' + slot, [950, 80], div_id).addService(googletag.pubads());
            googletag.enableServices();
            googletag.display(div_id); 
        });
    }

每个选项卡都包含对该方法的调用，如下所示：

pushVerticalGoogleAd('homepage_top_950x80', 'ad1');

现在在你说这是因为我重复使用相同的 div-id 并且我声明了重复的插槽之前，我同意，但是每当我在服务器上随机化广告 div_ids 时，它仍然会出现这个问题。

我知道我可能在这里用鞋敲钉子，所以任何有 Google DFP 经验的人都知道我在哪里可以买到锤子？ :)

谢谢

【问题讨论】：

标签： javascript ajax jquery-ui-tabs google-dfp

【解决方案1】：

我认为您应该尝试使用刷新方法...在不确切知道您正在尝试做什么的情况下很难知道这是否适合您，但下面的代码至少允许广告通过多次点击显示。 ..

试试这个：

<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.24.custom.css" />
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="js/tabs.js"></script>
    <script type='text/javascript'>
        var googletag = googletag || {};
        googletag.cmd = googletag.cmd || [];
        (function() {
        var gads = document.createElement('script');
        gads.async = true;
        gads.type = 'text/javascript';
        var useSSL = 'https:' == document.location.protocol;
        gads.src = (useSSL ? 'https:' : 'http:') +
        '//www.googletagservices.com/tag/js/gpt.js';
        var node = document.getElementsByTagName('script')[0];
        node.parentNode.insertBefore(gads, node);
        })();
    </script>
    <script type="text/javascript">
        var divs = {};
        function pushVerticalGoogleAd(slot, div_id) {
            if(div_id in divs) {
                googletag.cmd.push(function() {
                    googletag.pubads().refresh([divs[div_id]]);
                });
            } else {
                googletag.cmd.push(function() {
                    divs[div_id] = googletag.defineSlot('/7085388/' + slot, [950, 80], div_id).addService(googletag.pubads());
                    googletag.enableServices();
                    googletag.display(div_id);
                });
            }
        }
    </script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#tabs-contain').tabs();
        });
    </script>
    <div id="tabs-contain">
        <ul id="tabs">
            <li><a href="ad1.html"><span>Tab 1</span></a></li>
            <li><a href="ad2.html"><span>Tab 2</span></a></li>
        </ul>
    </div>
</body>
</html>

【讨论】：