選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何做 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HOW TO

HowTo Home

Menus

圖示欄 選單圖示 手風琴 選項卡 垂直選項卡 選項卡標題 全頁選項卡 懸停選項卡 頂部導航 響應式頂部導航 分割導航 帶圖示的導航欄 搜尋選單 搜尋欄 固定側邊欄 側邊導航 響應式側邊欄 全屏導航 畫布外選單 懸停側邊欄按鈕 帶圖示的側邊欄 水平滾動選單 垂直選單 底部導航 響應式底部導航 底部邊框導航連結 右對齊菜單鏈接 居中菜單鏈接 等寬菜單鏈接 固定選單 滾動時下拉導航欄 滾動時隱藏導航欄 滾動時收縮導航欄 粘性導航欄 圖片上的導航欄 懸停下拉選單 點選下拉選單 級聯下拉選單 頂部導航中的下拉選單 側邊導航中的下拉選單 響應式導航欄下拉選單 子導航選單 下拉向上 巨型選單 移動選單 幕簾選單 摺疊側邊欄 摺疊側邊面板 分頁 麵包屑 按鈕組 垂直按鈕組 粘性社交欄 藥丸形導航 響應式頁首

圖片

幻燈片 幻燈片畫廊 模態框影像 燈箱 響應式影像網格 影像網格 影像畫廊 可滾動影像畫廊 選項卡畫廊 影像疊加漸隱 影像疊加滑動 影像疊加縮放 影像疊加標題 影像疊加圖示 影像效果 黑白影像 影像文字 影像文字塊 透明影像文字 全頁影像 影像上的表單 英雄影像 模糊背景影像 滾動時更改背景 並排影像 圓角影像 頭像影像 響應式影像 居中影像 縮圖 影像邊框 團隊介紹 粘性影像 翻轉影像 抖動影像 作品集畫廊 帶過濾的作品集 影像縮放 影像放大鏡 影像比較滑塊 網站圖示

按鈕

警報按鈕 輪廓按鈕 分割按鈕 動畫按鈕 漸隱按鈕 圖片上的按鈕 社交媒體按鈕 閱讀更多/閱讀更少 載入按鈕 下載按鈕 藥丸形按鈕 通知按鈕 圖示按鈕 上一頁/下一頁按鈕 導航中的更多按鈕 塊狀按鈕 文字按鈕 圓形按鈕 滾動到頂部按鈕

表單

登入表單 登錄檔單 結賬表單 聯絡表單 社交登入表單 登錄檔單 帶圖示的表單 新聞通訊 堆疊式表單 響應式表單 彈出表單 內聯表單 清除輸入欄位 隱藏數字箭頭 將文字複製到剪貼簿 動畫搜尋 搜尋按鈕 全屏搜尋 導航欄中的輸入欄位 導航欄中的登入表單 自定義複選框/單選按鈕 自定義選擇 切換開關 勾選複選框 檢測大寫鎖定 按 Enter 鍵觸發按鈕 密碼驗證 切換密碼可見性 多步表單 自動完成 關閉自動完成 關閉拼寫檢查 檔案上傳按鈕 空輸入驗證

Filters

篩選列表 篩選表格 篩選元素 篩選下拉選單 排序列表 排序表格

表格

斑馬條紋表 居中文件 全寬表 巢狀表 並排表 響應式表 對比表

More

