1

我真的很想要一个将广告从 DFP 呈现到 ajax jquery UI 选项卡中的解决方案。

我到处研究过，谷歌没有提供任何支持或文档。我有一个我一直在试验的示例 js 类。到目前为止，我一生都无法在标签加载时获得要呈现的广告。

我已经使用这个 gem https://github.com/digineo/google_dfp加载了所有必要的依赖项。但我真的希望能够从 ajax 加载的内容中动态加载广告吗？

class @ScorecardViewController

  constructor: (@element) ->
    $(document).bind "tabsload", =>
      @tabLoaded()

  getGraphData: ->


  tabLoaded: ->
    @panel = $(CricTabsController.getLoadedPanel(@element))

    @loadAdverts()

    graphs = @panel.find(".match-graph").map (index, value) ->
      $(value).attr("id")
    @getGraphData() if graphs.length

  loadAdverts: ->
    tags = @panel.find("div.google-dfp")

    googletag.cmd.push( ->
      tags.each ->
        $this = $(@)
        googleAdSlot = googletag.defineSlot( $this.data('unit'), [$this.width(), $this.height()], $this.attr("id")).addService(googletag.pubads())
        googletag.pubads().enableAsyncRendering()
        googletag.enableServices()
        googletag.display($this.attr("id"))
        googletag.callback()
    )



$ ->
  $el = $('#sections-matches-scorecard')
  if $el.length
    new ScorecardViewController($el)
4

1 回答 1

2

查看我创建的插件：https ://github.com/coop182/jquery.dfp.js

它允许您使用 jQuery 控制 DFP……它允许您选择何时加载 DFP，这将帮助您使用动态创建的元素。

如果您有任何问题，请在此处或在 github 上告诉我。

编辑：抱歉刚刚意识到我已经回答了你的其他问题之一，让你知道我的插件......我猜可能不是你想要的......但我有一个你想要做的例子。 ..它可能会帮助你找出你的代码哪里出错了。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Content via Ajax</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <script src="https://raw.github.com/coop182/jquery.dfp.js/master/jquery.dfp.js"></script>
  <script>
  $(function() {
    $( "#tabs" ).tabs({
      load: function( event, ui ) {
        $('.adunit:not(".display-block")').dfp({
          dfpID: '15572793',
          enableSingleRequest: false
        });
      }
    });
  });
  </script>
</head>
<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="1.html">Tab 1</a></li>
    <li><a href="2.html">Tab 2</a></li>
    <li><a href="3.html">Tab 3</a></li>
    <li><a href="4.html">Tab 4</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>
</body>
</html>

1.html

Tab 1 <div class="adunit" data-adunit="Leader" data-dimensions="728x90"></div>

2.html

Tab 2 <div class="adunit" data-adunit="Button" data-dimensions="160x180"></div>

3.html

Tab 3 <div class="adunit" data-adunit="Skyscraper" data-dimensions="160x600"></div>

4.html

Tab 4 <div class="adunit" data-adunit="Footer" data-dimensions="468x60"></div>
于 2013-04-11T16:55:29.547 回答