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

Add the following script tag to the head, above the application.js file:
```
HTML<script src="//www.google.com/jsapi"></script>
```

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

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

Create a container with an ID for each ad on the page

HTML<body>
  <!-- content -->
  <div id="my_ad"></div>
</body>

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.