- 08 谷歌分析增強型電子商務跟踪
第08章
典型的電子商務網站都需要跟踪線上購買(即交易),Google Analytics(谷歌分析)為電子商務網站進行交易跟踪提供了兩個主要功能。
- 電子商務跟踪
- 增強型電子商務跟踪
假如你通過 WordPress 建站系統開網店,我強烈建議所有電子商務網站設置Google Analytics電子商務跟踪(或增強型電子商務跟踪)並記錄交易數據。
- 通過電子商務跟踪(或增強型電子商務跟踪),你可以記錄你網站上發生的所有交易信息,包括:訂單ID、交易值、產品ID、產品數量等。
- Google Analytics記錄的交易數據可與其他現有的Google Analytics指標和維度相關聯,以進行更高級的報告和分析。
電子商務跟踪的應用範圍
沒有電子商務跟踪,你的Google Analytics數據和你的交易數據就會是分離的。
- 所有的交易都在你的網站服務器上處理,所有交易的數據都記錄並存儲在你的數據庫中。
- 所有的用戶行為數據都會被發送並存儲在Google的服務器中, Google Analytics報告將只會展示行為數據。
- Google Analytics數據和你的交易數據之間未建立任何連接。
- 分離的數據無法支持任何復雜分析。
當你部署了電子商務跟踪,將能夠在Google Analytics數據和交易數據之間建立連接。
- 所有的交易都在你的網站服務器上被處理,所有交易數據都記錄並存儲在你的數據庫中。
- 所有用戶的行為數據都會發送並存儲在Google的服務器中。
- Google Analytics數據和交易數據通過下單客戶的訂單ID建立連接。
- 行為數據和交易數據都會顯示在你的Google Analytics報告中。
- 整合後的數據支持進一步的複雜分析。
部署電子商務跟踪
下面是在你的移動端網站部署電子商務跟踪的步驟。
- 啟用電子商務跟踪
- 開始電子商務跟踪
- 添加一個交易
- 為這個交易添加項目
- 發送數據
- 移除數據
- 驗證數據
啟用電子商務跟踪
在你的Google Analytics媒體資源下,點擊:
View -> Ecommerce Settings
- 在啟用電子商務下選擇開啟。這將使你的Google Analytics數據視圖使用電子商務跟踪。
通過電子商務跟踪,你可以將用戶的交易信息發送到Google Analytic服務器,並在Google Analytics報告中查看用戶的交易以及與其交易相關的其他信息。
- 除了基礎的Google Analytics跟踪代碼,你還需要使用其他JavaScript代碼(即電子商務跟踪代碼)將交易數據發送到Google Analytics。
- 電子商務跟踪代碼的觸發和數據的發送都只能在一次交易完成後。
- 電子商務跟踪代碼支持強制數據和可選數據的收集。
開始進行電子商務跟踪
要在一個網頁上開始Google Analytics電子商務跟踪,需使用下面的代碼行。通常這行代碼應該緊跟著交易完成代碼段。此行創建一個購物車對象,等待你向其中添加交易和項目數據。
ga('require', 'ecommerce');
上述代碼標誌著電子商務跟踪的開啟,它是電子商務跟踪代碼的第一行,必須放在所有其他電子商務跟踪相關代碼之前,且必須放置在開啟Google Analytics跟踪的代碼行之後。
完整的順序應該是:
ga('create', 'UA-XXXXXXXX-Y', 'auto'); Some Google Analytics codes ga('require', 'ecommerce'); Rest of the Ecommerce Tracking
添加一個交易
交易的數據字段分別為:
id
- 它為你網站上發生的每個交易都生成一個字符串作為標識符。
- 這是一個強製字段。
revenue
- 它作為一個數值表示特定交易的總收入。
- 這是一個強製字段。
affiliation
- 它可以用於特定交易的關聯公司代碼或引薦(形式為字符串)。
- 這是一個可選字段。
tax
- 它作為一個數值表示特定交易的稅收費用。
- 這是一個可選字段。
shipping
- 它作為一個數值表示特定交易的運輸費用。
- 這是一個可選字段。
currency
- 它允許你為你的交易指定一種貨幣。
- 這是一個可選字段。通常,只有當你在Google Analytics數據視圖下選擇的貨幣與此新貨幣不同時,才會使用此字段。
添加交易的商品
每個商品的數據字段:
sku
- 它表示特定產品的唯一標識符。
- 這是一個強製字段。
name
- 它表示特定產品的名稱。
- 這是一個強製字段。
price
- 它作為一個數值表示特定產品的單價。
- 這是一個強製字段。
quantity
- 它表示通過特定交易購買的特定產品的單位數(形式為整數)。
- 這是一個強製字段。
category
- 它表示特定產品所屬的類別。
- 這是一個可選字段。
currency
- 它允許你為你的交易指定一種貨幣。
- 這是一個可選字段。通常,只有當你在Google Analytics數據視圖下選擇的貨幣與此新貨幣不同時,才會使用此字段。
- 所有支持貨幣的貨幣代碼列表:External Link.
發送數據
下一步是使用下面的代碼行將整組交易數據發送到Google Analytics:
ga('ecommerce:send');
驗證數據
一旦你在網站部署了電子商務跟踪所需的所有代碼,下一步就是驗證Google Analytics是否正確記錄了交易數據。
這取決於交易在你的移動網站上的發生頻率,但通常在接下來的一小時或幾個小時內,你的電子商務跟踪數據應顯示在Google Analytics報告中。
電子商務跟踪示例
如下電子商務跟踪示例代碼把兩個產品的交易數據發送給Google Analytics。
ga('require', 'ecommerce'); ga('ecommerce:addTransaction', { 'id': 't0000399168', 'affiliation': 'None', 'revenue': '270.00', 'shipping': '5.00', 'tax': '27.00', 'currency': 'CNY' }); ga('ecommerce:addItem', { 'id': ' t0000399168', 'name': 'Big Chocolate Bar', 'sku': 'gt345', 'category': 'Snack', 'price': '70.00', 'quantity': '1' 'currency': 'CNY' }); ga('ecommerce:addItem', { 'id': ' t0000399168', 'name': 'Wine 1982', 'sku': 'gt017', 'category': 'Alcohol', 'price': '100.00', 'quantity': '2' 'currency': 'CNY' }); ga('ecommerce:send');
使用Google Analytics跟踪和電子商務跟踪的完整跟踪代碼將會成為:
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-Y', 'auto'); ga('send'#039;, 'pageview'); ga('require', 'ecommerce'); ga('ecommerce:addTransaction', { 'id': 't0000399168', 'affiliation': 'None', 'revenue': '270.00', 'shipping': '5.00', 'tax': '27.00', 'currency': 'CNY' }); ga('ecommerce:addItem', { 'id': ' t0000399168', 'name': 'Big Chocolate Bar', 'sku': 'gt345', 'category': 'Snack', 'price': '70.00', 'quantity': '1' 'currency': 'CNY' }); ga('ecommerce:addItem', { 'id': ' t0000399168', 'name': 'Wine 1982', 'sku': 'gt017', 'category': 'Alcohol', 'price': '100.00', 'quantity': '2' 'currency': 'CNY' }); ga('ecommerce:send'); </script>
增強型電子商務跟踪的應用範圍
增強型電子商務跟踪是電子商務跟踪的升級版。
增強型電子商務跟踪的優點包括跟踪非常見信息,即已完成交易之外的其他數據。在電子商務網站的轉化漏斗(用於交易)中,網頁可能按此順序排列:
- 列表頁——用戶瀏覽一個(產品的)指定列表頁
- 產品詳情頁——用戶瀏覽一個指定產品的詳情頁
- 購物車——用戶向購物車中添加一個產品
- 結算頁——用戶到達結算頁面
- 購買完成——用戶完成整個交易
通過增強型電子商務跟踪,你可以跟踪有關列表頁,產品詳情頁,購物車,結算頁等的數據。
啟用電子商務跟踪
要啟用增強型電子商務跟踪,Google Analytics必須啟用電子商務跟踪。
在你的Google Analytics媒體資源下,點擊:
View -> Ecommerce Settings
在啟用電子商務下選擇開啟。這將使你的Google Analytics數據視圖使用電子商務跟踪。
現在點擊(仍舊在同一屏下):
View -> Enhanced Ecommerce Settings
在“啟用增強型電子商務報告”下選擇開啟,然後點擊“提交”。這將使你的Google Analytics數據視圖使用增強型電子商務跟踪。
初始化電子商務跟踪
如果你已在網站上部署了電子商務跟踪,則可以將電子商務跟踪部署轉化為增強型電子商務跟踪。首先在你的跟踪代碼中,替換:
ga('require', 'ecommerce');
為:
ga('require', 'ec');
為交易部署增強型電子商務跟踪
如下增強型電子商務跟踪示例代碼會把兩個產品的交易數據發送給Google Analytics。
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-Y', 'auto'); ga('require', 'ec'); ga('set', '&cu', 'CNY'); //Specify currency ga('ec:addProduct',{ //Add a product 'id': 'gt345', // Product SKU 'name': 'Big Chocolate Bar', 'category': 'Snack', 'brand': 'Whitelabel', 'variant': 'none', 'price': '70.00', 'quantity': '1', }); ga('ec:addProduct',{ //Add a product 'id': 'gt017', // Product SKU 'name': 'Wine 1982', 'category': 'Alcohol', 'brand': 'French Red Wine', 'variant': 'red wine', 'price': '100.00', 'quantity': '2', }); ga('ec:setAction', 'purchase',{ //Add the transaction 'id': 't0000399168', // Transaction id 'affiliation': 'none', 'revenue': '270.00', 'tax': '27.00', 'shipping': '5.00'#039;, 'coupon': 'none', }); ga('send', 'pageview'); </script>
交易的貨幣由如下代碼指定:
ga('set', '&cu', 'CNY');
將項目添加到交易的方法:
ga('ec:addProduct',{ // Some Codes });
添加交易的方法:
ga('ec:setAction', 'purchase',{ // Some Codes });
請注意,此行代碼是特意放置在整個跟踪代碼的末尾的。這可確保在將數據發送到Google Analytics之前此交易的所有信息都已經被電子商務跟踪代碼記錄到特定字段。
ga('send', 'pageview');
產品詳情頁的增強型電子商務跟踪部署
要跟踪用戶視圖下特定的產品詳情頁,請將以下代碼添加到所有產品詳情頁:
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-Y', 'auto'); ga('require', 'ec'); ga('set', '&cu', &##039;CNY'); //Specify currency ga('ec:addProduct',{ 'id': 'gt345', // Product SKU 'name': 'Big Chocolate Bar', 'category': 'Snack', 'brand': 'Whitelabel', 'variant': 'none', 'price': '70.00', 'quantity': '1', }); ga('ec:setAction', 'detail'); //Set the action to "details page" ga('send', 'pageview'); </script>
購物車的增強型電子商務跟踪部署
電子商務網站的購物車頁面下,用戶可以進行如下行為:
- 當用戶想購買該特定商品時,添加商品(到購物車)。
- 當用戶不再想要購買該特定商品時,移除商品(從購物車中)。
將商品添加到購物車
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-Y', 'auto'); ga('require', 'ec'); ga('set', '&cu', 'CNY'); //Specify currency function addToCart(product) { ga('ec:addProduct',{ 'id': 'gt345', // Product SKU 'name': 'Big Chocolate Bar', 'category': 'Snack', 'brand': 'Whitelabel', 'variant': 'none', 'price': '70.00', 'quantity': '1', }); ga('ec:setAction', 'add'); // Set action to "add to cart" ga('send', 'event', 'enhanced ecommerce', 'button click', 'add to Cart'); // Send "add to cart" with an event. } ga('send', 'pageview'); </script>
將商品從購物車中移除
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-Y', 'auto'); ga('require', 'ec'); ga('set', '&cu', 'CNY'); //Specify currency function removeFromCart(product) { ga('ec:addProduct',{ 'id': 'gt345', // Product SKU 'name': 'Big Chocolate Bar', 'category': 'Snack', 'brand': 'Whitelabel', 'variant': 'none', 'price': '70.00', 'quantity': '1', }); ga('ec:setAction', 'remove'); // Set action to "remove from cart" ga('send', 'event', 'enhanced ecommerce', 'button click', 'remove from Cart'); // Send "remove from cart&ququot; with an event. } ga('send', 'pageview'); </script>
結算頁的增強型電子商務跟踪部署
在你的電子商務網站的結算頁,你需要用戶提交表單及其個人信息。一旦信息提交給你,交易就被視為“完成”。結算過程可能因不同的電子商務網站而異。
- 你的結算過程可能只在一個頁面上有表單。
- 你的結算過程可能有跨越多個頁面的表單。
在本示例中,它演示了在結算過程中對第一頁的增強型電子商務跟踪的實施。
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-Y', 'auto'); ga('require', 'ec'); ga('set', '&cu', 'CNY'); //Specify currency function checkout(cart) { for(var i = 0; i < cart.length; i++) { var product = cart[i]; ga('ec:addProduct',{ 'id': 'gt345', // Product SKU 'name': 'Big Chocolate Bar', 'category': 'Snack', 'brand': 'Whitelabel', 'variant': 'none', 'price': '70.00', 'quantity': '1', }); } ga('ec:setAction','checkout', {'step': 1}); // Set the action to "Checkout" and set value to 1 for the Checkout process's first page. } ga('send', 'pageview'); </script>
向結算按鈕添加鼠標點擊函數。
<button onclick="checkout(cart);">Checkout</button>
數據分析技術白皮書在2016年11月正式出版。
英文版:Google Analytics Enhanced Ecommerce Tracking – 簡體中文版:谷歌分析增強型電子商務跟踪
Analytics Book繁體中文版上的內容按下列許可協議發布: CC Attribution-Noncommercial 4.0 International