Google Tag Manager 教學: GTM 加強電子商務 追蹤

為什麼要使用 GTM加強型電子商務 追蹤

如果你正經營一家網店,只靠購物車的分析報告是遠遠不夠的, GTM加強型電子商務 追蹤功能,可以幫助你做到很多深度分析;你可以將銷售數據和網站使用情形作交叉分析,像是登入頁的訪次、跳出率、轉換率等等,這一類的相關性分析絕對是必要的,這可以讓你了解登陸頁、廣告活動的績效,否則你可能永遠不知道,哪些登陸頁面是你的業績來源?哪些廣告投入才有業績?結合銷售數據和訪客的行為分析,可以有效改善網站、提升訂單轉換率。而 GTM加強型電子商務追蹤  ,是追蹤產品銷售績效最簡單的免費工具之一,而且幾乎所有的購物車系統都有跟GA整合,這也是GTM的優勢之一。本篇Google Tag Manager教學,將帶你一步步安裝設定 GTM加強型電子商務 追蹤 ,簡單搞定交易追蹤!

這邊假設你的GTM基本設定已經完成,假設還沒有申請帳號、設定好GTM的話,請參考CH1。

第一步、啟用Google Analytics電子商務追蹤

首先到GA設定電子商務追蹤,這樣GA才準備好了要接收GTM的資訊。

Google Tag Manager 教學- 啟用 GTM加強型電子商務 功能

啟用電子商務,以及加強型電子商務報表,但本篇重點是在交易追蹤,因此先不針對電子商務報表的設定進行討論。

儲存之後GA就已經準備好接收電子商務相關資料了

第二步、 將電子商務dataLayer碼安裝到追蹤頁面

要正確追蹤電子商務交易資訊,首先要有正確的datalayer資訊。

GA的Enhanced Ecommerce Tracking 有很多種追蹤:

這邊我們以交易完成為例。

交易完成頁在source code中是在dataLayer,dataLayer需要整合到交易完成頁面,這裡面有所有需要傳送到GA的資料。

接下來要把下列追蹤碼安裝到交易完成頁面:

<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({
‘ecommerce’: {
‘purchase’: {
‘actionField’: {
‘id’: ‘T12345’,                         // Transaction ID. Required for purchases and refunds.
‘affiliation’: ‘Online Store’,
‘revenue’: ‘35.43’,                     // Total transaction value (incl. tax and shipping)
‘tax’:’4.90′,
‘shipping’: ‘5.99’,
‘coupon’: ‘SUMMER_SALE’
},
‘products’: [{                            // List of productFieldObjects.
‘name’: ‘Triblend Android T-Shirt’,     // Name or ID is required.
‘id’: ‘12345’,
‘price’: ‘15.25’,
‘brand’: ‘Google’,
‘category’: ‘Apparel’,
‘variant’: ‘Gray’,
‘quantity’: 1,
‘coupon’: ”                            // Optional fields may be omitted or set to empty string.
},
{
‘name’: ‘Donut Friday Scented T-Shirt’,
‘id’: ‘67890’,
‘price’: ‘33.75’,
‘brand’: ‘Google’,
‘category’: ‘Apparel’,
‘variant’: ‘Black’,
‘quantity’: 1
}]
}
}
});
</script>

這段碼是要動態抓取交易完成頁的相關資訊,所以完成設定後,這些欄位的值會被真正的訂單資訊取代。

有兩種方式可以把這個追蹤碼置入交易完成頁,第一種方式是把這段碼給開發人員,手動貼到交易完成頁,這邊看到的資料是虛擬的、需要動態輸入。另一種方式則是用CMS系統管理貼到網站,有一些CMS有外掛程式可以用。(像是Wordpress的Setting/Integration就可以看到,有wooCommerce。

Google Tag Manager 教學- GTM加強型電子商務 dataLayer 寫入

設定好之後,就會自動將訂單資訊寫入datalayer。

裝好了以後,可以測試購買,這時候datalayer 應該已經fire、資料也已經可以取得了,這時候可以到GTM預覽功能,檢視交易完成頁的datalayer

可以看到,剛剛那段碼已經寫入訂單相關的值了

第三步、 設定GTM代碼,接收電子商務資訊

下一步就是要把交易資料傳送到GA了,要怎麼做呢?

接著前往GTM,新增一個代碼:

Google Tag Manager 教學- 設定 gtm加強型電子商務 代碼

代碼選用通用Analytics(分析),

傳送資料到Enhanced Ecommerce Tracking 不需要你用「交易」類型的追蹤,追蹤類型可以選擇「事件」或是「網頁瀏覽」,

但因為交易追蹤需要carrier,且在本範例中,已經追蹤網頁瀏覽了,如果再選擇網頁瀏覽就是重複追蹤頁面瀏覽了。

類別和動作可以自行命名,非互動匹配選擇是,Google Analytics(分析)設定則是選用先前設定好的GA ID。

如果不知道怎麼設定GA ID,可以參考第一篇GA移轉GTM:無縫接軌

接著來到進階設定,勾選「只在已發布的容器中啟動這個代碼」

接著新增一個觸發條件:

先到訂單完成頁面,複製這個Event的Key

然後新增觸發條件,類型選擇「自訂事件」

把Event的Key 貼到事件名稱,將觸發條件命名後,不需要針對這個事件設定篩選條件,因為事件名稱是獨一無二的。

要在Google Analytics的轉換/電子商務報表看到相關數據,需要等待大約2-48個小時。

找到header.php,把這段碼貼在<body>碼的正後方,更新檔案就設定完成了。

Google Tag Manager 教學(一) :無縫接軌移轉GA到GTM
Google Tag manager 教學(二): WordPress追蹤輕鬆上手
Google Tag Manager 教學(三):如何追蹤按鈕點擊
Google Tag Manager 教學(四): GTM 加強電子商務 追蹤

Close Panel