在之前的「DOM 元素」變數文章中，我們深入探討了「DOM 元素」變數的應用，尤其是在面對網站資料層或 Cookie 缺乏可用資訊的情境下。我們詳細介紹了如何利用「DOM 元素」變數來提取網頁中的關鍵信息，例如訂單編號和訂單金額。
（若尚未閱讀過該篇文章，我們建議你先行翻閱，以便對接下來的內容有更深入的理解和順暢的閱讀體驗。）
需要注意的是，「DOM 元素」變數所抓取的數據，是以「字串（string）」的格式儲存，當我們將這些字串放入 GA4 的「purchase」事件的 value 參數時，如果不事先轉換，GA4 電子商務報表或是事件報表中的「purchase」會顯示總收益維度為 0。
這是因為 GA4 中的 value 參數只能接受「數字（number）」格式，若直接用「DOM 元素」變數中的「字串」格式，GA4 將無法識別。
因此，我們下一步是將「DOM 元素」變數中的「字串（String）」值轉換為「數字（number）」。
本篇重點
將「DOM 元素」變數的值轉成「數字（number）」
（接下來的內容將會延續上一篇文章「GTM 變數介紹：DOM 元素」的設定，就不再詳列變數的設定方式）
我們需要編寫一段 JavaScript，將「DOM 元素」變數的「字串」格式轉為「數字」格式，這可以透過 GTM 的「自訂 JavaScript」變數完成。
設定「自訂 JavaScript」變數
GTM 左側面版選擇「變數」> 下方「使用者定義的變數區塊」 > 右上角「新增」 > 選擇變數類型「自訂 JavaScript」
將以下的 JavaScript 代碼複製並貼上。這段代碼的功能是將「DOM 元素」變數「DomV – Order_total_price」中的數據處理成純數字格式。它會移除金錢符號，只保留數字、小數點和負號，然後將處理後的字串轉換成數字。
在代碼中標記為粗體紅字的部分是你的「DOM 元素」變數名稱，請根據實際情況進行替換。
function() {
// 檢查變數是否存在
if (typeof {{DomV - Order_total_price}} !== 'undefined' && {{DomV - Order_total_price}} !== null) {
// 使用正則表達式保留數字、小數點和負號
var cleanedValue = String({{DomV - Order_total_price}}).replace(/[^0-9.-]/g, '');
// 將清理後的值轉換為數字
var numberValue = parseFloat(cleanedValue);
// 檢查是否成功轉換，如果成功，返回數字值；否則，返回 null
return isNaN(numberValue) ? null : numberValue;
} else {
// 如果變數不存在，返回 null
return null;
}
}設定好「自訂 JavaScript」變數後，其介面將顯示如下圖所示。給這個變數命名為「CJS – Remove Dollar Sign and Convert to Number」，以便於識別。
（在命名變數時，沒有特定的規則，主要是確保名稱清晰易懂。）
如果對這段 JavaScript 代碼不太熟悉，沒有關係，直接複製貼上就可以。
重要的是，在將任何從網路上找到的代碼應用到網站之前，建議讓公司技術團隊先進行審核。這樣可以確保代碼不會對網站功能造成不良影響。這一建議同樣適用於我們目前提供的代碼範例。
檢查變數是否正確運作
設定完畢之後，在 GTM 預覽模式下，完成一次購買並進入訂單確認頁面，以確認「自訂 JavaScript」變數「CJS – Remove Dollar sign and convert to number」是否成功將「DOM 元素」變數的「字串」轉換為「數字」格式。
到目前為止我們做了什麼？
讓我們回顧一下到目前為止的步驟。
- 為了獲取訂單完成頁面的訂單價值，我們使用了「DOM 元素」變數來抓取網頁上的數據，並將其用於 GA4 的「purchase」事件的「value」參數。（有關事件參數的詳細規範，請參考官方文件）
- 由於「DOM 元素」變數抓取的數據以「字串」格式儲存，而 GA4 的 value 參數需要「數字」格式，我們因此將一段 JavaScript 代碼放入「自訂 JavaScript」變數中，以將這些數據從字串轉換為數字。
- 在 GTM 的預覽模式下，我們檢查了「自訂 JavaScript」變數是否成功地在訂單完成頁面上將「DOM 元素」變數從字串轉換為數字。
確認無誤後，我們便可將此變數應用於「purchase」事件的「value」參數。
將變數放入「purchase」事件參數中
GTM 左側面板選擇「代碼」 > 右上角「新增」> 代碼類型選擇「Google Analytis(分析)」 > 「Google Analytis(分析) ：GA4 事件」>
在 GA4 事件設定畫面，請按照以下指示填寫欄位（參見下圖）：
在「事件名稱」欄位中輸入「purchase」。請注意，這是 GA4 的一個預設事件，所以大小寫必須完全一致。
在「事件參數」欄位中選擇「value」，並將其值設定為我們剛建立的「自訂 JavaScript」變數「CJS – Remove Dollar Sign and Convert to Number」。
記得，如果你的 purchase 事件包含 value 參數，你也需要設定相對應的 currency 參數，否則 GA4 將無法正確計算收益。
設定完後，使用 GTM 的預覽模式和 GA4 Debug View 來檢查。這樣可以確認代碼是否正常運作並正確傳送參數，同時確保 GA4 也收到了正確的數值。
在 GA4 Debug View 裡，你可以看到 purchase 事件的 value 參數顯示為 55，正如我們所預期的那樣，沒有金錢符號。
當一切都確定沒問題後，別忘了回到 GTM，提交你的設定，這樣才會開始追蹤使用者在網站上的購買事件。
直接用「自訂 JavaScript」變數
在前面的步驟中，我們首先設定了「DOM 元素」變數，然後使用「自訂 JavaScript」變數來將該變數的值轉換成數字，去除了數字、小數點和負號的文字部分，使其變成純數字。
實際上，我們可以直接使用「自訂 JavaScript」變數完成這個操作。
為什麼這樣說呢？讓我們繼續往下看。
設定「自訂 JavaScript」變數
一樣來到「自訂 JavaScript」變數設定頁面，將下列代碼放入。
（紅字的部分請放入自己的 CSS 選擇器）
function(){
// 假設透過 CSS 選擇器選取 <bdi> 這個元素
var element = document.querySelector('li.woocommerce-order-overview__total.total > strong > span > bdi');
// 檢查元素是否存在
if (element !== null) {
// 取得元素內的文字內容
var textContent = element.textContent || element.innerText;
// 使用正則表達式保留數字、小數點和負號
var cleanedValue = textContent.replace(/[^0-9.-]/g, '');
// 將清理後的值轉換為數字
var numberValue = parseFloat(cleanedValue);
// 檢查是否成功轉換，如果成功，返回數字值；否則，返回 null
return isNaN(numberValue) ? null : numberValue;
} else {
// 如果變數不存在，返回 null
return null;
}
}
完成之後的「自訂 JavaScript」變數設定畫面會顯示如下圖：
從上圖的代碼可以看出，從第 2 行到第 8 行所執行的工作實際上就是「DOM 元素」變數的功能，GTM 提供了一個簡化的操作界面，讓我們能夠達到相同的效果。而第 9 行及其後的代碼則負責去除數字、小數點和負號以外的文字，並將結果由「字串」轉換成「數字」。
是不是很有趣？
你可以按照以上步驟完成所有三個變數的設置。接著，使用 GTM 的預覽模式進行確認，兩種設定方式都會得到相同的結果，如下所示：
總結一下
到目前為止，我們已經解釋了如何將「DOM 元素」變數抓取到的值，從「字串（number）」轉換為「數字（number）」。這個是許多人使用「DOM 元素」變數抓取訂單價值時可能遇到的問題，因為未注意到數據類型，導致 GA4 無法正確接收數據。
此外，我們也提到其實可以直接使用「自訂 JavaScript」變數來完成這項轉換，而不需要額外設定「DOM 元素」變數。處理這部分的方法取決於網站架構和管理的便利性。一般來說，對於行銷人員而言，單純設定「DOM 元素」變數通常比撰寫一段 JavaScript 代碼容易多了，因此都會是設定「DOM 元素」變數優先，再搭配「自訂 JavaScript」變數。
未來，若在 GA4 購買事件中發現總收益沒有數值，請檢查傳送的事件參數是「字串」還是「數字」。
同時，請確保在購買事件中正確設置了「value」和「currency」這兩個相關聯的參數。這兩個參數必須一起使用，不可分開。這些都是需要檢查的事項，以確保數據的完整性和正確性。
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）
