ページ遷移でGoogle Adsenseが表示されない

原因

Rails5では、ルートページではgoogleAdsenseが表示されるのに、ページ遷移を行うと広告が表示されなくなる現象が起きます。

これはデフォルトで入っている turbolinksによる影響 で、ページ遷移をAjaxで行いjs,cssをコンパイルさせないため非常に高速で動いてくれるものの、広告が読み込まれずに表示できないという状態です。

turbolinksを無効にすれば解決はするのですが、デフォルトで入っているものは推奨されているからであり、極力省かないほうが良いです。
それで、今回は別の方法、根本的に解決する方法,ミドルウエアのRackを修正する方法を記載します。

解決手順

1. gemのインストール

Gemfileに以下を追記して $ bundle install を行う。

gem 'rack-cors'

2. application.rbに設定を追記

(config/application.rb)

module YourApp
  class Application < Rails::Application
    # ...
    
    # Rails 5 の場合、以下を追記
    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*', headers: :any, methods: [:get, :post, :options]
      end
    end

    # Rails 3/4 の場合、以下を追記

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

3. 確認

サーバーを再起動してページにアクセスしてください。ページ遷移を行なっても正しく表示されます！

当たり前ですけど、すでにAdesense広告を表示するコードは該当する箇所に貼ってある状態を想定しています。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-xxxxxxxxxxxxxxxxx",
          enable_page_level_ads: true
     });
</script>

まとめ

今回使ったのは rack-cors というgemです。

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

$ rails middleware でミドルウェア一覧を確認できます。

コンピュータの基本的な制御を行うオペレーティングシステム(OS)と、各業務処理を行うアプリケーションソフトウェアとの中間に入るソフトウェアのことです。

ミドルウエアが、アプリケーションの起動・停止・監視などを含めた制御をします。

今回はRackのCors というミドルウエアを新しく追加し、オリジン以外のサーバー(今回はgoogleAdsenseサーバー)からデータを取得してクロスドメイン通信を許可して広告を表示させました。