GA:啟用 Web + App 報表

/

2021.08.28 補充:今天回頭看這篇,其實就是現在 GA4 的 Beta,本篇就當是一個紀錄囉。

Google Analytics?介面怎麼不一樣

一般看 Google Analytics 的時候,介面都是長這樣:

一般GA介面
一般 GA 介面

用熟的話,就會什麼報表在什麼選單裡都一清二楚。

上次在寫 Firebase Performance 的那篇時,不小心按了別的東西,就產生了一份介面不太一樣的 GA 報表,長這樣:

報表beta介面
報表 Beta 介面

這個 GA 標示是 Web + App的 報表,可以看到整個 UI 的樣式還是 GA 的,但整個選單的分類方式完全不一樣。

本篇要筆記的就是,如何開啟這個不一樣的 GA 報表功能。

因為上面寫的是「報表 BETA版」,所以在寫這篇的當下,Google 也還陸續在做修改,有可能你在看這篇時介面會有點不同,莫驚慌、莫害怕,即便真的有不同,這個報表介面也很好理解,如果你熟悉了 GA,這不會是大問題。

另外,因為本站是純網站,沒有 App,因此報表的資料都是來自於本站,實際加入 App 的話應該會有所不同,這就不是 Augustus 看得到的了。


步驟1:建立 Firebase 專案

Google 的產品,Google Analytics 是記錄 Web 數據,而要記錄 App 數據就是 Firebase。

所以第一步,要先開啟 Firebase 專案。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

有用過 Firebase 的朋友可以跳過這步,沒有的話就繼續往下看。

進到 Firebase 後:https://console.firebase.google.com/

會要求要登入 Google 的帳號,登入後會看到以下:

Firebase登入後首頁
Firebase 登入後首頁

按下「建立專案」,會跳出一些資料填寫的部份,第一個是專案的名稱,這邊只能填英文跟數字:

建立專案 步驟3之1
建立專案 步驟 3 之 1

專案 ID 可以修改,而且 ID 一旦在這邊確定後,就不得再修改。

「我接受 Firebase 條款」必須打勾。

都完成後就按下「繼續」。

下一頁就是問要不要讓這個專案跟 Google Analytics 相連結:

建立專案 步驟3之2
建立專案 步驟 3 之 2

這篇就是 Firebase + Google Analytics 所產生的報表,所以 一定要是啟用的

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

如果不啟用,那可以關掉 Firebase 的頁面,順便再關掉本篇了XD~

再按下繼續後,就是 GA 的基本設定:

建立專案 步驟3之3
建立專案 步驟 3 之 3

數據分析位置,就看你在哪個國家,Augustus 這邊選擇台灣。

「我接受…」開頭的兩個選項必須打勾,都勾完後就可以按下「建立專案」了。

等待中
等待中
專案準備就緒
專案準備就緒

看到「新專案已準備就緒」的訊息,按下「繼續」會進到專案頁面,這步驟就完成了。


步驟2:建立 Firebase 應用程式

進到 Firebase 的專案首頁後,就會看到這樣:

Firebase專案首頁
Firebase 專案首頁

「Spark 方案」就是免費方案。

首頁的文字就會提醒你要先建一個應用程式出來,這邊選擇的是「網頁」,按下 </> 這個符號的按鈕,會出現建應用程式的頁面:

建立Firebase應用程式
建立 Firebase 應用程式

第一部要填寫的是應用程式的名稱,提示訊息告訴我們這是給我們自己看的,路人跟外星人看不到,就取一個讓你知道這應用程式是做什麼的就行。

「一併為這個應用程式設定」,我們這個應用程式是用來跟 GA 整合的,用不到其它 Firebase 的功能,就不用打勾。

取完暱稱後,就可以按下「註冊應用程式」,按下後會看到這樣:

新增 Firebase SDK
新增 Firebase SDK

因為我們沒用到其它 Firebase 的功能,這些程式碼就不用理它,直接點擊「前往主控台」。

完成了這一步,新的報表就已經存在在 GA 上了,登入 GA 後,會看見多了一組資源和應用程式:

多了一組資源和應用程式
多了一組資源和應用程式

顯示的名稱就是你的專案名稱。

因為建這個 Firebase 的帳號原本是沒有 GA 的,所以也自動新增了一組 GA 帳戶。


步驟3:修改連接的 GA

如果 Firebase 為你自動接上的 GA 帳戶,不是你要的 GA 帳戶呢?Firebase 也提供修改的介面。

回到 Firebase 的專案首頁,你會看到上一步建立的應用程式出現在首頁上:

Firebase首頁出現剛建立的應用程式
Firebase 首頁出現剛建立的應用程式

