谷歌分析增強型電子商務跟踪


第08章

Cart

典型的電子商務網站都需要跟踪線上購買(即交易),Google Analytics(谷歌分析)為電子商務網站進行交易跟踪提供了兩個主要功能。

  • 電子商務跟踪
  • 增強型電子商務跟踪

我強烈建議所有電子商務網站設置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

Gordon Choi's Analytics Book