如何用 GTM 轉換「非」GA4 規格的電子商務資料層參數？

在之前的「如何用 GTM 設定 GA4 電子商務事件？」文章當中，我們一步步地說明了如何透過 GTM 完成 GA4 電子商務事件的設定，但問題來了，如果網站資料層的電子商務參數格式是照著 Google 官方的規格撰寫，那麼問題不大，我們只要在設定電子商務事件代碼時，勾選「傳送電子商務資料」，GA4 就會自動抓取資料層中的電子商務參數，我們不用再多做任何設定。

ㅤ

但萬一不是呢？而像是下圖這樣。

ㅤ

左邊是 GA4 官方提供的格式，右邊則是「非」 GA4 官方的格式，有許多相同性質的參數值，但參數名稱的命名卻有很大不同。

需要 transaction_id，網站卻是 receiptNumber。
GA4 官方規定要 value，網站卻給了 grandTotal。
規定要 currency，網站顯示為 currencyType。
GA4 對於折價券要的參數名稱是 coupon，網站給的是 discountCode。

ㅤ

也因為這樣，我們就無法直接在事件代碼設定介面中，直接勾選「傳送電子商務資料」了，因為 GA4 無法判別非官方的命名格式，面對這樣的情況，我們可以怎麼做呢？

ㅤ

有兩種方式，一種是使用「資料層變數」，另一種則是使用「自訂 Javascript 」變數，兩個方式都可以達成一樣的結果，差別只在於如果想將該筆訂單內的「產品」細項傳給 GA4 的話，這個方法就行不通，只能傳送該筆訂單 ID、訂單總金額、幣別、運費、稅以及折價券名稱（基本上已經足夠一般「購買」事件追蹤使用），因此無法看到該筆訂單內包含什麼產品，GA4 中與「產品」相關的維度也不會有資料。

而使用「自訂 Javascript」變數的話，則能夠完整傳送該訂單內的產品細項，而缺點就是，不適合害怕看到 JS 代碼的人以及需要花點時間理解這串代碼在做什麼，因為還必須要依照你的網站資料層結構，進行些微修改，但兩個在背後運作的邏輯，其實都是相似的。

如果你不想碰觸 Javascript 代碼，那麼就使用方法 1 的「資料層變數」，設定步驟上會較好理解，如果想有較完整的設定，那麼使用方法 2 的「自訂 Jacascript 」變數則會是更好的方法。

現在，讓我們繼續看下去。

ㅤ

#1 使用「資料層變數」

以 GA4 的官方文件規定來看，當要傳送「購買」事件到 GA4 中時，該事件就必須帶上以下參數：currency 、 value 以及 transaction_id ，如果要帶上該訂單內的產品項目，則必須要確保有 item_id, item_name。

（注意：這邊的操作不會傳送購買的產品資料，因為只單用「資料層變數」處理）

假設網站的資料層（Data Layer）如下圖，我們就必須依照 GA4 的需求，找出資料層中相對應的參數名稱，並且用「資料層變數」取得該參數的值，透過 GTM 中「購買」事件代碼的事件參數一起送到 GA4 中。（好，我們知道這段很繞來繞去，可以繼續往下看截圖，然後進行操作。）

ㅤ

整理一下，我們要做的事：

grandTotal 轉換成 value。
currencyType 轉換成 currency。
disountCode 轉換成 coupon。
receiptNumber 轉換成 transaction_id。

GTM 左側面板選擇「變數」 > 下方「使用者定義的變數」區塊右上角「新增」 > 選擇「資料層變數」

ㅤ

在「資料層變數名稱」欄位中，輸入 grandTotal，也就是網站資料層中，代表訂單總價值的參數名稱，完成後，我們將其命名為 DLV | grandTotal 儲存（變數名稱可以自訂，只要好閱讀方便管理就可以了）。

ㅤ

接著用一樣的設定方式，依序完成 currencyType, discountCode, receiptNumber, 的設定，最後總共要有 4 個「資料層變數」，分別是：

DLV | grandTotal (代表總訂單金額)
DLV | currencyType （代表幣別）
DLV | receiptNumber （代表訂單 ID）
DLV | discountCode（代表折價券代碼）

ㅤ

設定「購買」事件參數

購買事件的設定方式，我們在之前的「如何用 GTM 設定 GA4 電子商務事件」文章中已經有列出詳細步驟，這邊就不再贅述，還不知道如何設定的朋友可以去參考該篇文章的設定方式。

接下來我們要做的，就是在「購買」事件參數的設定中，放入剛剛設定好的「資料層變數」，並且一一將其對應 GA4 規定的參數名稱，設定畫面會如下圖：

ㅤ

因為資料層中的資料格式不符合 GA4 規格，所以我們在這邊只取出網站資料層中特定幾個參數的「值」（訂單編號、幣別、訂單價值以及折價券），接著在「購買」事件的參數中，搭配官方規格的參數名稱，並傳送到 GA4 中。

如此一來，GA4 就有辦法認識「購買」事件所帶的參數，進而記錄保存，讓我們知道使用該折價券的使用者，可能來自於哪裡？購買了多少訂單金額？以及該筆訂單的編號。

唯一美中不足的地方就是，你無法知道該訂單裡面包含了什麼品項，因為在錯誤的資料層中，跟品項相關的參數名稱 GA4 全部都無法辨識，儘管我們可以同樣用「資料層變數」抓到 productList，但因為其巢狀結構中項目所使用的參數名稱 GA4 都不認識，因此就算傳給 GA4 也不能用。

