SNSでシェアする

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

SNSでシェアする

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

js-vs-turbolinks

題名長すぎな!!まぁそんなことは置いておくとして。。

以下の記事でもTurbolinksに関連することを書いたわけなんですが、、

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

特定のアドネットワークでは未だdocument.write()というレガシーなjsの処理が採用されているようで、このdocument.write()の処理が、rails4.0以降より標準採用されているgemであるTurbolinksとの相性が最悪で、せっかくサイトに設置した広告が表示されないという現象が起こります。

これはrailsアプリでアフィリエイトする方にとってはかなり致命的な点で、今すぐにでも解決すべき問題であると思います。

今回問題となったアドネットワーク

今回、僕がrailsアプリに広告として採用したのは「i-mobile」というアドネットワークでした。

この「i-mobile」が発行するアフィリタグの中の外部スクリプトの呼び出し先の処理の中でdocument.write()があったわけなんですね。

色々調べた結果、、このブログでもあるWordPressのようなTurbolinksが使われていないサービスではこの問題は起きなかったのですが、rails(4.0以降のTurbolinksが採用されている環境下)では、document.write()の処理とTurbolinksがうまく連携せずエラーを起こしてしまうことがわかりました。

document.write()の処理とTurbolinksを共存させるのはなかなか難しいみたいです。
(後述しますが解決策が無いわけではないようですが、かなり手間っぽい)

ということで、使いたいアドネットワークの外部スクリプトの呼び出しの中にdocument.write()の処理が入っているものを広告として採用する場合に関しては一旦Turbolinksを排除することにしてみました。

→ 「おい、ちょっと待て!Turbolinksってなんやねん!?」って人は、上記でもご紹介したこちらの記事に簡単に概要も書いていますのでご参考ください。

スポンサーリンク

てことでTurbolinksをrailsアプリから排除します(白目)

Turbolinksをrailsから排除する方法は以下です。

gemfileからTurbolinksをコメントアウトする

application.html.erbからturbolinks部分を削除
削除前の状態

↓削除後

application.jsからturbolinks部分を削除

そしてbunde install

これで無事Turbolinksとはサヨナラできます。(ちょっと寂しい…)

何がともあれ、これで広告の表示エラー問題は解消されたはずです。
(これでも表示されない場合は別問題かと)

document.write()とTurbolinksをうまく共存させられるような解決方法は他にないのか!?

そりゃ、僕だってお互いをうまく共存させる方法を考えましたし、調べもしました。

結論から申し上げると、解決方法はあるようです。

ただ、その前に一つ言えることは、、、
『なんでアドネットワーク側がまだdocument.write()なんて使ってんの!?』
ってことですよね。(アドネットワーク側には早く改善してほしいです)

このdocument.write()なんて書き方はかなりレガシーな方法らしく、今ではほとんど使われていないのだそう。

アドネットワーク側にもdocument.write()なんて採用しないでほしいですし、Turbolinks側にもちゃんと対応できるようにしてもらいたいものです。(お互い仲良くしよーぜ)

ただ、そんなこんなで色々調べていくうちに、「Friendly iFrame」という方法で、この問題はどうにか無理矢理でも対応はできるみたいです。

がしかし、そこまでしてやることか!?と思ってしまい、Turbolinksとおさらばすることを選んだ僕だったのでした。

もし、興味がある方は「document.write Friendly iFrame」とかでググってみると色々出てくるので、参考にしてみてはいかがでしょうか。

僕は残念ながら、そこまでして実装する気にはなれませんでした…。

まとめ

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

今回の方法は少しばかり強引な選択でしたが、もちろん共存させる方法もアリだと思いますし、きっとそちらの方がいいでしょう。

僕の場合、ここにそこまで時間をかけたくなかったのでこの結果で対応しました。

少しでもご参考になれば幸いです!

もしよろしければシェアやいいね!をお願いします☆

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