Ruby on RailsのアプリでGoogle Adsenseが表示されない場合の対処法

Railsアプリケーションのページ遷移でGoogle Adsenseが表示されないことがあります。

turbolinksが邪魔をしていることが多いようです。
ページ遷移をAjaｘで行いjs,cssをコンパイルさせないため非常に高速で動いてくれます。
Railsのadsenseが表示されないで検索すると、このturbolinksを無効にする方法がよく掲載されています。
しかしデフォルトで装備されている機能を無効にすることは好ましくありません。
それで、今回は別の方法、根本的に解決する方法,
ミドルウエアのRackを修正する方法を記載します。

まず今回の原因となるCORSについて説明します。

Rack::Coresとは

Webアプリケーションのクロスオリジンリソースシェアリング（CORS）のサポートを提供してくれます。
CORS仕様により、WebアプリケーションはJSONPなどの回避策を使用せずにクロスドメインAJAX呼び出しを行うことができます。

そもそもCORSがなぜ必要なの？

ブラウザには、クロスドメイン通信を拒否する仕組みがあります。
これはどういうことかというと、釣り情報をみたいと思って訪問したサイト（オリジン）に悪意のあるJavaScript等が埋め込まれていて、他のサイトへデータを勝手送っていたら困ります。それでオリジンのサイト以外からはデータのやり取りができないように作られています。クロスサイトスクリプティングを防止するためです。

CORSとは

上記を踏まえて、CORSとはオリジン以外のサーバーからデータを取得する仕組みです。W3C が推進している世界標準のルールです。

どんな時につかう？

Google Adsenseなどには大変便利なしくみですね。広告は、Googleが自動で作成しますね。それはオリジンのサイト（ブロガー等）に訪問したユーザーのページに広告を表示するために、Google Adsense のサーバーにアクセスしますね。
CORSをサポートしていないと、これがうまく表示されません。死活問題ですね。
だから必要です。

CORSの実装 RailsにてAdsense 表示のため

gem の install

gem 'rack-cors'

そしてbundle install

config/application.rb へ追記 (Rails 5)

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :options]
  end
end

insert_beforeを使用すると、Rack :: Corsがスタックの先頭で実行され、他のミドルウェアによる干渉を受けないようになります。

そもそもRackとは

RackはRubyでWEBアプリケーションを開発する時に利用する、ミドルウエアです。

ミドルウエアとは

コンピュータの基本的な制御を行うオペレーティングシステム(OS)と、各業務処理を行うアプリケーションソフトウェアとの中間に入るソフトウェアのことです。
ミドルウエアが、アプリケーションの起動・停止・監視などを含めた制御をします。
大切ですね。
で , config.middlewareでミドルウエアスタックに新しくミドルウエアを追加しています。同時に読み込み順位も設定しています。

$ rails middleware で確認できます。

確認してみます。

//先頭に入っていますね
use Rack::Cors
use Rack::Sendfile
use ActionDispatch::Static
use ActionDispatch::Executor
use ActiveSupport::Cache::Strategy::LocalCache::Middleware
use Rack::Runtime
use Rack::MethodOverride
use ActionDispatch::RequestId
use ActionDispatch::RemoteIp
use Sprockets::Rails::QuietAssets
use Rails::Rack::Logger
use ActionDispatch::ShowExceptions
use WebConsole::Middleware
use ActionDispatch::DebugExceptions
use ActionDispatch::Reloader
use ActionDispatch::Callbacks
use ActiveRecord::Migration::CheckPending
use ActionDispatch::Cookies
use ActionDispatch::Session::CookieStore
use ActionDispatch::Flash
use ActionDispatch::ContentSecurityPolicy::Middleware
use Rack::Head
use Rack::ConditionalGet
use Rack::ETag
use Rack::TempfileReaper
use Warden::Manager
run ThaiDict::Application.routes

Adsenseにてソースを取得

必要な箇所にに貼り付ける。
上記の設定が済んでいるので、これだけで表示されます。
CORS良いですね。(^^)

Blog