作為開發人員，您遲早會在 GTM 中配置標籤 (Tags) 和觸發器 (Triggers)。如果您正在尋找關於如何在基於 React 的專案中啟動點擊觸發器的簡單說明，您來對地方了。讓我們一步步來學習吧！
本文將引領您完成在 React 應用程式中配置點擊觸發器（click trigger）所需的步驟。一旦您掌握了主要的 GTM 相關概念，只需幾個配置步驟即可利用所需的標籤管理功能。那麼，究竟什麼是 Google Tag Manager？其標籤（Tags）與觸發器（Triggers）功能能為您帶來哪些益處？
Google Tag Manager – 什麼是 GTM 以及如何使用它？
Google Tag Manager (GTM) 是一個代碼管理系統，在進行基礎代碼配置後，即可在任何網站或行動應用程式上輕鬆整合代碼。利用 GTM 的主要優勢在於可以直接從網頁控制面板介面修改代碼設置。話雖如此，在使用 GTM 時有三個基本概念需要理解：
- 標籤是代碼片段或追蹤像素（例如 Facebook 像素），用於收集並傳送從您的網站或流動應用程式中收集的分析數據。
- 觸發器負責監控事件，並決定何時執行標籤。
- 變數與標籤或觸發器所需的額外數據相關（例如：當 URL 為 /some/url 時執行此標籤）。
使用 Google Tag Manager 有哪些優勢？
由於 Google Tag Manager 是一款直觀且全面的網站和數位營銷工具，它能為您的業務和團隊提供多項優勢。以下是利用 Google Tag Manager 的四大主要優勢。
1. GTM 不需要編碼知識
Google Tag Manager 讓任何人（包括營銷人員）都能在無需深厚技術技能的情況下實施代碼。其用戶友好的介面讓用戶無需藉助網頁開發人員即可更改、刪除或添加 GTM 追蹤代碼，不過建議具備相關領域背景。這使技術支援不足的小型企業也能最大限度地利用網絡追蹤。
2. GTM 實現靈活性和實驗性
由於 GTM 無需網頁開發人員，因此讓市場營銷人員能夠實驗和測試各種技術與概念。它使市場營銷人員能夠根據新興的數字營銷趨勢實施試驗並優化營銷計劃，而無需外部支援。
3. GTM 支援更快的頁面載入速度
Google Tag Manager 配置為異步（asynchronously）而非同步（synchronously）執行代碼。這意味著每個代碼在加載後會立即部署，而無需等待所有代碼加載完成後才觸發。這避免了因某個加載速度緩慢的代碼而阻礙其他代碼部署的可能性。
4. GTM 集中管理一切
GTM 簡化並強化了整個標籤部署流程，因為所有的 GTM 追蹤代碼都維護在單一位置，而不是在不同的平台上進行開發和管理。能夠從單一介面生成並查看所有已部署的標籤，可以避免重複和潛在錯誤，從而顯著提高生產力。
Google Tag Manager 的用途是什麼？
GTM 有能力追蹤無限數量的網站和數位行銷活動，但大多數組織僅使用其中少數幾項。
- 下載量
- 滾動
- 點擊次數
- 表單
- 影片
1. 監控 PDF 下載
作為其數位行銷策略的一部分，許多公司會在網站上提供可下載的 PDF 文件，例如指南和白皮書。然而，如果您無法獲取有關下載量的統計數據，那麼一個有效的計劃將會受到顯著阻礙。
Google Tag Manager 用於監控 PDF 下載並評估其表現。一旦您可以追蹤下載量，就能將收集到的數據轉化為有用的洞察。
- 確定您的下載量最高與最低項目。
- 確定下載成功或失敗的原因
- 考慮增強下載量的策略，並使用 GTM 來監控您的進度。
2. 追蹤滾動行為
GTM 能夠偵測網站和頁面上的捲動活動，這是使用它的另一個誘因。
深入了解用戶如何瀏覽及與網站內容互動，能為網站活動提供寶貴資訊。
- 哪些頁面區域最常被瀏覽？
- 哪些資訊更具吸引力？
- 大多數訪客停止捲動頁面的位置
透過收集到的 GTM 數據，您可以構建出大多數網站用戶瀏覽每個頁面的全面圖像。作為回報，您可以藉此制定策略以提升網站的用戶體驗。
- 您如何建構網站
- 您會分享哪些資料？
- 需要改進的位置
3. 連結點擊統計及記錄
Google Tag Manager 能夠追蹤連結點擊（準確來說是訪客在您網站上點擊的 URL），這是一項優勢。不僅了解用戶的滾動行為，還了解他們的點擊活動，能為其在您網站上的旅程提供深刻的洞察。
- 您網站的訪客是如何從一個頁面跳轉到另一個頁面的？
- 哪些行動呼籲 (CTAs) 獲得最多的點擊？
您應該利用 Google Tag Manager，不僅是為了理解連結點擊，更是為了根據這些數據採取行動。
- 只需點擊幾下即可重新整理網站，或透過幾次點擊檢查頁面，以實現轉化率最大化。
- 了解哪些因素有助於提高 CTA 的點擊率，並針對點擊率較低的 CTA 修改文案。
4. 表格提交追蹤
註冊電子報、填寫問卷或報名參加活動，都是網站上具有特定目的和功能的表單範例。GTM 可確保準確追蹤表單提交。
為何使用 Google Tag Manager 進行表單追蹤：
- 報告透過表單提交產生的網站潛在客戶。
- 根據提交表單的數量計算活動的 ROI。
5. 監視視訊活動
影片是日益流行的數位行銷策略。隨著影片素材的激增，了解人們如何與資訊互動變得至關重要。
- 個人如何觀看影片
- 他們觀看片段的時間有多長？
- 如果或當他們看完影片時
從您的影片中獲取的數據可以為您組織的影片策略提供參考。
- 未來的影片將如何製作
- 您的受眾更偏好哪種內容？
- 適合您公司客戶的理想影片長度
創建 GTM 帳戶
建立免費賬戶是一個簡潔的兩步驟程序，但與您現有的 Google Analytics 和 Gmail 賬戶有所區別。為方便您順利完成賬戶設置，我們已記錄了賬戶創建流程。界面應呈現以下樣貌：
以下是後續步驟：
步驟 #1 註冊帳戶。
點擊 Google Tag Manager 頁面上的綠色「免費註冊」按鈕。系統將要求您輸入帳戶名稱（企業）、國家/地區和網站 URL，以及您希望使用 Google Tag Manager 的位置（Web、iOS、Android、AMP）。完成後點擊藍色的「建立」按鈕。
步驟 #2 將 JavaScript 代碼插入您的網站
隨後，您將收到代碼和指令，將其中一段代碼放置在頁面的 <head> 標籤內，另一段代碼則放置在 <body> 開啟標籤之後。您可以現在執行此操作，或稍後將代碼應用到您的網站（代碼可在您的控制面板中獲取）。完成後，請點擊「確定」。
步驟 #3 建立代碼
一旦您擁有 Google Tag Manager 賬戶，便應了解如何立即設置標籤。
Google Tag Manager 允許無限數量的代碼設置。
這對於開發有關受眾行為的深入報告非常有用，但如果您的標籤組織不當，可能會導致效率低下。
Google 建議代碼使用以下命名標準：代碼類型 – 應用程式名稱 – 詳細資訊。
例如，您可能將一個標籤設定為「AdWords conversions – iOS – February 2018 campaign」，而另一個設定為「Google Analytics – CTA – About Us page」。
因此，您可以準確地識別並收集與特定活動或網站相關的數據。
例如，第二個標籤「Google Analytics – CTA – About Us page」表示您的「關於我們」行動呼籲 (call-to-action) 按鈕的表現。這項資訊非常重要，如果您將標籤命名為更通用的名稱（例如「CTA button」），這項資訊可能會遺失。
既然我們已釐清，讓我們看看如何建立標籤：
步驟 #3.1 在 Google Tag Manager 控制台建立新代碼。
在您的 Google Tag Manager 控制面板中，點擊「新增代碼」（如下方紅圈所示）。
步驟 #3.2 配置您的代碼。
點擊頁面頂部「標籤配置」框中的任何位置以選擇標籤類型。
您可以直接在下方加入您的代碼，或者您可以在下一步從模板開始。
步驟 #3.3 選擇代碼類型。
有幾種標籤類型（並非所有類型都會在此顯示，您也可以自定義標籤類型）。如果您想為您的應用程式和網站設置 Google Analytics 網頁訪客監控，請選擇「Google Analytics 4」。
步驟 #3.4 連結至您網站的 GA4
將會有一個欄位供您輸入衡量 ID。請從您的帳戶中複製衡量 ID，然後將其貼上到此欄位中。
*在此之前，您必須完成 您網站的 GA4 設定。
步驟 #3.5 透過選擇觸發條件來決定何時記錄代碼。
選擇觸發條件（觸發條件是指您希望記錄標籤的時間點，例如「每當用戶查看頁面時」）。我選擇了「所有頁面」以便在任何網頁被瀏覽時接收數據，但您的選擇可能會根據您的目標而有所不同。
步驟 #3.6 儲存您的代碼。
在您對「標籤配置」和「觸發條件」框中的資訊感到滿意後，點擊藍色的「儲存」按鈕。
步驟 #4 按一下「提交」按鈕以啟用您的標籤。
隨後點擊藍色的「提交」按鈕。除非您執行此操作，否則您的標籤將無法運作。
當您點擊「提交」時，將會載入此「提交配置」頁面。可用的選項包括「發佈並建立版本」及「建立版本」。由於我已準備好將標籤推送到網站的所有頁面，因此我選擇了「發佈並建立版本」，然後點擊了螢幕右上角的藍色「發佈」按鈕。
步驟 #5 為您的標籤添加名稱和描述以便進行分類。[可選]
最後，將顯示此「容器版本說明」。為了保持您的標籤結構化，請為每個標籤提供名稱和說明，以解釋您試圖透過該標籤擷取的內容。
適用於 WordPress 的 Google Tag Manager
如果您的組織利用 WordPress 來託管其網站，將 Google Tag Manager 集成到 WordPress 是一個簡單的無程式碼程序。
Site Kit 是由 Google 推出的官方 WordPress 外掛程式。Site Kit 簡化了重要 Google 工具（例如 Google Tag Manager）的安裝與設定，並提供權威且最新的網絡發展指引。請瀏覽 Site Kit 所支援的 Google 產品清單。
以下是後續步驟：
1.登入您的WordPress帳號。
2. 確保您的網站是公開可用的，這表示它不處於維護模式或受密碼保護。
3. 在左側選單中，按一下插件。
4. 在“外掛程式”頁面頂部，按一下“新增”，然後搜尋“Site Kit”。
5. 點選 Google Site Kit 頁面上的立即安裝。
6. 安裝插件後，從左側選單中選擇插件。
7. 點擊“Site Kit by Google”下方的“激活”
8. 啟動插件後，點選左側的「Site Kit」。
9. 點選“使用 Google 登入”，使用您的 Google 帳戶登入。
10.完成精靈並啟用 Google 追蹤程式碼管理器和 Google Analytic 4。
11. 提供許可後，按一下繼續以確認網站的所有權。
12. 選擇「允許」以允許存取 Google 帳戶資訊。
13. 若要將網站新增至 Search Console，請點選「新增網站」按鈕。
14. 您已成功設定插件。
15. 點選「前往我的儀表板」繼續。
16. 從左側選單中選擇網站工具包和儀表板。
17. 按一下「分析」標題下的「連線服務」。
18. 按一下「繼續」繼續提供更多權限。如何向您的 Google 帳戶提供 Site Kit 擴充存取權並繼續將 WordPress 整合到 Google Analytics。
19. 選擇已存在的分析屬性，然後按一下組態分析。
現在，分析已配置。
結語
Google Analytics 4 與 Google Tag Manager 能讓您做出更明智的營銷決策，並大幅提升客戶活動追蹤的效能。
使用 GTM 實施此較新版本，並利用 GA4 提供的靈活性。
需要協助安裝 GA4 和 GTM？或者將 Google Tag 從 GA3 遷移到 GA4？我們隨時為您提供協助，請隨時 聯繫我們 與我們聯絡！