ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

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

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

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

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

ゆめぴょん(@yume_pyon)です。こんちはっ!

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

【WordPress】ブログ高速化AA達成!6つのW3TotalとCloudFlare併用設定【WordPress】ブログ高速化AA達成!6つのW3TotalとCloudFlare併用設定

「W3 Total Cache」はWordPressで作成されたブログの表示速度…

(追記)今回の現象はブラウザにも依存する可能性があります。私が試したところ、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ははずした方がいいでしょうけど。

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:jQueryで簡単設置!ページ先頭,トップへ戻るボタンの高機能な設定方法スタイルシート/CSSの優先順位について解説!Webデザインに生かそう:次記事»
ページ
↑先頭
ホーム