1 of 87

陳擎文

GA操作基礎篇(1)

2種即時報表

2 of 87

單元綱要

  • 1. GA 的工作原理
  • 2. GA 帳戶的整體架構
  • 3.操作GA帳戶的三個工作
  • 4. 到GA平台申請帳戶，建立資源
  • 5. 我們的網站hw4如何串接到GA4？
  • 6.檢查GA4代碼是否安裝成功？
  • 7. 將我們的網站hw3串接到GA4

​

​

​

3 of 87

1. GA 的工作原理

4 of 87

1. GA 的工作原理

  • ◉Google Analytics 代碼分析主要是用網頁標記 (Page tags) 的追蹤技術進行資料收集，
  • ◉我們可以將特定網頁或每一頁，如此一來當使用者造訪網頁時，使用者的瀏覽資訊就會被載入 Google Analytics 的追蹤碼 ，
  • 這組追蹤碼會追蹤到訪客在每一頁上所進行的行為，
  • 並將資料發送到 GA的資料庫，
  • 最後在 GA以各種報表的呈現。

​

5 of 87

1. GA 的工作原理

  • ◉將 Google Analytics 的追蹤碼放在網頁的<HEAD>
  • 於是它就像【監視器】一樣，追蹤到訪客在網頁上的行為。

​

6 of 87

1. GA 的工作原理

7 of 87

☎重要觀念：

​

2. GA 帳戶的整體架構

8 of 87

2. GA 的帳號架構�GA有新版，舊版

  • 舊版GA：通用版GA, Universal Analytics
  • 新版GA：GA4 , Google Analytics 4

9 of 87

2. GA 的帳號架構�目前只要看新版GA4即可

  • 【帳戶】：一家公司，就是申請1個GA帳號
  • 【資源】：一家公司，有很多品牌，3個品牌就建立3個資源（3個不同的網站）
  • 【資料串流】：1個品牌設定最多3個資料串流：網站，IOS APP，Android APP

​

​

10 of 87

☎重要觀念：

​

3.操作GA帳戶的

三個工作

11 of 87

操作GA帳戶的三個工作

12 of 87

操作GA帳戶的三個工作

  • 工作1：建立1個品牌網站，就是建立一個資源
  • 工作2：設定這個品牌網站相關的網路客戶資料流量來源（網站網址，App）
  • 工作3：設定相關設定（網路數據保留3個月….)

​

13 of 87

4. 到GA平台

申請帳戶，建立資源

14 of 87

Google Analytic最新修正

  • 登入Gmail帳號
  • 到GA網站
    • https://analytics.google.com/
    • 以前的【轉換】改名為【重要事件】

15 of 87

① 申請 Google Analytic

  • 登入Gmail帳號
  • 到GA網站
    • https://analytics.google.com/
    • 以前的【轉換】改名為【重要事件】

16 of 87

新修正

17 of 87

4. 到GA 網站

申請帳戶，建立資源

18 of 87

① 申請 GA帳戶，方法1：�新手第1次，從【開始評估】

19 of 87

① 申請 GA帳戶，方法2：�舊生後續要新增➜齒輪【管理】

  • 1.左下角【管理】➜【建立】➜帳戶

20 of 87

① 申請 GA 5步驟：1-建立帳戶

  • 帳戶：個人姓名（或公司名稱）

21 of 87

① 申請 GA 5步驟：2-建立資源

  • 資源：品牌名稱（或是網站名稱）
  • 範例：
  • 公司：統一
    • 品牌：
      • 統一超商 (7-Eleven)
      • 統一鮮橙多 (Uni Orange Drink)
      • 夢時代購物中心 (Dream Mall)
  • 公司：宏達電
    • 品牌：
      • HTC
      • VIVE (虛擬實境設備)

22 of 87

資源名稱：應該是公司的品牌名稱�課程實作：web4

23 of 87

步驟3：商家詳細資料

24 of 87

步驟4：業務目標

  • 設定你使用GA4的目標
  • 若是選報表
  • 其它都包含了

25 of 87

完成5步驟

  • GA4若要【串接】到品牌資源，最多【3個串接】
    • 網站，Android App， IOS APP

26 of 87

5. 我們的網站hw4

如何串接到GA4

27 of 87

5. 我們的網站如何串接到GA4

  • 步驟1. 範例4網站，已經做完，並且已經上傳到Github上，
    • 已經知道網站的網址：https://ccwntut.github.io/hw4/

​

28 of 87

5. 我們的網站如何串接到GA4

  • 步驟2. 到GA4平台網站，
  • 【齒輪管理】
  • ➜【帳戶】
  • ➜【資源：web4】
  • ➜資料串流

​

29 of 87

資料串流➜選擇【網站】

30 of 87

輸入網址：該用哪一種網域？

  • 注意：此處是放入以下哪一個？
    • 目錄網域：ccwntut.github.io
    • 還是子目錄網域： ccwntut.github.io/hw4
    • 哪一個是正確的呢？
  • 注意：最後1個字母不要放【/】
    • 錯誤寫法： ccwntut.github.io/hw4/

