GTM教學 - GA4電子商務埋設4 - CSS Selector抓取Affiliation

電子商務事件中的Affiliation屬於選項參數，因此在埋設的過程中，埋設人員可依照公司情況將Affiliation給傳入至GA4。Affiliation用於追蹤聯盟推廣的電子商務事件，如果你的公司是使用自架網站，並且時常會有跟網紅、KOC合作，這參數你就可以考慮連帶傳給GA4。

另外可能會有的疑慮，這樣手動埋設，會不會因為網頁跳轉導致追蹤失效? 因此這一集教學，還有包含寫入至Cookie或是你要寫入至LocalStorage也可以。這樣客人從一進官網，我們就會將從KOL來源做儲存於使用者的瀏覽器中，並且於發生指定轉換事件時，轉換事件連同KOL參數一起回傳至GA4，因此不用擔心資料遺漏。

這樣僅能減少追蹤的遺失機率；使用者情況上百種，還有IOS, AdBlocks,或是其他不為人知的插件做干擾，因此不保證100%完整追蹤，基本上所有系統KOL追蹤一定會有遺漏。

如果你還沒有看前一篇怎麼設定GA4的Value，那你可以參考這篇「GTM電子商務埋設大全1 – CSS Selector抓取Value，GA4電子商務完整代碼埋設」。

本篇會假設讀者已經熟悉GA4的基礎追蹤、GA4的基礎串接都已經施行完畢。如果你這些不熟悉的，那麼本篇文章就會相對較吃力。如果你是想要提升GA4電子商務事件收集的準確度，我會建議你使用伺服器追蹤，透過伺服器追蹤來分派你所有第三方平台的資料收集。

本集事件：GTM電子商務埋設add_to_cart
抓取變數：Affiliation
範例網站：WordPress

前往GA4官方文件

GTM電子商務埋設大全4 - CSS Selector抓取Affiliation，GA4電子商務完整代碼埋設

官方參考文件：GA4評估電子商務埋設

如果你想要針對某一個變數抓取，以下是整理的教學清單。

電子商務事件埋設

設置KOL對應的URL

這次目標是透過KOL所宣傳的URL，公司需要提前在短網址，或是你的原本網址後面帶上「&KOL={{KolName}}」。如果沒有使用UTM，那就直接照範例圖所設定即可。

跳轉消失的情況

如果你直接設定好URL直接做追蹤，會因為頁面切換，導致參數消失。蒐集的有效性很難判斷。因此本篇文章會教你如何寫入至cookie，做進一步的儲存+追蹤。

前台抓取變數

document.location.href.split('/?');

透過網址的「/?」為分界點，篩選出帶有「kol=xxx」的字串，可以直接照範例上面的輸入，但務必確認你的KOL項目在第幾項。

將KOL放置COOKIE

document.cookie = kol;

透過上面的方式，將我們抓取到的KOL名稱，放置在「KOL」的變數中。接著在寫入至cookie裡面。

可以直接參考範例圖埋設。

查看使否Cookie已經寫入

打開Console中的Application，下方的Cookie。查看你設定的key & value是否有對應上。

可能會遇到的情況 (非必要)

如果你篩選出來的項目，還是帶有其他資料，這樣的話要再做進一步的資料清洗。像是我的資料就還帶有gtm的debug….，所以這樣的資料不是我所想要的。因為實務上，除非kol的參數都固定在最後一個。因此我建議再透過Regex篩選一次。

Regex資料清洗 (非必要)

var kol = document.location.href.split('/?')[1]
kol.match(/kol=[a-zA-Z1-9.]+/)[0]

宣告完變數後，利用本身物件的屬性match，將kol去除所有不要的資料。如範例圖，但你的網站參數可能跟我不全然相同，所以還是要依照網站內容而變動。

新增一個自訂JS

function() {
var kol = document.location.href.split(‘/?’)[1];
kol = kol.match(/kol=[a-zA-Z1-9.]+/)[0]
document.cookie = kol;
return kol;
}

於GTM中，將剛剛在前台測試的程式碼，新增至GTM的自訂JS中，要記得前面要宣告一個var變數，並且最後面要有一個Return。

新增一個COOKIE變數

新增一個COOKIE變數，名稱打上你在前台所設定的名稱，不一定是kol，要看你輸入甚麼。

Debug模式檢查

js – kol變數，是我們用JS抓取到網站前台的資料。(可有可無)

kol變數，是透過cookie變數直接幫我們抓取的。(主要)

我們將會透過下一個變數，將kol變數放置自訂tml中。

修改官方文件中的資料

將本篇文章的教學變數，設定至前面三篇教學的html中，這樣就有4個變數囉，如果你有需要參閱「加入購物車金額、抓取產品名稱、產品ID」，那你可以參考前面三篇的教學文章。

總結

此使用範例網站為：WordPress，無任何外掛插件，純以GTM埋設GA4電子商務事件。請注意本網站的網站程式碼，與讀者的應該都不同。因此還是需要依照網站調整必要資料。例如「Console, DOM, REGEX」等。有任何問題，歡迎可以留言、發信給我。

GTM教學｜GA4電商埋設4｜GA4電子商務完整埋設