使用 GTM 進行 GA4 內容分類

當你在 GA4 的「生命週期 > 參與 > 網頁和畫面」觀看瀏覽量時，在維度下拉選單可以看到一個「內容群組」但是點下去只有 (not set) 一筆資料可以觀看，他就是跟通用 GA 內容分組是一樣的東西，可是 GA4 無法在後台介面上直接使用網頁畫面、標題、網址來進行規則分類，GA4 只能使用傳送追蹤碼的方式進行分類！那麼透過 GTM 部署的話又該怎麼設定呢？

在 GA4 的內容分類官方文件中，在個別網頁中添加以下語法

gtag('set', 'content_group', 'mens');

就會將當前網頁分類到 mens 分類中！那如果使用 GTM 部署的話，要在代碼 GA4 設定中，添加一個欄位名稱「content_group」輸入的值則先留空，是因為觸發條件還是希望全站所有網頁都觸發，內容分類使用 javascript 變數來進行網址的判定分類，這樣就不需要建立多個 GA4 設定代碼以及多個觸發條件來傳送不同頁面的 content_group 欄位。

再來新增一個「自訂 Javascript」變數，並新增以下程式碼，首先要先取得當前網頁的網址，因此使用了 GTM 的內建變數 {{Page URL}} 先保存在 url 變數中，再來使用 groupname 預備來保存內容分組的名稱，這些變數名稱都可以自由取名。

function() {
  var url = {{Page URL}},
      groupname = '';

      switch(true) {
        case /\/search\/label/i.test(url):
          groupname = '標籤';
          break;
        case /\/\d{4}\/\d{2}\//i.test(url):
          groupname = '文章';
          break;
        case /\/search\?/i.test(url):
          groupname = '搜尋';
          break;
        default:
          groupname = '其他';
      }
  
  return groupname;
}

接著使用 switch() 函式搭配 Regex 規則運算式（正規表達式）進行網址過濾，相信各位 GA 專家們應該都很熟悉規則運算式的使用方式，不過在 javascript 裡要先使用兩個斜線 /(這裡放入規則)/ 再將規則包覆於之間，最後的斜線可以再加上 i 讓大小寫網址也可以符合規則，然後接上 .test(url) 將網址進行規則運算式判斷，回傳值為 true 或 false。

如果你還不熟悉規則運算式，可以參考 MDN 說明文件 並搭配測試工具 rubular.com 來練習，這裡就針對上面程式碼中的三個 case 做說明：

第一個 case 的規則運算式是 \/search\/label 代表的是網址中包含 /search/label 時就符合，你需要在斜線前方再加入反斜線 \ 避免 javascript 誤以為是碰到第二個斜線，或是網址上的點 . 也會誤以為是規則運算式的「匹配一個額外字元」的規則式，這個時候也可以在前方加上反斜線；那麼第三個 case 的規則 \/search\? 就代表 /search? 時就符合，這裡的問號也會被誤以為是「匹配前一字元 0 至 1 次」因此問號之前也要加上反斜線。

第二個 case 運算式為 \/\d{4}\/\d{2}\/ 這個比較特別，他是可以符合網址中有 /2022/02/ 的字串，首先我將反斜線斜線 \/ 拿掉來看，前面有一組 \d{4} 和後面一組 \d{2} 其中的 \d 就是數字的意思，而後面銜接的 {數字} 就是要幾個字元，因此 \d{4} 就是 4 個數字的意思。

case 寫完後，就可以設定內容群組名稱 groupname = '名稱' 最後加上 break; 跳出 switch() 函式，如果規則式都沒有符合時，可以在最後的 defalut: 設定一個未分類的名稱，一切完成後將變數結果回傳出去 return groupname 。

回到代碼 GA4 設定，將剛剛建立的變數設定在欄位「content_group」後方的值當中，GTM 發佈後靜待一天就可以前往「網頁和畫面」報表選擇「內容群組」查看有沒有分類成功嘍！