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

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

2014/12/09 追記

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

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

crossdomain.xml

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

エラーはこんなの。


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 を作成


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ファイルに配置すると。

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

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた