# 影音 GA 轉到 GA4 專案

:::info
:bulb:GA在2023年的07月就會停止收集新的資料，所以要把原本影音有在看的資料搬移到 GA4 上面，此次專案順便將所有 GTM 的東西重新整理過，並且用文件記錄下來。
:::

## 整理免費學習資源

:::success
中文上課的課程學到的知識完全不夠供 GTM 排除各種障礙，所以這邊重新找了免費的學習資源，只是是全英文的。這邊提供一些常用到的功能跟連結，如果有別的需求可以自己去網站上翻。
:::

- 最基本設定可以看這篇：[How to Track Events with GA4][5]
- [Scroll tracking with GA4][1]
- [Track Site Search with GA4][2]
- [How to Exclude Internal Traffic in GA4][6]
- [Debug view in GA4][7]
- [Datalayer Push][8]
- [Track Clicks with GA4][9]

[5]: https://www.analyticsmania.com/post/how-to-track-events-with-google-analytics-4-and-google-tag-manager/ "How to Track Events with GA4"

[1]: https://www.analyticsmania.com/blog/ "Scroll tracking with GA4"

[2]: https://www.analyticsmania.com/post/track-site-search-with-google-tag-manager-and-google-analytics/ "Track Site Search with GA4"

[6]:https://www.analyticsmania.com/post/how-to-exclude-internal-traffic-in-google-analytics-4/ "How to Exclude Internal Traffic in GA4"

[7]:https://www.analyticsmania.com/post/debugview-in-google-analytics-4/ "Debug view in GA4"

[8]:https://www.analyticsmania.com/post/datalayer-push/ "Datalayer Push"

[9]:https://www.analyticsmania.com/post/track-clicks-with-google-analytics-4-and-gtm/ "Track Clicks with Google Analytics 4"

---

## GA4 開始埋設前的準備

:::success
[1] 免費的 GA4 沒有報表量的限制，但是對於事件(event)以及參數的數量有限制，所以在埋設之前，建議先把事件(event)跟參數(parameter)報表先寫在 excel 上面，再開始施行埋設。

[2] 事件(event):限制數量 50 個 (用不到的可刪除)
參數(parameter)：限制數量 500個 （無法刪除）

[3] GA4跟 firebase 會串連再一起，所以會共用事件(event)及參數(parameter)，所以在埋設之前要注意這問題

[4] 在設計自定義參數及事件名稱之前，先請看過文件，看看沒有有可以用的自定義參數事件名稱，以免達到限額

[5] 官方有文件，分為主動蒐集的參數及自定義參數，盡量用 GA4 推薦的自定義參數

[6] GA4 這次做最大改變就是在電子商務的參數設定上，所以製作電子商務的時候一定要確保用對參數名稱，才能被很好的分析
:::

GA4 官方電子商務文件：
> https://developers.google.com/analytics/devguides/collection/ga4/reference/events?sjid=8348314696861999405-AP&hl=zh-tw&client_type=gtag

GA4 自定義事件及參數：
> https://support.google.com/analytics/answer/9216061?hl=en

### GA4 for 網站埋設的事件數及參數設計
*請用公司的雲端打開

檔案位置：
> https://fetonline-my.sharepoint.com/personal/genielu_fareastone_com_tw/_layouts/15/onedrive.aspx?id=%2Fpersonal%2Fgenielu%5Ffareastone%5Fcom%5Ftw%2FDocuments%2FGA4%20%E8%B3%87%E6%96%99&view=0

>
> [1]. 此份文件是使用工具將 GA 已埋設過的 Event 及參數都抓下來，並且經過了整理。時效性只到 2023 年 04 月初 -->
> **Event Plan for Google Analytics 4.xlsx**
>
> [2].分頁盤點要埋設的事件及參數--> **GA4 埋code盤點.xlsx**
>
> [3].為了計算事件數及參數的數值，請對照這份表格 --> **埋code表格對照.xlsx**

### firebase for APP 埋設的事件數及參數對照

>
>firebase 的事件及參數設計表在此，需要看文件才能看得懂
> https://docs.google.com/document/d/1bsbyso9GJ6X32eR7gexS_tF9r_Mxdj3d/edit
>

---

## 專案目標

