Load Double Click for Publishers adverts using Jquery UI tabs

StackOverflow https://stackoverflow.com/questions/15939462

Question

I would really like a solution to rendering adverts from DFP into an ajax jquery UI tab.

I have researched everywhere and google has provided no support or docs. I have a sample js class which I have been experimenting with. So far I cannot for the life of me get an advert to render when the tab has loaded.

I have already loaded all the necessary dependancies using this gem https://github.com/digineo/google_dfp. But I would really like the ablitiy to dynamically load an advert from ajax loaded content?

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)
Was it helpful?

Solution

Check out the plugin I have created: https://github.com/coop182/jquery.dfp.js

It allows you to control DFP with jQuery... and it allows you to choose when DFP is loaded which will help you get it working with dynamically created elements.

Let me know if you have any questions either here or on github.

EDIT: Sorry just realised I had replied to one of your other questions letting you know about my plugin... might not be what you are looking for I guess... but I have an example of what you are wanting to do anyway... and it might help you figure out where your code is going wrong.

<!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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top