Google AdSense

support.google.com/adsense

UPDATE: Google has cancelled AJAX support for AdSense, so this solution no longer works. Your best course of action is to use DoubleClick for Publishers.

Official Implementation

HTML<script type="text/javascript">
google_ad_client = "ca-pub-1234567890123456";
google_ad_slot = "1234567890";
google_ad_width = 300;
google_ad_height = 250;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

Solution

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

    HTML<script src="//www.google.com/jsapi"></script>
  2. Define these classes somewhere in your application's JS:

    COFFEESCRIPTclass AdSense
      constructor: (@ad_client) ->
        if google?
          google.load 'ads', '1'
          google.setOnLoadCallback @initPage
          @ads = {}
          $(document).on 'page:fetch', =>
            @clearAds()
          $(document).on 'page:load', =>
            @initPage()
    
      initPage: =>
        ad.load() for id, ad of @ads
    
      clearAds: ->
        @ads = {}
        window.google_prev_ad_slotnames_by_region[''] = '' if window.google_prev_ad_slotnames_by_region
        window.google_num_ad_slots = 0
    
      newAd: (container, options) ->
        id = (options.format || 'ad') + '_' + container.id
        @ads[id] = new Ad @, id, container, options
    COFFEESCRIPTclass Ad
      constructor: (@adsense, @id, @container, @options) ->
    
      load: ->
        if @ad_object? then @refresh() else @create()
    
      refresh: ->
        @ad_object.refresh()
    
      create: ->
        @ad_object = new google.ads.Ad @adsense.ad_client, @container, @options
  3. Add this line to your application's JS (after the classes have been defined) to initialize AdSense

    COFFEESCRIPTwindow.MyAdSense = new AdSense "ca-pub-1234567890123456" # your google_ad_client id
  4. Create a container with an ID for each ad on the page

    HTML<body>
      <!-- content -->
      <div id="my_ad"></div>
    </body>
  5. Add a script tag to the body of the page that will initialize the ad:

    HTML<script>
    window.MyAdSense.newAd(document.getElementById('my_ad'), {
      'ad_slot': "1234567890",
      'ad_width': 300,
      'ad_height': 250
    });
    </script>

Inspiration: www.redkart.com/google_adsense.html

Related Issues: #151

Contributors

All solutions should be considered unofficial. There is no guarantee that a given solution will work with your application. If you find that a solution is insufficient, please let me know by submitting an issue on Github.