​

  • 串流名稱：web4
    • 名稱最少4個字母
    • 錯誤：hw4
    • 正確：hw-4

31 of 87

輸入網址：該用哪一種網域？

  • 網址設定為ccwntut.github.io/hw4
    • GA4 只能追蹤這個目錄hw4下的流量，
    • 而無法跟蹤你網站的其他部分

​

  • 網址設定為ccwntut.github.io 
    • GA4 可以追蹤你整個網站的全部流量

32 of 87

建立資料串流�ccwntut.github.io/hw4

33 of 87

步驟3：複製Google代碼到每個網頁的<head>裡面

34 of 87

開啟hw4的index/a1/a2/a3/a4網頁，貼上GA4代碼

35 of 87

開啟hw4的index/a1/a2/a3/a4網頁，貼上GA4代碼

36 of 87

開啟hw4的index/a1/a2/a3/a4網頁，貼上GA4代碼

  • 注意：
    • 1 個網頁，只能夠放置 1 個GA4代碼，
    • 若是放置2個，會發生錯誤

37 of 87

重新上傳hw4的index/a1/a2/a3/a4網頁到Github

38 of 87

6.檢查GA4代碼是否安裝成功？

39 of 87

6.檢查GA4代碼是否安裝成功？

  • 方法1：使用GA4 即時報表檢視
  • 方法2：使用Google Tag Assistant網站來做測試檢查

40 of 87

方法1：使用GA4 即時報表檢視

方法2：使用Google Tag Assistant網站來做測試檢查

41 of 87

方法1：使用GA4 即時報表檢視

  • 步驟1：先到GA4平台：
    • 【左上角Menu選單】 ➜【報表】 ➜【即時報表】➜目前30分鐘內0人

42 of 87

方法1：使用GA4 即時報表檢視

  • 步驟2：到範例4的網站：
    • ccwntut.github.io/hw4
    • 做【網頁瀏覽】動作
    • 【按鈕點擊】動作
  • 早期的GA，
    • 網頁瀏覽/點擊後，要等5分鐘，GA4才會顯示數據
  • 現在的GA ，
    • 網頁瀏覽/點擊後，要等16秒，GA4才會顯示數據（有些時間其實是Github的處理秒數）

43 of 87

步驟3：再回到GA4平台：�【左上角Menu選單】 ➜【報表】 ➜【即時報表】

44 of 87

步驟3：再回到GA4平台：�【左上角Menu選單】 ➜【報表】 ➜【即時報表】

  • 過去 30 分鐘內的活躍使用者人數：1
  • 過去 5 分鐘內的活躍使用者人數：1
  • 使用者劃分依據：最初招攬到使用者的來源#1-

​

​

45 of 87

步驟3：再回到GA4平台：�【左上角Menu選單】 ➜【報表】 ➜【即時報表】

46 of 87

7. GA4的各種事件與參數

47 of 87

GA4的各種事件與參數�【即時總覽】➜活躍使用者人數 ，觀看人數

  • 活躍使用者人數 (Active Users)：有多少「不同User ID的使用者」
  • 觀看人數 (Pageviews)：頁面瀏覽量

​

48 of 87

GA4的各種事件與參數�【即時總覽】➜各種事件

  • page_view (頁面瀏覽)=9：
    • 瀏覽9次
  • user_engagement (用戶互動)=7：
    • 有7次使用者互動(停留超過10秒，或由A網頁切換到B網頁)。它反映了使用者在網站上的參與情況
  • first_visit (首次訪問)=1：
    • 有一位新使用者首次造訪網站，它反映了新用戶的增加情況
  • session_start (拜訪開始)：
    • 每次使用者訪問網站時自動觸發這個事件，標誌著一次新的訪問開始。
    • 如果使用者在30分鐘內沒進行操作GA會自動認為這次會話結束。
    • 這個事件可以用來追蹤總訪問量

49 of 87

GA4的各種事件與參數�【即時總覽】➜各種事件

  • page_view (頁面瀏覽)=9：
    • 瀏覽9次
  • user_engagement (用戶互動)=7：
    • 有7次使用者互動(停留超過10秒，或由A網頁切換到B網頁)。它反映了使用者在網站上的參與情況
  • first_visit (首次訪問)=1：
    • 有一位新使用者首次造訪網站，它反映了新用戶的增加情況
  • session_start (拜訪開始)：
    • 每次使用者訪問網站時自動觸發這個事件，標誌著一次新的訪問開始。
    • 如果使用者在30分鐘內沒進行操作GA會自動認為這次會話結束。
    • 這個事件可以用來追蹤總訪問量

50 of 87

GA4的自訂事件�【即時總覽】➜各種事件

  • add_line(點擊加入line群組按鈕)=1：
    • 有user加入本公司的Line群組，1次

51 of 87

