0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[GA4]グローバルサイトタグをhtmlファイルに貼り付けたらUnallowed document protocol.警告が表示されて動作しなかった

Posted at

TL;DR

ローカルファイルじゃ動かないよ。Webサーバーで実行してね。
localhostでもいいから、
URLのプロトコル名がhttp/httpsの状態で動作確認しましょ。

経緯

Googleアナリティクスのgtag.jsを使うことになったんですが、
公式の新しいタグを設定するの手順を見て、
本当にHTMLタグを追加するだけで設定が終わるの???なんて失礼なことを思いました。
いきなり実装中のアプリに入れたくなかったので、

「HTMLだけで実行できるならhtmlファイルを一個作ればいいじゃん!」
(貼り付け)
「できたよ!これで動くんだろう!」

のテンションでデスクトップに以下のhtmlファイルを作成しました。

test.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を設定しようとするとワーニングが出る。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?