如果你想要觀察使用者是否有在特定頁面停留的時間（例如填寫表單的時間），或是想要讓網站上的某些代碼在使用者來到頁面之後的幾秒才啟動（例如彈出廣告視窗），我們都可以透過 Google Tag Manager 中的觸發條件「計時器（Timer）」來協助我們完成。
該怎麼做呢？
讓我們繼續看下去。
本篇重點
什麼是「計時器（Timer）」觸發條件？
在「GTM 觸發條件介紹：我們該在何時使用何種觸發條件？」的文章當中，我們已經介紹過「計時器（Timer）」。簡單來說，如果你有在特定頁面設定「計時器」，那麼當使用者到達該頁面時，網頁背後就會有個計時器自動開始計時。
假設當使用者在頁面上停留 10 秒鐘之後，即滿足該「計時器」觸發條件，進而可以用來啟動任何你需要的 GTM「代碼（Tags）」，如下圖。
最常見的應用是搭配「捲動事件」以及「觸發條件群組」，來觀察使用者對於網頁的興趣程度。這部分的操作可以參考文章「用觸發條件群組（Trigger Groups）了解使用者體驗」，文內將會有更完整的說明。
此外，這個觸發條件在啟動時，與其它觸發條件相同，會推送「資料層事件」到「資料層」中，也會推送許多「參數」到資料層中，方便我們可以透過 GTM 的「資料層變數」取用，是相當方便的一件事。
當「計時器」被觸發之後，你預期會在「預覽模式」中看到被推送到「資料層」內容（如下圖）。
這些參數分別代表：
- gtm.timerId：計時器的唯一識別 ID，每個計時器都有不同的 ID。
- gtm.timerEventNumber：當前頁面上已啟動計時器的數量。
- gtm.timerInterval：在創建「計時器」觸發條件時，所設定的間隔時間值（代表多久啟動一計時器）。
- gtm.timerStartTime：計時器首次啟動的時間。
- gtm.timerCurrentTime：最近一次計時器啟動的時間。
- gtm.timerElapsedTime：自計時器啟動以來，已經過的時間總長（以毫秒為單位）。
了解這些參數所代表的意思之後，可以幫助我們在未來有更多的應用，假設有一天老闆想要追蹤某些特定的事件，你就可以從腦中的工具箱翻找，並理解到：「OK，計時器中有提供我們需要的參數，可以用這個觸發條件來解決我們的問題。」
接下來，我們將舉兩個應用情境，分別是：
- 在使用者停留特定時間之後，給予彈出的廣告視窗。
- 觀察使用者花了多少時間才將表單填寫完成。
【情境1.】經過特定時間後，彈出廣告視窗
假設我們認為，凡是停留在特定頁面超過 30 秒的使用者，對該頁面上的產品可能很有興趣，因此，我們想要在使用者抵達頁面的 30 秒之後，推送優惠券下載視窗給使用者（如下圖）。
此時就可以利用「計時器」觸發條件搭配「自訂 HTML」代碼完成這件事情。
ㅤ
設定「計時器」觸發條件
GTM 左側面板選擇「觸發條件」 > 右上角點擊「新增」 > 選擇觸發條件類型「計時器」
在計時器的設定畫面中，依序填入以下欄位（可參考圖片設定）：
- 在「間隔」欄位輸入想要的秒數，由於此欄位是以「毫秒」為單位，每 1 秒等於 1,000 毫秒，我們的範例為 30 秒，因此在這邊要填入 30,000。
ㅤ - 在「限制」欄位填入 1，限制該觸發條件只被觸發一次即可。（如果需要無限觸發，則是填入 0，這樣會讓「計時器」每 30 秒就被觸發一次，。）
ㅤ - 最後填上想要應用「計時器」觸發條件的頁面，圖中範例的設定方式為全站所有頁面觸發。
ㅤ - 完成後，將其命名儲存。
ㅤ
設定「彈窗」代碼
GTM 左側面板選擇「代碼」> 右上角選擇「新增」> 選擇代碼類型「自訂 HTML 」
將代碼複製貼入「HTML」欄位當中，如下圖所示（這邊只是舉例，網路上很多漂亮的彈窗模板可以使用，但請記得修改成適合 GTM「自訂 HTML」代碼使用的方式，或是你們家的工程師寫一段符合公司 CI 的給你使用。）
如果你只是想練習，可以到這邊複製貼上彈窗代碼使用。
完成之後就可以命名儲存，接下來就可以透過「預覽模式」確認代碼是否正確運作，預期應該要在我們抵達頁面 30 秒之後，出現以下畫面（左側出現 Timer 事件，右側「自訂 HTML」代碼啟動。）
接著回到網頁畫面中，確認彈窗有出現就沒問題了。
【情境2.】用「計時器」計算使用者填寫表單的時間
假設網站上有一個表單填寫頁面，我們想要知道使用者都花了多少時間在填寫這份表單，我們可以如何透過「計時器」來幫助我們取得這個數值？
ㅤ
設定表單追蹤事件
在開始之前，請先確定你已經設定好「表單提交」追蹤事件，我們在過去的文章當中有提到許多種追蹤的方式，如果還沒設定的朋友，可以參考文章「 GTM 表單提交追蹤：你應該知道的 5 種設定方式 」。由於每個人的網站結構以及表單設計方式的不同，所以追蹤方式的設定也會有所差異，請選擇一個適合你當下資源和需求的設定方式來進行。
ㅤ
設定「計時器」觸發條件
設定「計時器」觸發條件的步驟跟前面一樣，只是這次我們可以讓「計時器」啟動的間隔短一點，並且無限制的觸發。
- 在「間隔」欄位輸入 5,000，我們需要「計時器」每 5 秒就觸發一次，因此在這邊要填入 5,000。
ㅤ - 在「限制」欄位填入 0，表示「計時器」會在該頁面無限觸發。
ㅤ - 最後填上想要應用「計時器」觸發條件的頁面，這邊我們選擇只在表單填寫頁面使用「計時器」。
ㅤ - 完名後，將其命名儲存。
完成之後來到「預覽模式」中的填寫表單頁面進行測試，你應該會注意到左側介面中，每 5 秒就會跳一次 Timer，點開後觀察左邊的 Data Layer 頁籤，會看到「gtm.timerElapsedTime」的值不斷的在增加。
我們就是要運用這個「gtm.timerElapsedTime」，來幫助我們了解到使用者花了多少時間在填寫表單。
ㅤ
設定「時間總長」變數
接下來，我們要透過 GTM 的「資料層變數」取得該總時長紀錄（gtm.timerElapsedTime），並與「表單提交」追蹤事件結合，來達成我們的目的。
（對於「資料層變數」尚不熟悉的朋友，可以參考文章：GTM 變數介紹：資料層變數 Data Layer Variable）
GTM 左側面板選擇「變數」> 右邊使用者定義的變數區塊選擇「新增」> 選擇「資料層變數」
在資料層變數的欄位中輸入「gtm.timerElapsedTime」，需完全一樣，包含大小寫，設定完畢之後，就可以命名儲存。
這個「gtm.timerElapsedTime」的來源，就是當觸發條件「計時器」啟動時，推送到資料層的參數名稱，如果你忘了，可以回到前面的段落複習一下我們的解釋，或是參考下圖。
ㅤ
將「資料層變數」放入「表單提交」追蹤事件
最後一個步驟，將設定好的「資料層變數」與「表單提交」追蹤事件結合，如此一來，當使用者提交表單時，該追蹤事件也會一起傳送使用者在抵達該頁面到完成表單提交花了多少時間的參數。
完成之後，就可以到「預覽模式」測試一下，當我們提交表單之後，是否正確一併傳送使用者在該頁面累積的總時長紀錄。
如果設定都正確的話，預期應該要能在「表單提交」追蹤事件中看到類似下圖的畫面，沒問題的話，也同步透過 GA4 Debug View 同步確認是否有接收到一樣的資料。
ㅤ
最後別忘了，由於事件參數名稱「page_duration」是我們自訂的，記得要到 GA4 中自訂維度，否則未來是無法在報表中查找到數據的喔！
總結一下
大部分最常見的「計時器」應用，還是用在「當使用者抵達頁面 X 秒之後，彈出廣告視窗」這樣的使用情境，或是像我們上一段舉例的「計算使用者填寫表單的時間」，方便我們進行頁面的優化時，有個數據可以作為優化結果的參考。
當然，不要被因此被限制了，你還會用「計時器」觸發條件來做什麼事呢？底下留言告訴我們，我們相信這個觸發條件的用途應該不只是這樣而已！？
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎你看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言或是到社群上找我們，我們都會盡我們所知道的進行回覆：）