(記事内リンクにPR含む場合があります)

Googleアドセンスが表示されない!jQueryが動かない!原因は…

Webデザイン

アドセンスがおかしいと頭痛い

今日の午後、ふと自分のブログを見てみたら、jQueryやJavaScriptが動いていないのを発見しました。Google Adsenseが表示されてない箇所もあります。すぐ原因はつきとめたのですが、対策は1つではダメでした。

JavaScriptだけが動かない場合の切り分けは結構簡単です。私は高速化のためにCDNサービスCloudFlareを利用しているのですが、このサービスの中にRocket LoaderというJavaScriptを、あと読みする機能があります。これが第一の原因でした。

ゆめぴょんです。こんちはっ(^^)/

CloudFlareのRocket Loaderについては、以前に記事に書いたこともあります。今まではかなり便利で高速化にも貢献しているサービスに満足でした。

(追記)今回の現象はブラウザにも依存する可能性があります。私が試したところ、Macの最新のChromeとFirefoxでは発生しましたが、IE9,10、iOSとMacのSafariとOperaでは問題ありませんでした。

CloudFlareでRocket Loaderを利用している場合

今回の対象者はかなりのカスタマイズ好きだと思います。まずWordPressを利用している場合はプラグイン「W3 Total Cache」と「CloudFlare」を併用している人です。それ以外にRocket LoaderをONにする方法を私は知りません。CF側で出来ましたっけ?

もしこの機能を使っている人で、まだアドセンスやjQueryが動かない人は、「Automatic」から「Off」にしてください。「Manual」では、私の環境ではツイッターボタンなど一部に不具合が発生しました。

設定の場所はWordPress管理画面の左メニューから「Performance」の「General Settings」をクリック。そしてかなり下の方の「CloudFlare」です。「Rocket Loader」を「Off」にして「Save」すればOKです。

そして念のため、CloudFlareのキャッシュもクリアしておきましょう。上の設定と同じ場所にクリアボタン(Purge Cache)があります。ちなみに私の環境ではキャッシュクリアは不要でしたので、クリアの前にリロードで試してください。

ちなみに私は一部のアドセンスには「Rocket Loader」を利用しない設定をしていたため、今回の事態でも普通に動いていました。この設定方法についても、上の記事に書いていますので、今後のために参考にしてみてください。

(追記)今回は「data-cfasync=”false”」は全く効かないようです。アドセンスの表示・非表示が切り替わるのは、CloudFlareのRocket Loaderが(設定中などで)不安定だからだと思います。

Rocket Loaderを利用していないのにJavaScriptが動かない場合

上の設定により、多くのスクリプトが動くようになりました。しかしまだ動かないJavaScriptが存在することに気づきました。

いろいろ試した結果、一部のJavaScriptコードに設定した非同期化のコードが原因でした。ただ今までは普通に動いていたので、これもCloudFlareの何らかのトラブルにより発生したのだと思います。

具体的には、JavaScriptの非同期化コード「async」や「defer」を設定している場合は、取り除くと全てのスクリプトが動き出しました。ちなみにGoogle Adsenseだけはこのコードがあっても動くようです。

最後まで忘れていたのは、サイドバーのウィジェットの「はてなブックマークの人気記事」でした。

まとめ:今日のゆめぴょんの知恵

この記事を書いてる間にも、Rocket Loaderを使ってもアドセンスが動き出したり、「async」「defer」をつけても動いたり動かなかったりしています。

もしかするとCloudFlare側で何かの調整中かもしれませんし、改善に向かっている可能性もあります。明朝までには安定するかもしれないので、放置しておくのもいいかもしれません。Rocket Loaderははずした方がいいでしょうけど。

ゆめぴょんでした。ちゃおっ!

タイトルとURLをコピーしました