SNSでシェアする

【Rails】サイトに入れた広告が表示されない!?ページ遷移してJavaScript/jQuery部分が表示されない時の解決方法

SNSでシェアする

スポンサーリンク
 
是非購読クリックお願いします☆

jquery-turbolinks

アイキャッチ画像で若干ネタバレしてますが…笑

railsでアプリを作って、デプロイして、、

アクセスも集まってきたことだし、アドネットワークに登録して広告でも入れてみるか!!

そんな時にこの問題は起こります。。

「サイトに入れたはずの広告が表示されない!!」

これは入れる広告にもよりますが、
アドネットワークが発行するタグはほとんどの場合JavaScriptで書かれているんですね。

そのJavaScript部分がTurbolinksの仕様のせいで読み込まれていない、
というのがどうやら原因のようです。

また、ページ遷移する時なんかに、jQueryのreadyイベントが起きないため、
例えば$(function(){})に入ってる処理なんかは実行されなくなってしまいます。

rails4にデフォルトで導入されているgem「Turbolinks」の光と影…。

こいつは果たして便利なのか邪魔なのか…。

色々と見ていきましょう。

スポンサーリンク

そもそも「Turbolinks」ってなんやねん!?

まず「Turbolinks」ってなんなの!?
ってところからなのですが、実は割と便利なことをしてくれているんですね〜。

Turbolinksとは

  • TurbolinksはRails4.0からデフォルトで導入されたgemである。
  • railsアプリケーションを簡単にpjaxっぽくすることが出来る。
  • ajaxとhistoryAPI(popState, pushState)を利用して画面遷移
  • Turbolinksで遷移する場合は、titleとbodyとcsrfトークンを変更する
  • csrfトークンは変更された場合のみ
  • js, cssの読み込みを初回時に行い次回以降の読み込み処理を省略することで高速化する。

要はページの全部を読み込むのは遅いし無駄だから、必要な部分だけをJavascriptで差し替えようぜ、というPjaxをGem化してRailsに組み込んだものみたいです。

効率良くwebページのレスポンスを返してくれて、webページをより高速化してくれているわけですね!

えっ!?素敵やん!!と思うのですが、、JavaScriptとはやはり相性が悪いのですね〜。

Turbolinksの問題点を探ろう

  • $(window).load()が発火しないのでこの部分は処理されない。
  • $(document).ready()が発火しないのでこの部分は処理されない。
  • metaタグは更新されない。

というあたりがよく問題視されている点のようですね。

『だったらTurbolinksなんて無効化しちゃおうぜ!!』となるのも仕方ありません。

実際に色々ググってみると、Turbolinksを無効化する記事も沢山見受けられます。

でも、削除するのってなんかTurbolinksの良い部分も使えなくなっちゃうということになりますよね…

rails4.0からデフォルトで導入されたgemなわけですし、きっとすごく役に立つgemなんだと思うわけです。

ならTurbolinksとjavascriptをうまく共存してやれないのか!?

それが、ちゃんと解決方法があるんです!!

これで解決!!『jquery-turbolinks』を導入しよう!!

前フリがすごく長くなっちゃいましたが、ここからが本題です!

Turbolinksとjavascriptをうまく共存させてあげるgemがあるんですね〜。

さすがです。

周りのエンジニアの方には「いや、それ当たり前でしょ」と軽く小馬鹿にされましたが、、

私にとっては超、超、ありがたき情報だったのです!!

それでは、そんな『jquery-turbolinks』というgemを導入していきましょう。

というか、普通に1分で解決できるやん…と驚くはずです。

Gemfileにjquery-turbolinksを追記しましょう。

いつものようにbundle installしてやってください。

app/assets/javascripts/application.jsに以下を追記する。

ここで注意なのが、追記する場所です。
//= require jquery
より後で、
//= require turbolinks
より前に記述するようにします。

これでおk

これだけです。なんやこれ、解決早っ!!

rails serverを再起動して確認してみてください。

ちゃんとjavascript部分が表示できているはずです!!

あとは様々なイベントによって、readyの代わりに以下を使い分ける

  • page:fetch
  • page:load
  • page:restore
  • page:change

他にもイベントはあるようなので、こちらを参考にしてください。

jquery.turbolinksでも解決できないあなたへ

jquery.turbolinksを導入しても解決されない事例も残念ながら中にはあります。

そんな時は以下の記事を別で書いておりますのでご参考ください!

【Rails】アドネットワーク側(i-mobile)の外部スクリプトの呼び出し先でdocument.write()がある場合、Turbolinksとの相性が悪く広告が表示されない問題

まとめ

いかがでしたでしょうか?

デフォルトで入っているgemが及ぼすまさかの事態でしたが、ちゃんと解決できたのではないでしょうか!?

少しでもお役に立てると幸いです! それではまた!!

よかったらシェア、いいね!お願いします☆

スポンサーリンク
スポンサーリンク