GA4的重要事件(轉換)�【即時總覽】➜重要事件

  • add_line(點擊加入line群組按鈕)=1：
    • 網站總訪客數中，出現有多少重要轉換事件，1次(加入line)

52 of 87

​

什麼是電商的轉換率？

Conversion Rate

53 of 87

什麼是電商網站的GA4轉換率？

  • 在電商網站中，GA4的轉換率
    • Conversion Rate，轉換率
    • 指的是用戶完成特定目標（通常是購買，或有價值行為）的百分比。
  • 這一指標衡量了網站
    • 吸引訪客並促使他們進行有價值的操作（如下單、註冊）的效果，
  • 反映了網站的【成功度，效率】。

54 of 87

GA4中的電商轉換率計算方式

  • 購買轉換率，計算公式：
    • 購買轉換率 = (購買重大事件數量 / 總訪客數量) * 100%
  • 其他有價值的轉換行為
    • 加入購物車、訂閱電子報、 註冊帳號、下單
  • 請問：總訪客數，是哪個參數？

55 of 87

方法1：使用GA4 即時報表檢視

方法2：使用Google Tag Assistant網站來做測試檢查

56 of 87

方法2：使用Google Tag Assistant網站來做測試檢查

  • 1.到Google搜尋引擎，輸入：
    • Google Tag Assistant
    • https://tagassistant.google.com/
    • Add Domain

​

57 of 87

方法2：使用Google Tag Assistant網站來做測試檢查

  • Add Domain
    • https://ccwntut.github.io/hw4

​

58 of 87

Domain 🡪 Google Tag Assistant 已經連線

59 of 87

並排2個網頁比較：捲動/點擊hw4網頁�➜看Google Tag Assistant的即時反應

60 of 87

捲動網頁a1.html�➜Google Tag Assistant有Scroll事件

61 of 87

點按超連結到a2.html➜Google Tag Assistant有link click，windows load事件

62 of 87

在a5.html點按自訂事件➜Google Tag Assistant有add_line事件

63 of 87

7. 將我們的網站hw3

串接到GA4

64 of 87

8. 到GA 4平台

選擇你的帳戶，建立資源web3

65 of 87

齒輪【管理】

  • 1.左下角【管理】➜【建立】➜資源

66 of 87

建立新資源：web3

67 of 87

直接設定【資料串流】🡪 網站

68 of 87

69 of 87

建立資料串流�ccwntut.github.io/hw3

  • 串流名稱：web3

70 of 87

複製代碼到hw3的index/a1/a2/a3/a4

71 of 87

複製代碼到hw3的index/a1/a2/a3/a4

72 of 87

重新上傳hw3的index/a1/a2/a3/a4網頁到Github

73 of 87

回到GA4平台：測試是否已經成功安裝代碼？

  • 系統在您的網站上正確偵測到 Google 代碼

74 of 87

75 of 87

6.檢查GA4代碼是否安裝成功？

  • 方法1：使用GA4 即時報表檢視
  • 方法2：使用Google Tag Assistant網站來做測試檢查

76 of 87

方法1：使用GA4 即時報表檢視

方法2：使用Google Tag Assistant網站來做測試檢查

77 of 87

方法1：使用GA4 即時報表檢視

  • 步驟1：先到GA4平台：
    • 【左上角Menu選單】 ➜【報表】 ➜【即時報表】➜目前30分鐘內0人

78 of 87

方法1：使用GA4 即時報表檢視

  • 步驟2：到範例4的網站：
    • ccwntut.github.io/hw3
    • 做【網頁瀏覽】動作
    • 【按鈕點擊】動作
    • 早期的GA，網頁瀏覽/點擊後，要等5分鐘，GA4才會顯示數據

79 of 87

步驟3：再回到GA4平台：�【左上角Menu選單】 ➜【報表】 ➜【即時報表】

80 of 87

方法1：使用GA4 即時報表檢視

方法2：使用Google Tag Assistant網站來做測試檢查

81 of 87

方法2：使用Google Tag Assistant網站來做測試檢查

  • 1.到Google搜尋引擎，輸入：
    • Google Tag Assistant
    • Add Domain

​

82 of 87

方法2：使用Google Tag Assistant網站來做測試檢查

  • Add Domain
    • https://ccwntut.github.io/hw3

​

83 of 87

Domain 🡪 Google Tag Assistant 已經連線

  • Tag Asistant不可以【關閉/或Finish】

84 of 87

並排2個網頁比較：捲動/點擊hw4網頁�➜看Google Tag Assistant的即時反應

85 of 87

捲動網頁a1.html�➜Google Tag Assistant有Scrol事件

86 of 87

9. 結論

87 of 87

結論：GA 網站申請帳戶，建立資源的步驟

  • ① 申請 Google Analytic
  • ② 將追蹤程式碼依設定方式嵌入網頁
  • ③ 解讀 Google Analytic 追蹤碼的報表(相關統計資訊)