（關於資料層巢狀結構的部分，可以參考這裡）

ㅤ

如果你真的很需要知道訂單中包含了什麼產品，那麼可以使用第二個方法，也就是「 自訂Javascript 」變數。

ㅤ

#2 使用「自訂 Javascript 」變數

開始之前，先複習一下目前要處理的資料層長什麼樣子（延續方法 1 的資料層範例）

ㅤ

#2-1 建立「資料層變數」

在方法 1 中，我們已經建立了抓取訂單編號、幣別、訂單價值以及折價券的「資料層變數」，這邊必須再新增一個抓取產品的，將其命名為 DLV | productList，稍後會在「自訂 Javascript」變數中使用。

ㅤ

#2-2 複製 Javascript 代碼並修改

先從下方或是到 Github 中複製該串代碼，這代碼可以協助我們將參數名稱轉換成合乎 GA4 官方規定的名稱，並且可以在「購買」事件代碼的設定中，直接勾選「傳送電子商務資料」，傳送 GA4 可以辨識的結帳資訊。

（注意，紅色粗體字的部分，要替換成符合你網站的資料層結構以及「資料層變數」的名稱）

function() {
    // 確保產品項目存在
    var products = {{DLV | productList}};

    // 構建 items 的 array，一一放入轉換名稱後的產品
    var items = products.map(function(product) {
        return {
            item_id: product.sku,
            item_name: product.productTitle,
            quantity: product.amount,
            price: product.costDetails.unitCost
        };
    });

    // 最後返回符合 GA4 規格的 object
    return {
        transaction_id: {{DLV | receiptNumber}},
        value: {{DLV | grandTotal}},
        currency: {{DLV | currencyType}},
        coupon: {{DLV | discountCode}},
        items: items
    };
}

ㅤ

在過去的文章中我們曾經說過，不管是在「自訂 Javascript」變數或是「自訂 HTML」代碼中，都可以自由取用 GTM 容器中的變數，只要打上「 {{ 」（不含上下引號），就可以呼叫變數的下拉選單清單，選擇需要的變數，將其應用在代碼中。

ㅤ

另外，關於抓取巢狀結構資料「值」的方式，也就是下圖紅框處，如果不知道抓取邏輯的朋友，可以參考文章「GTM 變數介紹：資料層變數（Data Layer Variable）」，有對於抓取邏輯較為詳細的解釋，看完之後，你就會知道該如何對應你網站的資料層架構來修改提供的 Javascript 代碼了。

ㅤ

#2-3 建立「自訂Javascript」變數

GTM 左側面板選擇「變數」 > 下方「使用者定義的變數」區塊右上角「新增」 > 選擇「自訂 Javascript 」變數

ㅤ

將步驟 #2-2 中複製並修改好的代碼，放入自訂 Javascript 欄位中（代碼記得要修改，別直接把我們提供的代碼貼上去，否則是不會有作用的。）

ㅤ

#2-4 測試

在完成設定之後，我們可以先行測試一下設定好的「自訂 Javascript」變數是否在使用者完成購買來到感謝頁面時，呈現如下圖的樣子，確保符合 GA4 官方文件要求的規格，沒問題的話，就可以將其與「購買」事件綁定了。

ㅤ

#2-5 設定「購買」事件

在「購買」事件代碼設定畫面 > 展開「更多設定」> 勾選「傳送電子商務資料」> 下拉選單選擇 Custom Object > 於電子商務物件的下拉選單中選擇剛剛設定的「自訂 Javascript」變數

ㅤ

#2-6 測試資料是否正確發送與接收

接著透過預覽模式走一遍整個購買流程，確保 GTM 正確發送以及 GA4 Debug View 正確收到，最重要的就是觀察 GA4 Debug View 是否在收到「購買」事件時，右邊有多一個「項目」頁籤，且帶有我們剛剛發送的產品項目「值」（如下圖）。

ㅤ

這樣代表我們成功將原不屬於 GA4 規格的資料層格式，轉換成 GA4 可以辨識的格式，如此一來，也不需要在「購買」事件的參數中逐一設定，且能完整傳送訂單中的產品資料，未來如果有要新增的項目，也只要透過「自訂 Javascript」變數進行調整就可以。

ㅤ

總結一下

這兩個方法，都可以幫助我們觀察使用者從何而來並且完成購買事件，唯獨方法 1 因為沒有傳送產品項目的資料給 GA4，所以只要是與產品相關的維度，一率都會是以空白顯示。

方法 2 則是用 Javascript 逐一將非官方的格式全部轉換成 GA4 可以辨識的樣子，因此也會包含產品項目的資料。只是過程會比較複雜一點，還必須要會修改部分的 Javascript 代碼，但是如果可以，我們會建議用方法 2 的「自訂 Javascript」變數來處理這樣的情況，會較為一勞永逸。

其實還有一個方法 3。

也就是請工程師協助，將網站資料層的電子商務資料，改成 GA4 官方文件的格式，關於這部份，可以參考文章「如何準備給工程師的 GA4 電子商務 Data Layer 資料層文件？」

（但我們相信，會看到這篇文章的你 or 妳，應該是無法執行方法 3 的 XD）

不過呢，通常會遇到這類問題的，都是早期較沒電子商務追蹤觀念時，請外包廠商自建的網站，以台灣市面上現成的電商網站來看，大都在這部分做得很完整，使用者不需要煩惱資料層格式以及傳送「電子商務事件」給 GA4 的問題，廠商都已經幫忙處理好了，可以說是相當方便。

ㅤ

延伸閱讀

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

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