Code For Marketing

最近有一個需求是在特定頁面要加上 content group 的資料，很多的功能用 GA 都還蠻簡單，但是用了 GTM 就會變得比較複雜一點，今天來分享一下怎麼用 GTM 完成這個需求

設定 GA

最一開始當然就是要先把 GA 設定起來，這樣後續才有辦法做測試並且確認資料是否正確，首先 content group 是設定在view底下而不是property，所以要先到 admin 中找到Content Grouping的設定

接著點擊新增然後輸入 Name 和 index，在規劃的時候也要注意一下 content group 只能有五組

這邊要注意新增後只能停用不能刪除

有注意到圖的最下面，有給一些範例要怎麼去寫入這個資料，但這個對於我們要搭配 GTM 的來說，其實是沒什麼幫助的，因此可以忽略不看

設定GTM

Data Layer Variable

GTM 有一個功能叫做 Data Layer Variable，這個可以接收從 web 打上來的一些資料，但缺點是資料會一直保留到清除為止，因此除了 DL 以外還要設定一個 Custom Function

• DL-TYPE(Data Layer Variable) 名稱就給他TYPE，在程式我們只要給對應的名稱 GTM 就會對應到

• Get TYPE 寫一個判斷式，當網址不是指定頁面 (post) 的時候要給其他值，避免資料殘留的問題，因為網站本身架構比較單純主要分兩個頁面，HOME、POST，所以只要簡單判斷並且給一個定值就好

function(){
  var val = {{DL-TYPE}};
  var path = {{Page Path}};
  if(!/(\/post\/)/.test(path)){
       val = 'HOME';
  }  return val;
}

GA Setting

接著就可以在Google Analytics Settings加上content group的設定，打開More Setting找到Content Groups新增一個 index 是 1，值從Get TYPE這個function取得

Send Data Layer

push data layer

TYPE 的資料是componentDidMount的時候透過 API 拿回來，因此我們可以在這邊再打出 Data Layer 資料

window.dataLayer.push({
    'TYPE': 'VIDEO',
});

寫完使用 preview 的功能看一下有沒有資料，慘～怎麼都沒拿到，再仔細思考一下整個流程

home -> (page view) -> post -> (send data layer)

從首頁到 post 頁面的時候，就已經會先打一個 history，然後在 GTM 會發一個 page view 出去，然後 post 頁面會等到 api 回來的時候才打 datalayer，這時候 GTM 已經把資料送出去根本不會包含 datalayer

event取代history

上面的狀況導致我們不能直接在 history change 就送 page view，因此要改一下時機點，變成是由程式自己發一個事件，這時候在 triggers 新增一個Custom Event

當然也要過濾掉原本的 history 設定，從All History Changes改成Some History Changes，並且設定 path 不包含 /post/

整個設定完以後，程式也在componentDidMount發送 event，就可以用 preview 看看結果是不是如預期！

結論

這個功能其實很簡單，官方也有說明怎麼設定，但因為時間點的問題，導致要多做一些動作，才能達到原本的預期，如果說你只是一個 url 的值當做 content group，就完全可以忽略上面所講的這些。

同步分享於部落格 https://jaiming0708.github.io

文章出處 —

Jimmy Ho

Full-stack engineer @snapask