點擊那個應用程式後,按鈕會展開,接著再點擊展開出來的齒輪:

再點擊齒輪
再點擊齒輪

進到 Settings 的頁面後,上面那一排的選單中點擊「整合」:

選單上點擊整合
選單上點擊整合

接著會看到 Firebase 可以跟 Google 整合的其它產品,第一個就是 GA:

Firebase可以跟Google其它產品的整合清單
Firebase 可以跟 Google 其它產品的整合清單

點擊 GA 那一張卡片上的管理,就會進到 Firebase 整合 GA 的設定頁:

Firebase整合GA的設定頁
Firebase 整合 GA 的設定頁

設定頁的第一塊就是顯示跟哪一組 GA 帳戶做了整合,想要取消的話就按下右邊的三個點點,會展開取消連結的選項:

取消連結GA的按鈕
取消連結 GA 的按鈕

點擊後會出現一個警告視窗:

取消GA連結的警告視窗
取消 GA 連結的警告視窗

由於下一步我們就是要再接上指定的 GA,所以這些威脅不用理他,勇敢按下取消連結。

取消連結後,會看到「整合」的卡片列表,GA 的部份按鈕從「管理」變成「啟用」:

GA的部份按鈕從「管理」變成「啟用」
GA 的部份按鈕從「管理」變成「啟用」

我們一樣放勇敢按下啟用,會出現請你選擇要連結的 GA 帳戶:

選擇要連結的GA帳戶
選擇要連結的 GA 帳戶

選完後按下「啟用 Google Analytics(分析)」,等他執行一下,轉個圈圈,就會看見整合的部份,連結的帳戶修改成我們指定的 GA 帳戶:

連結的帳戶修改成我們指定的GA帳戶
連結的帳戶修改成我們指定的 GA 帳戶

再進到 GA 去看,就會看見指定的 GA 帳戶新增了一筆資源:

指定的GA帳戶新增了一筆資源
指定的 GA 帳戶新增了一筆資源

原本 Firebase 新增出的資源不會自動刪除,要記得再把它刪掉。


步驟 4:為新增的 GA 資源,指定收哪一個 GA 資源

GA 的資源,每一組資源都會有自己的追蹤碼,但是如果我們看一下由 Firebase 新增的這組資源:

Firebase新增的這組資源,管理介面
Firebase 新增的這組資源,管理介面

是沒有「追蹤資訊」這個項目的,如果要讓這組資源有資料,要進行以下設定。

首先,進到 GA 後,帳戶跟資源的部份選擇 Firebase 新增的那組。

選完後,就會看到 Web + App 報表,即便報表的分類不一樣,但介面的使用方式是一樣的,要進到管理介面,按鈕一樣是在左下角:

報表功能的「管理」按鈕位置
報表功能的「管理」按鈕位置

點擊後進到管理後台,中間資源的部份點擊「資料串流」:

點擊「資料串流」
點擊「資料串流」

點擊後,會看見已經有一筆我們 Firebase 上建立的應用程式在上面了,不用管它,按下右上角的「新增串流」,會出現一個下拉選單,選擇「網頁」:

新增串流的下拉選單選擇網頁
新增串流的下拉選單選擇網頁

接著出現設定資料串流的表單:

設定資料串流的表單
設定資料串流的表單

填上你這個 GA 帳戶主要收集資料的網域後,串流名稱填一個你看得懂的名稱,按下「建立串流」,會回到一開始資料串流的列表:

回到一開始資料串流的列表
回到一開始資料串流的列表

再點擊我們剛新增的那個串流,會出現這個串流的詳情:

串流詳情
串流詳情

詳情的部份,重要的區塊在第二張卡片「代碼設定操作說明」,這邊是講要怎麼讓這組資源能收到資料,就很像用 GA 時需要埋追蹤碼的這一步。這邊推薦方式選用「使用現有的網頁內代碼」這塊,點擊後,會出現二種埋碼方式:GA 中加入、GTM 中加入。

一般會看到這篇,想用 Web + App 這個特殊報表,代表你的網站本身就有在用 GA 了,那就直接選用第一種「Google Analytics (分析)」就行。

如果你想統一整理你的程式碼在 GTM 上,那就選用第二種的「Google 代碼管理工具」。

這邊筆記第一種方式,因為只要會用 GA 就可以使用,而不用另行再去摸索 GTM。

從 Google Analytics 中串流資料

後台設定的說明很清楚了,這邊就是一邊照著作、一邊截圖。

1、2 在另一個視窗中開啟用來控制 網頁內代碼的 Google Analytics (分析) 資源。依序前往 [管理] > [追蹤資訊] > [追蹤程式碼]。

新開一個視窗,進到 GA,在進到 GA 的管理介面,最後選擇你想讓這個 Firebase 新增的資源,主要是要收到哪一組 GA 帳戶裡的資料。

