質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google Analytics

Google AnalyticsはGoogleが開発した無料のウェブ分析のソリューションです。複数のクライアント側のAPIとデータをエクスポートし管理するREST APIも格納されています。

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1378閲覧

Google analytics設置でMixed Contentエラー

raiha

総合スコア4

Google Analytics

Google AnalyticsはGoogleが開発した無料のウェブ分析のソリューションです。複数のクライアント側のAPIとデータをエクスポートし管理するREST APIも格納されています。

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/12/17 03:46

前提・実現したいこと

現在公開中のサイトに、Google analyticsを新規設置したく、トラッキングコードを設置したのですが、エラーが発生しサイトレイアウトが崩れています。何とかエラーを解決し、Google analyticsを設置したい。

発生している問題・エラーメッセージ

設置したページの左上に「?」が表示され、Mixed Contentエラーが発生してしまい、サイトレイアウトが崩れてしまっています。
デベロッパーツールで表示されたエラーは以下の通りです。

Mixed Content: The page at 'analytics設置サイトURL' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Lato|Roboto+Slab:300,400,700'. This request has been blocked; the content must be served over HTTPS.

設置したページはベタのhtmlファイルで、サーバはエックスサーバーです。
記載したソースは以下です。(トラッキングIDはGA_MEASUREMENT_IDに置換しております。)

<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID'); </script>

試したこと

上記エラーから、サイトがhttpsなのにhttpを呼び出しているのが問題と考えたのですが、analyticsが何故このファイルを読んでいるのか、何処からその設定が解除できるのか、そもそもこの考え方自体が間違っているのかも判断できず、お手上げ状態です。
gtag.jsではなくanalytics.jsなら動くのではと試しましたが、状況は変わりませんでした。
なお、トラッキングデータ自体は問題なく取得出来ているので、このエラーさえ解消されてサイトレイアウトが崩れなくなればいいのですが…

どなたかお知恵をお貸しいただけませんでしょうか。どうぞよろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

文字通りMixed Content Errorというやつです。
上記のanalyticsのトラッキングコードはより安全なhttpsでリクエストされています。
ですがエラーにも吐かれている'http://fonts.googleapis.com/css?family=Lato|Roboto+Slab:300,400,700'はhttpでリクエストされておりMixed Contentとなってしまいます。
httpとhttpsが混ざってしまうとページ全体の安全性が下がりhttpsの効果が弱まるため、(割と最近から?)httpでのリクエストをブロックするようになってた気がします。
それによりこのstyle sheetの読み込みをchromeがブロックして発生したエラーかと思われます。レイアウトが崩れるのもstyle sheetの読み込みがブロックされたからでしょう.

詳しくはこの記事がいいと思いますWhat is mixed content?

ですのでstyle sheetの読み込みをhttp -> httpsにすれば治ると思われます。

(厳密には違うが実質的に)httpsでの通信でHTTP/2で行える(server pushやstream通信と言った高速化に有用),暗号化によりより安全といったメリットがあり、とりあえずhttpsを使うという姿勢でいいような気がします

投稿2019/12/17 03:58

shinyaigeek

総合スコア112

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

raiha

2019/12/17 04:59

shinyaigeek 様 早速のご回答、有難うございます。 やはりそこが原因ですか…もう少し調査、対応してみます。有難うございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問