全屏影片 模態框 刪除模態框 時間線 滾動指示器 進度條 技能條 範圍滑塊 顏色選擇器 電子郵件欄位 工具提示 懸停顯示元素 彈出視窗 可摺疊 日曆 HTML 包含 待辦事項列表 載入器 徽章 星級評分 使用者評分 疊加效果 聯絡晶片 卡片 翻轉卡片 個人資料卡片 產品卡片 警報 提示 筆記 標籤 絲帶 標籤雲 圓形 樣式 HR 優惠券 列表組 帶徽章的列表組 無專案符號的列表 響應式文字 鏤空文字 發光文字 固定頁尾 粘性元素 等高 clearfix 響應式浮動 Snackbar 全屏視窗 滾動繪圖 平滑滾動 漸變背景滾動 粘性頁首 滾動時收縮頁首 定價表 視差 縱橫比 響應式 iframe 切換喜歡/不喜歡 切換隱藏/顯示 切換暗模式 切換文字 切換類 新增類 刪除類 更改類 活動類 樹檢視 刪除小數 刪除屬性 離線檢測 查詢隱藏元素 重定向網頁 格式化數字 懸停縮放 翻轉框 垂直居中 DIV 中的居中按鈕 居中列表 懸停過渡 箭頭 形狀 下載連結 全高元素 瀏覽器視窗 自定義捲軸 隱藏捲軸 顯示/強制顯示捲軸 裝置外觀 Contenteditable 邊框 佔位符顏色 停用文字區域大小調整 停用文字選擇 文字選擇顏色 專案符號顏色 垂直線 分隔符 文字分隔符 動畫圖示 倒計時器 打字機 即將推出頁面 聊天訊息 彈出聊天視窗 分屏 客戶評價 章節計數器 引言幻燈片 可關閉的列表項 典型裝置斷點 可拖動的 HTML 元素 JS 媒體查詢 語法高亮 JS 動畫 JS 字串長度 JS 指數運算 JS 預設引數 JS 隨機數 JS 對數字陣列排序 JS 展開運算子 JS 滾動到檢視 獲取當前日期 獲取當前 URL 獲取當前螢幕尺寸 獲取 iframe 元素

網站

建立免費網站 製作網站 製作靜態網站 託管靜態網站 製作網站 (W3.CSS) 製作網站 (BS3) 製作網站 (BS4) 製作網站 (BS5) 建立和檢視網站 建立 Link Tree 網站 建立作品集 建立簡歷 製作餐廳網站 製作企業網站 製作 WebBook 居中網站 聯絡部分 關於頁面 大標題 示例網站

Grid

2 列布局 3 列布局 4 列布局 展開式網格 列表網格檢視 混合列布局 列卡片 鋸齒佈局 部落格佈局

Google

Google Charts Google Fonts Google Font 配對 Google 設定分析

Converters

轉換重量 轉換溫度 轉換長度 轉換速度

部落格

獲得開發人員工作 成為前端開發人員 聘請開發人員

如何設定 Google Analytics

Google Analytics 用於檢視和理解網站流量。

它是免費且易於使用的。

您可以自定義它以適應多種用例。

開箱即用。

設定速度很快。立即獲取您的洞察!

建立我的免費網站 ❯

跳過關於 Google Analytics 的閱讀。直接帶我去第一步。 轉到第一步

什麼是 Google Analytics

Google Analytics 是一個網站分析解決方案。

它由 Google 開發和支援。

最新版本稱為 Google Analytics 4。

它可以用於檢視受眾、頁面瀏覽量、會話、人口統計資訊和事件等資料。

為何啟用 Google Analytics

瞭解您的網站流量以做出更好的決策。

瞭解並改進銷售漏斗。

透過實驗學習(例如,A/B 測試)。

Google 還有另一個名為 Google Optimize 的解決方案。該解決方案專為測試而設計。


Google Analytics 適合誰

Google Analytics 對任何擁有網站的人都很有用。

它為您提供有關誰在使用您的網站以及他們如何與網站互動的資訊。

此外,介面易於理解。

您不需要分析背景知識即可使用和導航該服務。


如何分步設定 Google Analytics

Google Analytics 可以透過兩種方式設定:全域性網站程式碼 (gtag.js)Google Tag Manager

最簡單的方法是使用全域性網站程式碼。

本教程將使用全域性網站程式碼方法。


準備工作

決定使用哪個程式碼編輯器並設定您的環境。

W3Schools 建立了一個易於使用的程式碼編輯器,名為 W3Schools Spaces。只需點選幾下即可註冊並開始。

免費開始 ❯

建立您的 index.html 檔案,以便您準備輸入程式碼。

一切準備就緒。我們開始吧!


設定 Google Analytics:全域性網站程式碼


步驟 1:建立 Google Analytics 帳戶

轉到 Analytics:建立帳戶或登入 Analytics

上面段落中的連結將您帶到 Google Analytics 著陸頁。

點選“免費開始”按鈕。

landing page

步驟 2:進入歡迎頁面

建立帳戶或登入後,您將看到該解決方案的歡迎頁面。