接著點選「追蹤資訊」,打開的下拉式選單中選擇「追蹤程式碼」:

進到GA管理介面,選擇追蹤資訊 > 追蹤程式碼
進到 GA 管理介面,選擇追蹤資訊 > 追蹤程式碼

3 按一下「全域網站代碼 (gtag.js)」下方的 [已連結的網站代碼]。

點擊圖中標紅框的地方
點擊圖中標紅框的地方

點擊圖中標紅框的地方,那個v箭頭。

4 連結這個評估 ID:G-xxxxxxxxxxxxx。

點擊了上一步的 v,會滑出一個要填寫連結代碼的頁面:

填寫連結代碼
填寫連結代碼

「輸入所要連結代碼的 ID」,就填說明中提供的代碼,像這邊:

評估的ID
評估的 ID

別名的部份是選填,為了之後回頭看時可以知道是什麼,建議還是填一下。

兩欄都填完後,最後按下「連結」,下方就會出現一組已連結的代碼:

出現一組已連結的代碼
出現一組已連結的代碼

這樣就設定完成了,現在就是等個幾天,等新報表收到資料就行。


GA 報表 VS. Web + App 報表

最後來比較一下「一般 GA 報表」跟用了 Firebase 後的「Web + App 報表」的不同。

首頁第一列

一般報表 首頁第一列
一般報表 首頁第一列
特殊報表
Web + App 報表

第一張卡片內容相似,但 Web + App 的有加上「事件」。

第二張的即時卡片,一般報表顯示的是當下的時間,Web + App 的是顯示 30 分鐘內的。

第三張卡片,因為這幾年 Google 把 AI 加入了 GA 裡,所以一般報表是顯示 AI 的建議,而 Web + App 的則是整體使用者趨勢。

即時報表

一般報表 即時報表
一般報表 即時報表
特殊報表 即時報表
Web + App 報表 即時報表

主要差別是在即時報表的子選項,一般報表收在左側選單,Web + App 報表收在底部。

是說,Web + App 的直接放大世界地圖,很大氣啊~但載入時間也相對慢了。

Web + App 報表有一個蠻喜歡的點,就是針對事件的部份有直接做整理,像這樣:

特殊報表 即時報表 事件趨勢
Web + App 報表 即時報表 事件趨勢

技術報表

一般報表 技術報表
一般報表 技術報表
特殊報表 技術報表
Web + App 報表 技術報表

一般報表把項目另外收在主要維度的選項上,預設開啟的是使用何者瀏覽器。

Web + App 報表則是直接把所有項目都做成卡片一次顯示出來。

分析中心

分析中心是特殊報表裡才有的項目,有以下報表可以自動生成:

特殊報表 分析中心
Web + App 報表 分析中心

實際上分析中心產生的這些報表,在 GA 一般報表中也有,就是散在各個選單中,Web + App 報表就是把他們集合收在一個地方。

比較了一下以上幾個報表,可以發現一般的 GA 報表比較像是 row data,就是所有的網站資料都在裡面,摸熟的話就很好整理出你想要的報表。

而 Web + App 報表比較像是整理過的,給資料分析人員、行銷人員等用的,從選單的名稱上也比較好理解。

寫這篇的當下,這個 Web + App 的特殊報表,Google 還標注著 BETA 字樣,以後會陸續更新,期待正式發佈 V1 的那天。

Summary
GA:啟用 Web + App 報表
Article Name
GA:啟用 Web + App 報表
Description
本篇大綱:Google Analytics?介面怎麼不一樣。1:建立 Firebase 專案。2:建立 Firebase 應用程式。3:修改連接的 GA。4:為新增的 GA 資源,指定收哪一個 GA 資源。從 GA 中串流資料。GA 報表 VS. Web + App 報表
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

WordPress

Ubuntu 安裝 WordPress – 1:VirtualBox、Ubuntu 20.04

Analytics Google

用 GA Spreadsheet Add-on 製作網站訪客人數功能

Front-End WordPress

用原生 JavaScript 寫一組社群分享按鈕(FB、LINE、Twitter)

Vue

Vue.js 用 computed 跟 filter 做一個簡易搜尋功能

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:下篇 – 三大步驟

Google Maps

Google Maps API 學習筆記 – 5:抓目前位置、計算到各點距離

WordPress

Ubuntu 安裝 WordPress – 3:VM、資料庫權限、PHP、WordPress

Forms Google

完全客製 Google 表單,美化表單樣式

WordPress

WordPress 好用的會員相關外掛:登入安全性、會員系統

Front-End

Auth0 Universal Login,做一個自己的會員註冊、登入功能

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言