Zバッファ

元システムエンジニア(SE)でファイナンシャルプランナーの管理人がおくるiPhoneやAndroidスマホなど家電ガジェット系各種レビューと、秘境スポットなどの旅行ネタやロボアドバイザーなどの資産運用関係の体験談を語るライフハックブログ。

CloudFlareの設定が原因でGoogleアナリティクスが読み込まれず

CloudFlare社

Missing analytics.js script.

Wordpressで運用しているサイトでは高速化のためにCloudFlareを使っているのですが、そのCloudFlareの設定が原因で上記エラーが発生していました

photo credit: Garrett Heath via photopin cc

この「Missing analytics.js script.」というエラーが表示されていたのは、グーグルのブラウザであるグーグルクロームの拡張機能(アドオン)「Tag Assistant」を使って運用しているWordpressのサイト(テンプレートは人気のSTINGER5を使用)を確認した時。


因みにTag Assistantは、Google公式拡張機能でGoogleアナリティクスやGoogleアドワーズといった計測ツールタグの設置状況や正常に動作しているかを調べることができます。

Tag Assistantで表示されたエラー内容はグーグルアナリティクスのJavaScriptが見つからないということですが、アナリティクスのレポートを確認しても特にエラーは報告はありませんでした。

しかし、ずっとTag Assistantで赤字でエラー表示されるのも気分的に宜しくないですし、自分が把握できていない問題が潜んでいるのも嫌なので、なんとかこのエラーを解決することを試みました。

グーグルアナリティクスのトラッキングコード貼り方変更

まず最初にやったのがグーグルアナリティクスのスクリプトの貼り方変更。

それまではAll in One SEOプラグインの中で設定していたのですが、それを止めてheader.phpに直接トラッキングコードを書くようにしました。

All in One SEOプラグインでgoogleAnalytics

しかし、エラーは解消されず。

WordPressのキャッシュクリア

次に疑ったのがキャッシュ系のプラグイン

運営しているサイトで使っているのがW3 Total Cacheプラグイン。

このW3 Total Cacheには多種多様なキャッシュ機能が用意されていますが、私が利用しているのはブラウザキャッシュとCloudFlareの設定のみ。

W3 Total Cache

で、このキャッシュをすべてクリアして確認してみましたが、それではエラーは解消せず。

うーん、どうすればいいのかと悩んだ末、そういえば以前CloudFlareのロケットローダーでJavaScriptが読み込まれなくなったという記事を見かけたような気がするということで、 W3 Total Cacheプラグインの設定からCloudFlareのロケットローダーを使用しない設定に変更。

CloudFlareのロケットローダー

この対応後、改めてサイトを開いてTag Assistantでステータスを確認すると「Missing analytics.js script.」のエラーが解消されていました!やっほー

Missing analytics.js scriptエラーの再現性

エラー解消後、改めてCloudFlareのロケットローダーをOnにしてみて確認したところ、Tag Assistantでのエラーは確認できず、この現象の再現性はありませんでした。

CloudFlareのロケットローダー機能は以前βステータスなので、利用する場合は注意が必要です。

CloudFlareのロケットローダはβー