google.com/dfp

Official Implementation

HTML  <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'>
  googletag.cmd.push(function() {
  googletag.defineSlot('/123456789/ad', [200, 200], 'div-gpt-ad-123456789-0').addService(googletag.pubads());
  googletag.pubads().enableSingleRequest();
  googletag.enableServices();
  });
  </script>

HTML  <!-- Ad -->
  <div id='div-gpt-ad-123456789-0' style='width:200px; height:200px;'>
  <script type='text/javascript'>
  googletag.cmd.push(function() { googletag.display('div-gpt-ad-123456789-0'); });
  </script>
  </div>

Solution

1. Add the following script tag to the head, above the application.js file:

   HTML<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>

2. Define this class somewhere in your application's JS:

   COFFEESCRIPTclass @Gpt
     constructor: ->
       @slots = {}
       window.googletag = googletag || {}
       window.googletag.cmd = googletag.cmd || []
   
       $(document).on 'page:fetch', => @clearAds()
       $(document).on 'page:load', => @evaluate()
   
       @evaluate()
   
     evaluate: ->
       for slot in $('.gpt-ad')
         $slot = $(slot)
         cachedSlot = @slots[$slot.data('gpt-div-id')]
   
         if cachedSlot? then @refreshSlot(cachedSlot) else @defineSlot($slot)
   
     defineSlot: ($slot) ->
       divId = $slot.data('gpt-div-id')
       path = $slot.data('gpt-path')
       dimensions = $slot.data('gpt-dimensions')
   
       googletag.cmd.push =>
         slot = googletag.defineSlot(path, dimensions, divId).addService(googletag.pubads())
         googletag.enableServices()
         googletag.display(divId)
         @slots[divId] = slot
   
     refreshSlot: (slot) ->
       googletag.cmd.push ->
         googletag.pubads().refresh([slot])
   
     clearAds: ->
       googletag.cmd.push ->
         googletag.pubads().clear()

3. Create an instance of the GooglePublisherTag class once:

   COFFEESCRIPT$ ->
     @gpt ||= new Gpt()

4. For each ad, create an element with the class gpt-ad and the ad attributes as data attributes:

   HTML<div class="gpt-ad" data-gpt-div-id="div-gpt-ad-123456789-0" data-gpt-path="/12345678/ad" data-gpt-dimensions="[200, 200]"></div>

Related Issues: #36

Credit: Richard Venneman