Question

我真的想要一个将DFP广告转换为ajax jquery UI标签的解决方案。

我到处研究过，谷歌没有提供任何支持或文档。我有一个示例js类，我一直在尝试。到目前为止，我不能为我的生活得到一个广告，以便在加载标签时进行渲染。

我已经使用此gem https://github.com/digineo/google_dfp加载了所有必需的依赖项。但我真的希望ablitiy能够从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>

使用Jquery UI选项卡加载Double Click for Publishers广告

1 个答案: