如何用 GTM 設置追蹤使用者的 Cookies ?

過往的文章中，我們曾經介紹過 GTM 內建的「第一方 Cookie 變數」，可以協助我們輕鬆地取得瀏覽器中 Cookie 的資料，幫助我們進行追蹤的設定。

在接續接下來的內容之前，我們建議先看過「GTM 變數介紹：第一方 Cookie(1st Party Cookie Variable)」這篇文章，如果真的很趕時間，最起碼要知道什麼是「第一方 Cookie」，我們同樣也有在文章中做了簡單的介紹，再回頭來看這篇，會比較好理解我們在說的操作。

這篇文章，我們會介紹兩種 Cookie 的設置方式，分別是使用 GTM 中的「 自訂 HTML 」Tag 以及「 範本庫 」中的範本。

讓我們繼續看下去。

本篇重點

方法 1 – 用「自訂 HTML」設置 Cookie

假設公司今天與網紅合作，請網紅宣傳並引導流量至網站上購買產品，為了方便統計哪一位網紅的成效較好，每一位網紅所使用的網址都帶有特定的參數，類似下面這樣。

www.abc.com/?influencer_id=NetRed

(紅字為辨別網紅的參數)

透過不同的 influencer_id，我們便可以知道哪一位合作夥伴有促成本次的購買，方便作為異業合作部門行銷成效的統計。

你可能會想說，既然是網址的參數，我們用「網址」變數來取得資料是不是就可以了？

沒錯，如果你的網址是直接來到結帳頁面，使用者從點擊網址到結帳完成，一氣呵成，沒有換頁的話，那麼這麼做是可行的。

但只要有了換頁行為，原本在網址上的參數就會消失，我們就無從得知是來自於哪個合作夥伴的導購了。

這也是為什麼我們需要先將該參數存入 Cookie 中的原因，如此一來，才能夠幫助我們做到較為精準的統計。
ㅤㅤ

設置「網址」變數

首先，我們需要在網址中出現 influencer_id 時，抓取該參數的值，這部分的操作相當簡單，只要使用「網址」變數來取得資料就可以。

GTM 左側面板選擇「變數」> 右邊下方「使用者定義的變數」區塊選擇「新增」> 選擇「網址」變數。

ㅤ

在「元件類型」下拉選單中選擇「查詢（query）」，於「查詢鍵」欄位輸入 influencer_id。

ㅤ

完成之後，記得先到「預覽模式」測試，確保當使用者透過帶有參數的網址來到網站時，設定的「網址」變數有抓到該參數的「值」。

確定有正確抓取到我們需要的「值」之後，就可以開始來用「自訂 HTML」代碼設定 Cookie 了。

ㅤ

設定「自訂 HTML」代碼

接下來，我們要將一段 Javascript 代碼放置到「自訂 HTML」代碼中，看不懂這串 Javascript 代碼的朋友沒關係，只要知道如何複製貼上並且修改幾個地方就可以了（當然，如果你願意去了解，更好）。

這段 Javascript 在處理的，是將我們需要的「值」（也就是上一個段落設定的「網址」變數），存入到 Cookie 當中。

如此一來，儘管使用者換頁造成網址的參數遺失，我們依然可以知道這位使用者曾經透過特定合作夥伴的連結來到網站（只要沒有使用不同瀏覽器回到網站的話）。

GTM 左側面板選擇「代碼」 > 右上角點擊「新增」> 點擊「請選擇代碼以開始設定」> 右側面板選擇「自訂 HTML」

ㅤ

將連結內的 Javacript 代碼貼入到 HTML 欄位中，這串 Javascript 看不懂沒有關係，我們只需要修改下圖中第 14 行中括號內的 3 個項目就可以，這 3 個項目分別代表的是：

  • 「 InfluencerID 」 的位置是設置你的「Cookie 名稱」的地方。
  • 「{{PageUrlV – influencer_id}}」的位置為設置「Cookie 值」的地方。
  • 「 7 」的位置為設置「Cookie 到期時間」的地方。

