目的

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

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

事前準備

• 參考先前的文章，並設定 GTM 將自訂事件 "searchSubmit" 整合 GA。

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

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

  dataLayer.push(pushData);
};

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

點選 Choose variable type > 並選擇 DataLayer

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

(Datalayer Checker Plugin)

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

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

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

參考資料

GTM Data Layer 資料層 基礎介紹

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

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