:::success
前言：GA 在 2023 年 6 月底會停止蒐集新的資料，但資料會保存一年。所以要在 2023 年的 6 月底之前將 GA 上有埋設的東西搬遷到 GA4 上。

[1] 重新盤點已埋設的 GTM，並清除掉沒在用的設定

[2] 將 GA 的資料搬遷到 GA4 上

[3] 將 datalayer push 電子商務的寫法轉換成 GA4

[4] 驗收資料是否正確

[5] 文件化 GTM+GA4 埋設 plan
:::

### :heavy_check_mark: 4月中 完成 Step1
- [x] 盤點 GA 埋設資料
- [x] 開設新的 GTM 容器
- [x] 串接容器跟新的 GA4 系統
- [x] 開設新的 GA4 並進行基礎設定
- [x] 設計埋設的 plan 及 事件數、參數
### :heavy_check_mark: 5月中 完成 Step2
- [x] GTM 實際埋設
- [x] GA4 資料埋設在 stanging 上進行觀測
### :heavy_check_mark: 6月 需完成 Step 3
- [x] 設定 GA4+firebase 串接
- [x] 電子商務 GA4 datalayer 埋設
- [x] 電子商務 GA4 GTM 設定
- [x] 電子商務 GA4 GA4 測試資料是否倒入
- [ ] IDTT 所需的 GTM 設定

### :heavy_check_mark: 07月之後
- [ ] LiTV
- [ ] 新需求-APP下載
- [ ] 補上其他需要的 GTM event
- [ ] 拔除沒用到的 code
- [ ] 取消原因未完成
- [ ] onboarding 待確認能否分析
- [ ] 各櫃的曝光

## 部門及負責人

:::success
Assign work to different people.
:::

| **部門** | GA4 報表需觀看項目 | **備註** | **窗口** |
|:-----------: |:------------------------: |:-----------: |:--------: |
| **行銷** | 廣告行銷 | 這塊由廣告廠商負責 | Zoey |
| **行銷** | GA4 的電子商務報表 | 需看到方案及購買數量等 | Zoey |
| **Content** | 櫃位點擊 | 追衝櫃位點擊成效| Robert |
| **Content** | 片單點擊 | 追衝片單點擊成效 | Robert |
| **Mavis** | onboarding | onboarding 成效追蹤 | Mavis |
| **PDM** | Emma 成效 | Emma 點擊數 | Rick |
| **UED** | 其他 | 依專案需求 | Shiro |
| **IDTT** | error 資訊 and 其他 | 錯誤資料數據追蹤 | mario or 老王 |
| **LiTV** | LiTV | LiTV 所需追蹤資料 | Rick |

---

## GTM 相關容器設定
:::success
GA4 之後正式容器為：GTM-56X6ZBM，請確認好容器ID
:::

friday 影音的容器底下的容器皆為 GA 的，等到之後測試沒問題，需要將容易移除，以免影響網站效能，如圖：

之後測試完成後請盡量把沒用到的 code 拔除乾淨。

### GTM 相關設定細節
:::success
GA4 我們的環境很多，所以設定了環境變數。
:::

#### GA4 追蹤 ID 改成環境變數

追蹤 ID 原本都是放 GA4 的容器 ID ，但因為我們的環境很多，如果一個一個設定的話會很難管理，所以這邊做了個環境變數，並命名為：GA4-Trcaking。

之後有參數或是數值要傳輸資料，都請選擇 GA4-Trcaking，請不要選錯，如下圖。


#### GA4 環境變數

原本的 GA4 設定中，評估 ID 會貼上要導入的 GA4 的 ID，這部分因為我們有 SIT 及 UAT 的網址，已經設定為變數名叫 {{GA4-Environment}}，這個環境變數的命名就叫做 GA4-tracking。

環境變數設定：

##### GA4 環境變數 Environment
若之後想要調整環境變數或是增加 SIT 的網址，要進到 變數 --> GA4-Environment 增加網址以及定義好什麼網域要將數據匯到哪個 GA4 的 ID。

這樣設定好處就是不用一直更改 GA4 的追蹤 ID，也能很輕鬆的管理。


##### UAT & SIT 環境
設立好 UAT 及 SIT 之後，如下圖，將要傳輸資料的 GA4 ID填在這裡就完成了。