按“開始衡量”按鈕繼續。

Welcome page

步驟 3:帳戶設定

您需要在此處做出兩個決定。

  1. 輸入您的帳戶名稱。
  2. 決定您想共享哪些資料。
  3. 點選“下一步”按鈕。

一個帳戶可以有多個跟蹤 ID。您可以用一個帳戶跟蹤多個網站。

Account setup overview

步驟 4:屬性設定

屬性是您衡量的服務,例如網站、應用程式、連結樹等。

  1. 輸入屬性名稱。
  2. 輸入您的時區。
  3. 輸入您使用的貨幣。
  4. 點選“下一步”按鈕。
Property setup overview

步驟 5:新增業務資訊

Analytics 使用這些資訊來定製您的體驗。

  1. 選擇您的行業類別。
  2. 選擇業務規模。
  3. 勾選您計劃如何使用 Analytics 的框。
  4. 點選“建立”按鈕繼續。
Business information details

步驟 6:服務條款協議

閱讀並理解服務條款。

如果同意,請勾選 GDPR 複選框並點選“我接受”按鈕。

Terms and conditions overview

步驟 7:電子郵件訂閱

  1. 勾選或取消勾選所有框。
  2. 點選“儲存”按鈕繼續。
Email communication overview

步驟 8:選擇平臺

選擇您正在收集資料的平臺。

然後,點選相應的平臺繼續。

在本教程中,我們繼續使用“Web”作為示例。

Select platform overview

步驟 9:資料流設定

輸入資料流詳細資訊。

  1. 您網站的 URL。
  2. 您想給流起的名稱。
  3. 決定是否啟用增強型衡量功能。
  4. 點選“建立流”按鈕繼續。
  5. 增強型衡量功能可以為資料提供更多上下文。從而提高您對流量的理解。

    Data stream setup overview

    步驟 10:Web 流概述

    在這裡,您可以看到 Web 流的詳細概述。

    Web stream details overivew

    以下是概述中的要點。

    1. 流 URL。

    流 URL 是已連線網站的連結。

    stream URL

    2. 衡量 ID

    衡量 ID 是您的資料流的識別符號。

    它的格式為 G-XXXXXXX。

    measurement ID

    Google Analytics 4 使用衡量 ID。舊版本使用跟蹤 ID。您不能同時擁有兩者。

    3. 標記說明

    選擇使用 全域性網站程式碼 (gtag.js)Tag Manager

    本教程將使用全域性網站程式碼。

    安裝全域性網站程式碼是讓它投入執行最簡單快捷的方式。

    tagging instructions

    步驟 11:全域性網站程式碼 (gtag.js)

    點選“全域性網站程式碼 (gtag.js)”行。

    Global site tag

    在這裡您可以看到一段程式碼片段。

    程式碼片段是一個指令碼,允許 Google 衡量您網站上的資料。

    您可以在程式碼片段的倒數第二行看到衡量 ID。

    程式碼片段

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

    gtag('config', 'G-XXXXXXX');
    </script>

    步驟 12:輸入程式碼片段

    複製程式碼片段。

    確保包含您的衡量 ID。

    找到 HTML 中的 <head> 標籤。

    將程式碼片段貼上在 <head> 標籤正下方。

    儲存併發布程式碼。

    Add code snippet

    我們在示例中使用了 W3Schools Spaces


    步驟 13:測試是否有效

    確保您已成功儲存併發布了帶有正確衡量 ID 的程式碼片段。

    開啟您已連線到資料流的網站的 URL。

    點選左側選單中的“即時”。

    確認您看到自己是一個活躍使用者。

    恭喜。您已成功為您的網站啟用了 Google Analytics!

    Analytics dashboard

    探索 Google Analytics

    推薦的相關主題是 Tag ManagerEvents

    花時間在該服務中瞭解您的使用者活動、商務、人口統計資訊、裝置和推薦來源。


    提示:聽說過 W3Schools Spaces 嗎?這是一個個人空間,您可以在其中從頭開始建立網站或使用模板並免費託管它。

    它擁有您在瀏覽器中需要的一切。

    只需點選幾下即可開始。

    立即免費開始 ❯

    * 無需信用卡

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援