在HTML中集成Firebase Analytics遇问题：引用错误及数据无显示

我尝试在index.html中导入Firebase并启用Analytics功能，过程中遇到以下问题：

1. 传统脚本导入触发未定义错误 #

首次编写代码后，控制台抛出ReferenceError: firebase is not defined错误，代码如下：

<body>

<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js"></script>
<script  src="https://www.gstatic.com/firebasejs/10.7.1/firebase-analytics.js"></script>

<script>
  // Initialize Firebase with your configuration
  const firebaseConfig = {
    apiKey: "AIzaSyDMOXXXXXXXXXXXu6fMbeqU",
    authDomain: "XXXXXXXXXXXXXXXXXXXe.firebaseapp.com",
    projectId: "XXXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXXXXXXX.appspot.com",
    messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXX3370",
    appId: "1:XXXXXXXXXXXXXXXXXX:web:XXXXXXXXXXXXXXXXXXXXXXX",
    measurementId: "G-XXXXXXXXXXXXXXXX"
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

  // Initialize Firebase Analytics
  const analytics = firebase.analytics();

  // Log an event (optional)
  analytics.logEvent('star_html5_game');

  // You can start tracking events and user interactions here
</script>

</body>

2. Module方式导入无报错，但无数据上报 #

改用ES Module方式导入后，代码不再报错，但Firebase控制台完全看不到任何数据，代码如下：

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-analytics.js";

  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: "AIzaSyDMO-QXXXXXXXXXXXXXXXXXXXXXeqU",
    authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXfirebaseapp.com",
    projectId: "XXXXXXXXXXXXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXXXXXXX.appspot.com",
    messagingSenderId: "XXXXXXXXXXXXXXX",
    appId: "1:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXb63",
    measurementId: "G-25L48DR5H1"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
</script>

3. 添加logEvent后仍无数据反馈 #

在Module代码中加入logEvent调用后，代码依旧无报错，但自定义事件未在控制台显示，实时分析板块也看不到实时用户数据，代码如下：

// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
import { getAnalytics, logEvent } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-analytics.js";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyDMO-XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXXXXX.com",
  projectId: "gXXXXXXXXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXX.appspot.com",
  messagingSenderId: "XXXXXXXXXXXXXXXX",
  appId: "1:3XXXXXXXXXXXXXXXXXXXXXXX1b63",
  measurementId: "G-XXXXXXXXXXXXXXXXXXXXXX"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

logEvent(analytics ,'test_event_from_game', { name: 'hiiiiiiiiiii'});
  
console.log(app);
console.log(analytics);

请问我的代码存在什么问题？

内容的提问来源于stack exchange，提问作者Teddy Kossoko