目前建立了 -->
GA4-Production 及 UAT 環境。


## GA4 埋設邏輯
:::success
GA4 的參數最好使用官方建議的。因為 GA4 才會主動蒐集到資料。如：link_text，只要是要追蹤按鈕相關文字，我就會用這個參數名稱。
:::

### GA4 埋設與報表關係
請回頭看最上面的官方<自定義事件>這份，這份在埋設的時候要一直打開來對照。

Event name 的設立很重要，這會影響到 GA4 如何觀看成效的方式。

如右圖 >>

在埋設新 code 之前，先梳理出邏輯以及設定好要怎麼觀看報表，再進行埋設。

這篇表格的意思就是，先從事件報表中找出 event name [menu_click] 再找到 link_text (我們想看到的參數)，再來就是參數值(變數)。

在 GA4 的報表中會是這樣呈現：
選到左邊的事件：事件名稱

找到要追蹤的 Event name：

點進去就可以看到埋設的參數值：

這裡原本叫做 link_text，但在 GA4 的設定中可以把參數改成中文，讓需要看報表的人看得懂。
下面會有案例。


---

### GTM 埋設案例

設定代碼：如上面所述，選擇 GA4-tracking
事件名稱：放上張表中設計的自定義 event name [menu-link]
參數名稱：就是上表的 Parameter ，請填 google 推薦的
值：就是變數部分。變數部分也有 GTM 本就有預設的項目。


GTM 的自定義變數，就可以包含很多情境：

#### Event Tragger

我想要的情境是當使用者點擊 menu 上的時候，回傳使用者點了什麼文字回來。
所以抓取共用的 css 選取器，


css 選取器詳細
> ＊後來發現選取器是最長被使用的，因為可以很準確的選到該元素


#### 如何抓到css selector?

如圖的步驟：


選擇要觸發的元素，按下 F12 ，選擇該元素的 html，按下右鍵選擇 copy, 選擇複製 copy selector，之後再貼上到 GTM 的 click element。

