[GTM] pageview加上content group

Frontend, GTM
4 mins.
  1. 1. 設定GTM
    1. 1.1. Data Layer Variable
    2. 1.2. GA Setting
  2. 2. Send Data Layer
    1. 2.1. push data layer
    2. 2.2. event取代history
  3. 3. 結論
GTM

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

#設定GA

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

admin-view

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

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

create-content-grouping

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

設定GTM

Data Layer Variable

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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取得
GA-setting

Send Data Layer

push data layer

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

1
2
3
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
post-view-event

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

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

結論

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

prev： next：