TL;DR
ローカルファイルじゃ動かないよ。Webサーバーで実行してね。
localhostでもいいから、
URLのプロトコル名がhttp/httpsの状態で動作確認しましょ。
経緯
Googleアナリティクスのgtag.jsを使うことになったんですが、
公式の新しいタグを設定するの手順を見て、
本当にHTMLタグを追加するだけで設定が終わるの???なんて失礼なことを思いました。
いきなり実装中のアプリに入れたくなかったので、
「HTMLだけで実行できるならhtmlファイルを一個作ればいいじゃん!」
(貼り付け)
「できたよ!これで動くんだろう!」
のテンションでデスクトップに以下のhtmlファイルを作成しました。
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
<title>TEST</title>
</head>
</html>
ダブルクリックして開くと、画面が真っ白…のは当然で、
DevToolsのConsoleを確認すると、こちらも真っ白です。
ログが一つもありません。
そういうものかと思ったら、Googleアナリティクスのサイト(コンソール側)も反応していない。
これじゃ何も分からないので、拡張機能Google Analytics Debuggerを追加しました。
すると以下のワーニングが表示されました。
⚠️ Unallowed document protocol.
Event processing aborted.
原因
いざ、ソースコードへ。
Unallowed document protocol.
で検索すると一箇所のみヒット。
最小化されていて何が書いてあるか分からなかったが、
Chrome DevToolsのPretty Printで整形したおかげで読みやすくなっている。
var c = H.location.protocol;
"http:" != c && "https:" != c && (Xm("Unallowed document protocol.")
一部は謎のままだが、location.protocol
が"http:"
、"https:"
でない場合に"Unallowed document protocol."
が出力されるなのが分かりました。
あっ今はローカルファイルだから"file:"
だわ…
解決策
適当にVueのプロジェクトを新規作成して、同じタグを貼り付けてhttp://localhost:8080/
で実行したら今度はできました。
Googleアナリティクスのサイト(コンソール側)もすぐに反応しました。
location.protocol
が"http:"
、"https:"
であればlocalhostでもちゃんと動作します。
おまけ
Google アナリティクス>測定>GA4 Cookie ドメインの設定によると、
サーバーがローカル環境(localhost)で実行されていることが検出されると、cookie_domain は自動的に 'none' に設定されます。
ちなみにconfigでcookie_domainを設定しようとするとワーニングが出る。