括號內依序為「Cookie 名稱」、「Cookie 值」以及「Cookie 到期時間」，可以到這邊複製完整的代碼，再進行修改就可以了。

設定完畢之後，按下儲存，到這邊，我們就透過「 自訂 HTML 」代碼完成了設置 Cookie 的代碼設定。

你也可以直接複製以下代碼（紅色標示處是要你要更改的部分）：

<script>
  // 函數：設置 Cookie
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
  }

  // 調用函數設置 Cookie
  setCookie('輸入你的Cooki名稱', '{{你的「網址」變數}}', 輸入Cookie於多久到期); 
 
</script>

ㅤ

補充一下：在「自訂 HTML」 代碼中使用其它變數

GTM「自訂 HTML」代碼有個很棒的功能，就是你可以在代碼中呼叫該 GTM 容器中的「變數」，只要輸入「 {{ 」(不含上下引號)，就會出現「變數」的下拉選單，不管是「內建變數」或是「使用者自訂義」的變數，都會顯示在選單當中，非常方便。

未來如果有遇到類似的設定時，都可以用這樣的方式在「自訂 HTML」代碼中取得該容器中其它的變數「值」。

ㅤ

設定「觸發條件」

我們不需要這段「自訂 HTML」代碼在全站所有頁面啟動，只需要當網址有出現 influencer_id 的時候啟動這組代碼就可以。

因此，我們會使用「網頁瀏覽」觸發條件，設定方式如下：

GTM 左側面板選擇「觸發條件」 > 右上角選擇「新增」> 點擊中間「請選擇觸發條件類型以開始設定」 > 選擇「網頁瀏覽」

ㅤ

選擇「部分的網頁瀏覽」，條件設定當選擇「Page URL」 包含「 influencer_id 」時，滿足該觸發條件，進而啟動「自訂 HTML」代碼。

（注意，要選擇 「Page URL」 變數，才有辦法抓到網址末端「？」之後的參數，也就是範例中的 influencer_id，如果選擇「Page Path」變數，是抓不到參數資料的。

關於網址結構的部分，可以參考文章「GTM 網址變數介紹」中的網址結構段落，有更進一步的解釋。）

ㅤ

設定完畢之後，將觸發條件與前面的「自訂 HTML」代碼進行綁定，就可以透過「預覽模式」進行測試了。

測試一下

在「預覽模式」中，預期應該要看到「自訂 HTML 」代碼的啟動，接著我們還要檢查網頁上是否有儲存到我們預期的 Cookie。

一樣，我們測試帶有參數 influencer_id=RedNet 的網址。

ㅤ

在「預覽模式」畫面中，應該要看到「自訂 HTML」代碼成功啟動。

ㅤ

接著透過網頁開發者工具檢查，Cookie 是否有成功設定，且存入正確的「值」。
（以我們的範例來說，Cookie 名稱應為 InfluencerID，其「值」為 RedNet。）

如何透過網頁開發者工具檢查（Dev Tool）？

於網頁的空白處點選右鍵 > 選擇「檢查」> 於檢查工具的頁籤中選擇「Application」 > 左側選單中選擇並展開「Cookies」 > 選擇自家網站網域 > 應於右側看到我們所設定的 Cookie

如果可以看到我們設定的 Cookie 名稱，以及抓取到正確的「值（RedNet）」，就代表設定成功，可以將代碼發佈了。

方法 2 – 用「範本庫」中的代碼範本

如果你看到 Javascript 代碼就感到頭暈，沒事，這是可以理解的，要行銷人員去認識這些如同無字天書的代碼，實在是勞心勞力。

所以，接下來要介紹的方式，是用 GTM 中的「範本庫」來協助我們，步驟相對簡單，也不用看到擾人的 Javascript 代碼，ㄧ樣能完成所需的 Cookie 設定。

ㅤ

GTM 左側面板選擇「代碼」> 右上角點選「新增」> 「請選擇代碼類型以開始設定」 > 選擇社群範本庫（如下圖）> 於範本庫中搜尋「Cookie」 > 選擇「Cookie Creator」

選擇後，將代碼「新增至工作區」 > 要使用社群範本需要給予權限，這邊「新增」

（如果不給予權限就無法使用，這邊要注意的是，之所以叫做社群範本就是指這些範本並非官方開發，因此如果你對使用上有疑慮，建議使用前述的「自訂 HTML」代碼方式進行設定。）

ㅤ

調整範本設定

接下來，我們必須要對範本進行一個小調整，以便我們可以新增任何我們想要的 Cookie 名稱。

GTM 介面左側面板選擇「範本」 > 選擇右側「 Cookie Creator 」進入範本設定畫面 > 點擊「權限」頁籤 > 展開「設定 Cookie」選單 > 刪除第二列的 Cookie > 編輯第一列的 Cookie

ㅤ

我們必須將 Cookie 名稱的欄位改為「 * 」，表示允許任何 Cookie 名稱的命名，接著點選右上角的儲存。

否則儘管在 GTM 「預覽模式」中會看到代碼啟動，但因為使用者針對 Cookie 的命名與範本預設名稱不符，Cookie 便不會設置成功。

ㅤ

設定「範本」代碼

完成範本的新增以及設定之後，接下來，就可以使用該範本進行代碼設定，抓取我們需要的「值」，並將其存到 Cookie 當中。

翻譯成白話文就是

用範本「Cookie Creator」建立代碼，抓取網址末端的參數「influencer_id」，並將其透過「Cookie Creator」存到 Cookie 中。

GTM 左側面板選擇「觸發條件」 > 右上角選擇「新增」> 點擊中間「請選擇觸發條件類型以開始設定」 > 選擇「Cookie Creator」

ㅤ

接下來，就如同修改「自訂 HTML 」代碼一樣，依序在以下欄位中，填入「Cookie 名稱」、「 Cookie 值」以及「Cookie 到期時間」，只不過這次的設定介面，相較起來友善了許多。

ㅤ

最後，將透過 Cookie Creator 設定的代碼與前面設定的「網頁瀏覽」觸發條件進行綁定後，進入「預覽模式」進行測試，預期應該要在開發者工具的 Application 頁籤的 Cookie 清單中看到剛剛設定的 Cookie (名稱為 InfluencerIdByCookieCreator)。

（測試流程與前面所做的相同，這邊就不再重複贅述。）

ㅤ

確認該 Cookie 存在之後，就表示設定完成，可以提交你的 GTM 容器了。

瞭解如何設定之後，接下來最重要的，就是要知道可以如何應用。

關於這點，我們在過去的文章「GTM 變數介紹：第一方 Cookie(1st Party Cookie Variable)」中有詳盡介紹了應用的方式，

文中同樣是使用 inluencer_id 作為範例，搭配這篇一起操作，你應該就能舉一反三應用在其它地方了。

總結一下

當行銷人員可以自行透過 GTM 為網站設置 Cookie 時，我們就可以輕易地做出很多追蹤的變化。

例如：
針對看過網站上特定廣告的使用者，給予一個 Cookie，並設定 7 天後到期，在到期之前，使用者在網站上都不會再看到該廣告，降低對使用者的干擾。

或是針對曾經登入過的使用者，給予一個 Cookie，當他們再度來到網站時，不會對他們彈出加入會員的邀請視窗（但請不要儲存個人資訊到 Cookie 中）。

也可以利用 Cookie 來記錄曾經在特定時間內，瀏覽過特定頁數或是頁面的使用者，給予這些使用者不同的彈窗廣告。

許多的設置方式，相信可以讓身為行銷人員的你舉一反三，以盡可能地達成行銷的目的，追蹤正確的數據，並用來擬定行銷計畫。

你還有什麼其它更多有趣的玩法嗎？歡迎留言分享告訴我們。

延伸閱讀

如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）

同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）

Tags