Turbolinks で Google adsense が正しく表示されない時の対処方法
サイトパフォーマンスの強い味方 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を読み込む。
こんな感じ。
.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はアドセンスのページのページ右上に表示されています。
ビューファイルに配置
後は好きな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のページで確認しましょう。
参考
他にもTurbolinkで起こるいろいろな問題を解決する方法がこのページで紹介されています。（英語）
A collection of tutorials for how to get your favorite javascript libraries, plug-ins, and snippets working with Turbolinks.