使用 Jquery UI 标签加载 DFP 广告

Question

我真的想要一个将广告从 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)

Answer 1

查看我创建的插件：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>