[](https://hackmd.io/_uploads/SklUufiUh.png)


**如果選擇了使用 click element 這個方式，中間的一定要選擇 符合 css 選取器的樣式才會生效。
**

#### GTM Tag Assistant 預覽模式

全都埋設完成之後，要怎麼知道這個設定有被正確觸發，要到預覽模式去觀看 fire 了沒。

先點選隨便一個 menu click，之後就會在 GTM 預覽模式中看到此自定義的 Tag 被 fire。

點擊此 Tag 之後，就會展開 side bar。點擊 click button 會秀出 Tad fire 之後抓到的值。

從這裡就可以看出設置的有沒有對，回傳的數值是否正確。


#### GA4 debug view

進到 GTM debug view 看設定的 menu-click 有沒有匯資料到這裡。


#### 排除內部流量
為了避免一堆 event 把 debug View 給塞滿，所以有先設定排除流量的部分。

但排除流量不是馬上就會生效，所以有時候在公司測跟在家測數值不一定出得來，所以有時候就不管這塊，以 GTM 預覽模式為主。


資料出現後，其實 GA4 埋設的 event 還是不會出現在 GA4 上，要再去下一步做設定。

#### GA4 建立事件報表才會出現

當有自定義 event name 已經埋設好了，想要在 GA4 的報表上出現時，要先到 設定 > 事件 > 建立事件將 event mame 集要收集的參數都填上之後，過了至少24小時，數據資料足夠之後，才會出現在報告上。


填寫範例：


#### GA4 自訂維度可以修正成中文

如果怕其他人看不懂 GA4 報表中，很多自定義的參數名稱，如 link_text，這可以進到設定 > 自訂定義 > 自訂維度裡面，將 line_text 改成中文字，如按鈕文字。


---

## 自定義事件埋設邏輯

如果有埋設上的問題，可以根據埋設邏輯來尋找如何設定。

### menu-click

要追蹤所有 menu 上的點擊，因為不同區塊的 css Element 不同，所以不同的 css Element 就要開一個觸發器。

#### 下圖為要追蹤的點擊項目

#### 下圖為最後 GTM 觸發後的各種條件

這些觸發條件都會將數據彙整到同一個 event name 裡面，例如說我要分析的是 menu 哪個東西被點擊最多，所以就要設定回傳到一樣的 event name 裡面，如 menu_click裡。
像是這樣：

至於要回傳什麼值，就要看這 html 裡面，有回傳什麼東西。
至於這張截圖，我請 GTM 回傳給我這個連結被點擊時回傳class 給我，因為 class 有供辨識的元素可以用。

可以辨認出使用者點了什麼連結就夠了。


#### 觸發條件設置：
觸發條件因為有獨一無二的 class ，所以很好制定觸發條件。也表示這個觸發條件就要特別新增一個出來。


menu_click 的項目就依照此邏輯進行埋設的。

### 櫃位邏輯

要分析每個館的櫃位點擊成效及每個館的片成效，所以櫃位分析的部分這次將每個櫃位都有自定義一個 event name，分別將這些點擊數值傳到不同的 event name 裡面。

如圖，每個館都有一個自己的名字：



#### 將首頁櫃位的點擊數量等數值傳送至首頁櫃位的 event name


將首頁櫃位的點擊全都送到 HomePage_row 這個 event name 裡。

這裡比較特別的是值，值的話是自定義參數。

##### 櫃位點擊值的設定
這邊分別傳送了三個值，中間用_區隔。預計要傳送的值為用戶點擊了：** 分類頁名稱_櫃位名稱_片名** 這樣的資訊。所以這三個資訊分別都用 datalayer 資料夾變數來抓取資料。

這三個變數名稱為：

點進其中一個變數，其設置為：


1. 第一個欄位：資料夾變數名稱 - CTR_e1 這個值是從哪裡來的？
在設定資料層變數的時候要先確認有埋好 datalayer 的東西，要從 datalayer.push 有傳送到東西之後，這邊的資料夾變數才有變數名稱可以放。
所以我們先啟用
* 啟用瀏覽模式
* 從推薦頁隨便點擊一個片單，就算這個動作就算 GTM 的都沒埋設東西，都可以看到這個動作所有回傳的數值。
* 左邊藍色的框框指的就是有沒有切換網址，所以點擊它，看看這個頁面有回傳什麼數值。框起來的部分都可以點點看有什麼不同。
* 接著點綠色的框 datalayer 的 tab，來確認該頁有沒有回傳什麼東西。
* 接著往下拉，可以看到這塊明顯像是自己寫的 datalayer 資料。
>
> 這時候我們就能清楚知道這個 datalayer 有回傳什麼資料及資料層變數名稱。
>

由此可知：

CTR_e1 = 分類頁名稱
CTR_e2 = 櫃位名稱
CTR_e3 = 片名

所以這個資料層變數填的名稱是：CTR_e1

2. 資料層版本2 我也不知道為什麼是這個，但我看之前的就只放這個，所以全部都照著放。

3. 格式值也都這樣設定，避免回傳資料很難分析。

##### 觸發條件
接下來要設置觸發條件。

如下圖：

1. 事件名稱要填什麼呢？
如圖：

在寫 dayalayer 的程式碼時，一定要幫這段程式碼設定一個 event，而這段 push 資料的 event name 就叫做 click_vod。

所以事件名稱才會叫做 click_vod。當這個 event name 叫 click_vod 被點擊出現之後，就會觸發 GTM 的 tag 傳數值回去。

2. 下面三項就是當數值不是空的就回傳
3. page path 就是當網址是首頁的時候，才會回傳資料到 HomePage_row 的 event_name 中。

##### 櫃位更多 成效點擊

每一櫃都有更多，當使用者點擊其中一個櫃的更多，又點擊更多中的其中一片時，也應把這個點擊成效算在同個分類頁、櫃位底下，所以每個櫃位點擊成效的其他頁面，也都會再埋設更多頁面。

如下圖：

其他東西都一樣，差別只差在更多的觸發條件，更改了一個條件。


其他的櫃位都是依照此邏輯埋設。

### 主題推薦 curation

主題推薦有埋設的項目：

跟櫃位一樣，有 curation 的 event name，專門將所有 curation 的成效都收錄進去。

#### Curation 櫃位點擊及影片成效
按照一樣的作法跟邏輯：

#### 增加 share 點擊成效追蹤

### 電子商務 package and vocher
關於 GA4 的電子商務，最好一定要對照 GA4 電子商務的 event name，只要埋設對應的 event name，GA4 就會將相對應的數值傳送到電子商務的報表提供分析，所以這塊很重要。

> 參考文件及埋設範例：https://support.google.com/analytics/answer/9267735?sjid=13319347944266723553-AP

#### GA 轉 GA4 電子商務 datalayer
>
> 下圖為 GA 及 GA4 埋設對照表，可以參照欄位及 datalyer 有推送的數值。
> https://hackmd.io/@Flyinwind/r1sJlb5Sn#%E5%BA%8F%E8%99%9F%E5%85%8C%E6%8F%9B%E6%B5%81%E7%A8%8B

現在已經埋設到 Staging 跟 pudution 上。

#### GTM GA4 電子商務設定

電子商務的代碼只有一行，就可以涵蓋所有 event．

##### 代碼設定
事件名稱創了一個叫做 event 的自定義變數。


###### 自定義事件
點開 event 之後設定成自定義事件，不用在這裡設定什麼。

因為電子商務下方有勾的話，數值會自動灌到電子商務的 GA4 報表中，所以這裡就什麼都沒有定義。

###### 更多設定
更多設定要打開，點選傳送電子商務資料，由於資料來源是從 datalayer 來的，所以要選擇 dayalayer。


###### 電子商務的觸發條件
觸發條件創了一個名叫做：all ecommerce event。


然後把所有 ecommerce event 只要是電子商務的都放在裡面。只要有符合跟電子商務 evnet 的 event name 都會被觸發，被送進電子商務的 GA4 報表中被分析。


### 取消方案 (取消原因未完成)

#### 目前有追蹤點擊取消方案的點擊數


Event name 為 CancelPackages

#### 取消原因未完成
取消原因需要寫 datalayer 才有辦法抓到這些原因。所以這塊還沒有完成。其他的部分皆已完成，請看一開始給的報表查看有埋設哪些部分。


### onboarding (未完成)

onboarding 在官方文件上也會有相關推薦 event name。
所以參數使用 Tutorial_begin。

onboarding 未完成的原因是因為在測試站上或是正式站上埋設，沒辦法一直正常叫出 onboarding 的 popup 持續觀看 GTM 埋設狀況。建議這塊直接找工程師埋設相對應的 datalayer 或是找工程師協助測試。


### [新需求] act 自助取消

有個專案是教客人如何自助取消方案，這個也要追蹤成效。
只有三個按鈕點擊要追蹤，所以創了一個 event name 專門給這個網頁追蹤成效。

event name : CancelAct


### emma

event name 是依照追蹤的大分類為主，所以 emma 的成效放在 QnA 裡面。
如果之後需要可以把 QnA 的 GTM 埋設完成。


在 QnA 裡面可以看到 emma 問問的成效。

### Microsoft Clarity 埋設

使用 GTM ，已埋設完成。

---

## 自定義報表相關教學

這部分雖然有做了幾個，但還是得依照之後需要重新建立報表。

- [Custom reports in GA4][3]
- [Funnel Exploration Report in GA4][4]

[3]: https://www.analyticsmania.com/post/custom-reports-in-google-analytics-4/ "Custom reports in GA4"

[4]: https://www.analyticsmania.com/post/funnel-analysis-report-in-google-analytics-4/ "Funnel Exploration Report in GA4"

---

## 請 DT 記錄下來自己埋設的相關功能設定

有些功能是 DT 那邊直接埋設，所以不知道有哪些功能是用 GTM 埋設及要做什麼的，建議之後能將這些記錄下來，整合在同一份文件裡面方便查看。

---

## GTM SEO 的影響

Shiro 有發現到 GTM 埋設上去後，網站的效能變得極低，可能是因為太多重複的設定有關。但在7月之前確定所有資料都能正常顯示前，無法將舊 code 拔掉。

7月之後也不會傳輸新的資料了，可以拔掉所有舊的 code，看看效能會不會比較好。

拔掉之後再使用這篇文章檢視一下 GTM 的設置是不是有空的，或者是改慢 GTM 載入的時間。

[Google Tag Manager vs Page Speed: The Impact and How to Improve
](https://www.analyticsmania.com/post/google-tag-manager-impact-on-page-speed-and-how-to-improve/)