Mark Ku's Blog
在 ChatGPT 開啟在 Claude 開啟

透過 GTM DataLayer 傳遞前端搜尋關鍵字參數,並在 GA4 即時報表中取得電商網站會員搜尋行為。設定步驟包含建立 Data Layer 變數,將其加入 GA4 事件參數,即可在 GA4 即時報表查看。

目的

依據先前的文章得知,我們能透過 Google Tag Mangaer 將自訂事件整合在 Google Analysis。

此篇則是透過 Google Tag Mangaer 傳遞事件的參數,取得會員平時在經營的電子商務搜尋了些什麼關鍵字,並整合在 GA4 報表中。

事前準備

首先,在您的前端網站,搜尋按鈕事件中,執行下面前端程式碼

export const pushSearchDataLayer = (searchString: string) => {
  const dataLayer = window.dataLayer || [];
  const pushData = {
    event: 'searchSubmit',
    SearchParam: searchString,
  };

  dataLayer.push(pushData);
};

接著,我們需要建立變數,來接前端程式傳遞過來的參數,點選 Variables > New

GTM 介面,左側變數選單與右側新增按鈕被紅
GTM 介面,左側變數選單與右側新增按鈕被紅

點選 Choose variable type > 並選擇 DataLayer

GTM 變數設定選擇
GTM 變數設定選擇

填寫 Data Layer Variable Name ,可以透過 Chrome 的 Datalayer Checker Plugin,取得正確 Variable Name,並將變數名字改成方便識別的名稱 "DataLayer - searchString"。

GTM設定Data Layer變數名稱為searchString
(Datalayer Checker Plugin)
Datalayer Checker顯示searchString變數與值

回到 Tags > 修改先前建立自訂事件 "GA4 事件 - searchSubmit"

GTM標籤頁面顯示GA4事件searchSubmit
GTM標籤頁面顯示GA4事件searchSubmit

此時在 Event Parameters 就可以增加先前建立的變數,"DataLayer - searchString"

GTM設定GA4事件參數searchString為DataLayer變數
GTM設定GA4事件參數searchString為DataLayer變數

最後我們回到 GA 的報表 > 即時 > 事件計數 > 點選 searchString > 此時就能得知用戶搜尋了那些關鍵字的統計。

GA4即時報表顯示搜尋關鍵字t-shirt
GA4即時報表顯示搜尋關鍵字t-shirt

參考資料

GTM Data Layer 資料層 基礎介紹

data layer及JSON是什麼,它們如何與GTM互動

新版 GA4 電子商務事件,新舊差異與 Purchase 轉換!

作者

Mark Ku

擁有 10+ 年經驗的資深軟體工程師,現為 AI 應用 Builder,專注於大型平台架構與簡化複雜系統設計,從電商系統到訂閱與收費平台,結合 AI Agent、AI 整合與自動化開發,打造高效率且可持續演進的產品技術基礎。閱讀更多

覺得這篇有幫助?

作者做的免費工具、每日 Podcast 與電子報,都在這裡。

Mark Ku · 本文採用 CC BY 4.0 授權,轉載請註明作者並附上原文連結。

留言

訂閱電子報

訂閱後即時收到新文章通知,不錯過任何技術分享。

提交即表示同意接收電子報,隨時可

熱門文章

View all
Mark Ku
··643

Oracle Cloud 永久免費方案 Linux 主機及固定 IP :0 元打造雲端解決方案

Oracle Cloud 永久免費方案 Linux 主機及固定 IP :0 元打造雲端解決方案
Mark Ku
··556

告別 Postman 收費陷阱!開源 Git 原生 API 測試神器 Bruno 實戰指南

告別 Postman 收費陷阱!開源 Git 原生 API 測試神器 Bruno 實戰指南
Mark Ku
··330

一款免費開源類似於 Notion 類知識庫系統 — Outline Wiki 佈署與備份全攻略

一款免費開源類似於 Notion 類知識庫系統 — Outline Wiki 佈署與備份全攻略
Mark Ku
··258

訓練自己的 AI 語音:硬體門檻、開源模型比較與 LoRA 微調

訓練自己的 AI 語音:硬體門檻、開源模型比較與 LoRA 微調
Mark Ku
··230

打造高效 API 管理平台:從 0 開始部署 Kong Gateway - Part 1

打造高效 API 管理平台:從 0 開始部署 Kong Gateway - Part 1
Mark Ku
··223

在 Ubuntu 上設置 Samba 來共享資料夾,讓 Windows 11 用戶可以存取

在 Ubuntu 上設置 Samba 來共享資料夾,讓 Windows 11 用戶可以存取