Turbolinks で Google adsense が正しく表示されない時の対処方法

Shunsuke Sawada

サイトパフォーマンスの強い味方 Turbolinksですが、Googleアドセンスの広告が正常に表示されませんでした。対処法を書き留めておきます。Rails4を対象としています。

2014/12/09 追記

一応出るようになったのでメモ。
http://www.oshigoto.com.au このサイトの広告です。
アドセンスから「コードタイプ 非同期」を選んで取得。

でも Cross domain のエラーがでるので、crossdomain.xml をルートに置いた。
エラーは消えないけど、アドセンスは表示されるようになった。

crossdomain.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0"?>

<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/crossdomain-
policy.dtd">
<cross-domain-policy>
  <allow-access-from domain="*.doubleclick.net" secure="false"/>
  <allow-access-from domain="*.2mdn.net" secure="false"/>
  <allow-access-from domain="*.dartmotif.net" secure="false"/>

  <allow-access-from domain="*.doubleclick.net" secure="true"/>

  <allow-access-from domain="*.doubleclick.com" secure="true"/>
  <allow-access-from domain="*.doubleclick.com" secure="false"/>
  <allow-access-from domain="*.2mdn.net" secure="true"/>
  <allow-access-from domain="*.dartmotif.net" secure="true"/>
  <allow-access-from domain="*.gstatic.com" secure="false"/>
</cross-domain-policy>

エラーはこんなの。

1
2
3
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://www.oshigoto.com.au" from accessing a frame with origin "http://googleads.g.doubleclick.net". Protocols, domains, and ports must match.

あまりTurbolinksの話とは関係なくなってしまったけど....
まぁちょと様子を見ます。

参考

Javascript errors from Google Adsense - Stack Overflow

Load external assets across domains - DoubleClick Rich Media Help

2014/12/09 追記

http://reed.github.io/turbolinks-compatibility/doubleclick_for_publishers.html
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.

この方法だともうダメみたいですね。
でもブログには広告が出てるが... 確かに新しく作った広告は表示されませんでした。
対処法リサーチせねば。

あらかじめスクリプトを読み込む

Viewファイル(ほとんどの場合 application.html.erb)にjavascript_include_tagの記述があると思いますが、その上にscriptタグを挿入してwww.google.com/jsapiを読み込む。

こんな感じ。

Screen Shot 2013-11-12 at 9.43.23 PM

.coffeeファイルを作成

assets/javascript に google_ad.js.coffee を作成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class 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

class 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

window.MyAdSense = new AdSense "アドセンスのID"

オリジナル:Turbolinks Compatibility

アドセンスのIDはアドセンスのページのページ右上に表示されています。
google adsense

ビューファイルに配置

後は好きなViewファイルに配置すると。

1
2
3
4
5
6
7
8
9
<div id="my_ad_01"></div>

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

ad_slot とは広告のIDのことなので、Adsenseのページで確認しましょう。

adsense

参考

他にもTurbolinkで起こるいろいろな問題を解決する方法がこのページで紹介されています。(英語)

Turbolinks Compatibility

A collection of tutorials for how to get your favorite javascript libraries, plug-ins, and snippets working with Turbolinks.

5
Shunsuke Sawada

おすすめの記事

acts-as-taggable-on タグを表示させる順番を決めたい
Railsを4.2にバージョンアップしたら、Vagrantのローカル開発環境にアクセスできなくなった問題
Railsのバリデーションエラー後にレイアウトが崩れるとき