Enhanced Ecommerce (P1) – Hiểu Về Các Ecommerce Activity & Thực Hành Với Purchases Activities

Nếu như các bạn đã đọc qua bài viết 4 điều bạn cần biết về Ecommerce Tracking của mình, hẳn các bạn sẽ biết rằng Enhanced Ecommerce là một tính năng cực hay của Google Analytics. Tuy nhiên, để triển khai Enhanced Ecommerce Tracking lại không hề đơn giản, nhất là đối với các bạn không chuyên về lập trình.

Mình xin trích dẫn lại hình ảnh quy trình triển khai Enhanced Ecommerce từ blog của Simo Ahava:

Quy trình triển khai Enhanced Ecommerce Tracking

Thông thường, khi website của chúng ta đã đi vào hoạt động, thì nghĩa là Bước 1: “eCommerce platform or CMS renders the page template” đã tự động được các developer lo liệu, thế nên chúng ta không cần quan tâm tới bước này, chúng ta sẽ quan tâm tới các bước 2,3,4 mà thôi.

Và trong bài viết này, mình sẽ hướng dẫn các bạn thực hiện Bước 2: hiển thị dataLayer lên website theo format của Google Analytics.

I. Các loại ecommerce activity trong Enhanced Ecommerce

Trước tiên, việc hiểu về các loại ecommerce activity (hay ecommerce event) trong Enhanced Ecommerce là cực kỳ quan trọng. Nó không những giúp bạn làm việc với developer dễ dàng hơn, mà còn giúp cho quá trình cài đặt, cũng như testing diễn ra thuận lợi hơn.

Bạn sẽ hiểu rõ mình đang tracking những activity nào của khách hàng, và dataLayer (thứ quan trọng nhất để kết nối với Google Tag Manager cũng như Google Analytics) cần có những thông tin gì để track được activity đó…

Google Analytics Enhanced Ecommerce cho phép bạn tracking các activity liên quan đến product impression, promotion data, và sales data. Các bạn hãy xem danh sách chi tiết, và mình sẽ giải thích ngay dưới đây:

• Product Impressions: số lần sản phẩm được xuất hiện mà không phải trong detailed product page. (Thường sẽ là category page, search result, home page, related product… hầu như tất cả các page, trừ sản phẩm chính trong detailed product page).
  => Hữu ích để đo lường %Purchases/Impressions.
• Product Clicks: số lần người dùng click vào link của sản phẩm để vào xem detailed product page.
  => Hữu ích để đo lường %Product Clicks/Impressions.
• Product Detail Impressions: còn gọi là Product Detail View, là số lần người dùng xem detailed product page của một sản phẩm nào đó.
  => Hữu ích để đo lường %Add to Cart/Details, %Purchases/Details.
• Add / Remove from Cart: cái tên nói lên tất cả, khi người dùng click add to cart hoặc remove from cart thì chúng ta cũng có thể track được đó là sản phẩm gì, số lượng add/remove là bao nhiêu.
  => Hữu ích để đo lường %Purchase/Add to Cart, sản phẩm nào bị Remove from cart nhiều và tìm ra nguyên nhân.
• Promotion Impressions: cũng giống như Product Impressions, nhưng là dành cho các thể loại quảng cáo nội bộ (internal promotion) để kích thích người mua, đa số là banner (tiki, lazada, adayroi,… luôn có rất nhiều promotion banner, việc tracking những banner này là cần thiết để đo lường hiệu quả)
• Promotion Clicks: cũng giống như Product Clicks, nhưng áp dụng với quảng cáo nội bộ
  => Hữu ích để đo lường %Clicks/Impression của banner và thực hiện tối ưu, A/B Testing,…
• Checkout: khi người dùng thực hiện checkout (vào trang Cart, vào trang Thanh Toán, Thông Tin Giao Hàng, Thông Tin Thanh Toán,…) thì chúng ta đều có thể tracking được họ trải qua bước checkout nào, và drop ở bước nào. Từ đó tối ưu bước bị drop nhiều nhất, thực hiện A/B Testing,…
• Purchases: chắc chắn rồi, đây là data quan trọng nhất, khi người dùng hoàn thành các bước checkout và xác nhận thanh toán. Bạn sẽ biết được ID đơn hàng, tổng giá tiền đơn hàng, các sản phẩm có trong đơn hàng,…
• Refunds: khi người dùng muốn refund, chúng ta cũng có thể track được để loại trừ cả đơn hàng, hoặc vài sản phẩm trong đơn hàng đó (thông qua transaction ID, product ID của đơn hàng refund). Từ đó biết được sản phẩm nào bị refund nhiều nhất.

Rõ ràng Enhanced Ecommerce cung cấp cho chúng ta bộ “đồ nghề” cực kỳ phong phú để “bủa vây” người dùng. Tuy nhiên, cấu trúc mỗi website eCommerce mỗi khác, liệu chúng ta có cần phải triển khai hết tất cả các tính năng này cho website của mình hay không?

Đây chính là lúc bạn cần phải ngồi xuống, đối chiếu các activity này lên website của mình thật kỹ, và lựa chọn xem mình sẽ triển khai tính năng nào, hay là triển khai toàn bộ. Phần này các bạn cần phải tự làm, vì mỗi website có tính năng khác nhau. Tuy nhiên nếu có thắc mắc, các bạn cứ thoải mái comment phía dưới, mình sẽ giải đáp trong phạm vi có thể.

II. Hiển thị dataLayer lên website theo format của Google Analytics (viết document)

Nếu bạn là người vừa làm marketing nhưng lại biết về lập trình và có thể triển khai theo document của google thì chúc mừng bạn, bạn thật tuyệt vời! (giống như mình  ). Và cho dù nếu bạn có không được phép trực tiếp triển khai phần này, thì chắc chắn bạn cũng sẽ làm việc cực kỳ dễ dàng với developer (vì 2 người nói cùng ngôn ngữ mà  ). Thế nên bạn có thể sẽ không cần đọc bài viết này làm gì nữa.

Còn đối với các bạn không biết gì về lập trình (cho nên mới phải vào đọc bài này), thì các bạn chắc chắn phải cần tới developer mới có thể hoàn thành bước này được. Nhiệm vụ của bạn là phải hiểu document của Google, viết lại implementation document và nhờ bạn developer triển khai giúp.

Các yếu tố cần có trong implementation document

Bạn đã có được danh sách activity cần track rồi đúng không? Chúng ta sẽ đi vào viết document cho Purchases Activities (vì activity này là quan trọng nhất và cũng dễ triển khai nhất) và đưa ra 1 master document. Các activity khác các bạn muốn track thì có thể áp dụng master document này (có chỉnh sửa) để triển khai (làm 1 lần rồi sẽ quen thôi các bạn ơi, cố lên :D).

Các bạn hãy mở Enhanced Ecommerce Document cho Google Tag Manager và đọc qua 1 vài lần về activity: Purchases.

Vì document của Google rất chung chung, và chưa được customize để cho phù hợp với website của bạn. Mà developer họ không rảnh để ngồi mò giúp bạn. Nên công việc của bạn đó là viết lại implementation document sao cho dễ hiểu và đúng với những gì mình mong muốn.

Các yếu tố cần có của 1 implementation document là:

1. DataLayer script: dây chính là đoạn script mẫu mà Google cung cấp cho chúng ta trong document. Mình sẽ post lại đoạn script đó ngay dưới đây:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<script> // Send transaction data with a pageview if available // when the page loads. Otherwise, use an event when the transaction // data becomes available. dataLayer = window.dataLayer || []; dataLayer.push({   'ecommerce': {     'purchase': {       'actionField': {         'id': 'T12345',                         // ID đơn hàng (bắt buộc), dùng để phân biệt đơn hàng         'affiliation': 'Online Store',          // Affiliation (nếu có), nếu website có áp dụng affiliate         'revenue': '35.43',                     // Tổng giá trị đơn hàng (nên có), (đã bao gồm thuế, shipping và các chi phí khác)         'tax':'4.90',                           // Thuế (nếu có, lưu ý tiền Việt Nam không cần decimal point "," hoặc ".")         'shipping': '5.99',                     // Phí ship (nếu có)         'coupon': 'SUMMER_SALE'                 // Mã coupon đã áp dụng (nếu có)       },       'products': [                             // Các thông tin về sản phẩm trong đơn hàng         {         'name': 'Triblend Android T-Shirt',     // Tên hoặc ID sản phẩm (bắt buộc)         'id': '12345',                          // Tên hoặc ID sản phẩm (bắt buộc)         'price': '15.25',                       // Giá sản phẩm (nên có)         'brand': 'Google',                      // Thương hiệu của sản phẩm (nếu có)         'category': 'Apparel',                  // Sản phẩm thuộc vào mục nào (nếu có)         'variant': 'Gray',                      // Biến thể của sản phẩm (màu sắc, size, cân nặng,...) (nếu có)         'quantity': 1,                          // Số lượng, lưu ý quantity thì giá trị không để trong dấu ""         'coupon': ''                            // Coupon đã áp dụng riêng cho sản phẩm này (nếu có).         },         {                                       // nếu có nhiều sp, chúng ta lặp lại bước trên         'name': 'Donut Friday Scented T-Shirt',         'id': '67890',         'price': '33.75',         'brand': 'Google',         'category': 'Apparel',         'variant': 'Black',         'quantity': 1         }       ]     }   } }); </script>

Các bạn có thể thấy các dòng chữ màu cam bên tay phải, đó là các dòng chú thích (comment) mình mới thêm vào. Các bạn hãy đọc kỹ các comment này hiểu rõ hơn về các data cần thu thập và ý nghĩa của chúng.

Các line mình comment Bắt buộc thì các bạn phải giữ nguyên. Còn các line mình comment Nên có hoặc Nếu có thì các bạn có thể bỏ đi nếu không cần thiết (ví dụ như tax, shipping, variant…), miễn sao bạn thu thập được đầy đủ data mình cần.

Theo mình thì các data quan trọng cần có cho mọi website eCommerce đó là:

• Id đơn hàng
• Tổng giá trị đơn hàng
• Tên các sản phẩm
• Giá các sản phẩm
• Số lượng các sản phẩm.
• Các thông tin khác nếu website có tính năng đó (như affiliate, coupon, variant,…) thì mình cũng sẽ triển khai đầy đủ, càng đầy dủ càng tốt.

Bên trái mỗi comment các bạn sẽ thấy có 1 cặp ‘key’:’value’, tương đương với ‘thông tin cần tracking’:’giá trị tương ứng’.

Ví dụ: ‘id’: ‘T12345’ nghĩa là chúng ta cần biết Id đơn hàng là bao nhiêu, trong trường hợp này giá trị nhận được là T12345.

Một điều nữa đó là trong dataLayer script, các thông tin về đơn hàng và sản phẩm sẽ là các biến (variables). Có nghĩa là tùy vào khách hàng mua sản phẩm nào, tổng giá trị bao nhiêu mà mỗi dataLayer sẽ khác nhau. Tuy nhiên các bạn có thể dễ nhận thấy dataLayer script trên đang chứa các giá trị mẫu đã được Google điền sẵn, nên chúng ta cần chỉnh sửa lại, để developer biết rằng data nào là biến, để bạn ấy có thể viết code, tìm các biến phù hợp để điền vào.

Mình sẽ sửa lại dataLayer script trên thành một phiên bản hoàn chỉnh hơn:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<script> // Send transaction data with a pageview if available // when the page loads. Otherwise, use an event when the transaction // data becomes available. dataLayer = window.dataLayer || []; dataLayer.push({   'event': 'purchase',   'ecommerce': {     'purchase': {       'actionField': {         'id': "{{order ID}}",                         // ID đơn hàng (bắt buộc), dùng để phân biệt đơn hàng         'affiliation': "{{affiliation name}}",        // Affiliation (nếu có), nếu website có áp dụng affiliate         'revenue': "{{order total}}",                 // Tổng giá trị đơn hàng (nên có), (đã bao gồm thuế, shipping và các chi phí khác)         'tax': "{{order tax fee}}",                   // Thuế (nếu có, lưu ý tiền Việt Nam không cần decimal point "," hoặc ".")         'shipping': "{{order shipping fee}}",         // Phí ship (nếu có)         'coupon': "{{coupon applied}}"                // Mã coupon đã áp dụng (nếu có)       },       'products': [                                   // Các thông tin về sản phẩm trong đơn hàng         {         'name': "{{product name}}",                   // Tên hoặc ID sản phẩm (bắt buộc)         'id': "{{product id}}",                       // Tên hoặc ID sản phẩm (bắt buộc)         'price': "{{product price}}",                 // Giá sản phẩm (nên có)         'brand': "{{product brand/manufacturer}}",    // Thương hiệu của sản phẩm         'category': "{{product category}}",           // Sản phẩm thuộc vào mục nào           'variant': "{{product variant}}",             // Biến thể của sản phẩm (màu sắc, size, cân nặng,...)         'quantity': {{product quantity}},             // Số lượng, lưu ý quantity thì giá trị không để trong dấu ""         'coupon': "{{product coupon applied}}"        // Coupon đã áp dụng riêng cho sản phẩm này (nếu có).         },         { // ... loop for all products in this order (nếu có nhiều sp, chúng ta lặp lại bước trên)         }       ]     }   } }); </script>

Các giá trị đã được mình để trong ngoặc nhọn {{ }} và miêu tả dễ hiểu. Khi đặt giá trị trong ngoặc nhọn {{ }} như vậy, developer sẽ hiểu giá trị này sẽ là biến và sẽ tìm cách để đặt biến phù hợp vào.

Phiên bản dataLayer script trên có thể áp dụng với mọi website. Các bạn có thể sử dụng luôn dataLayer script này để gửi cho developer của mình mà không phải lăn tăn vấn đề gì cả. (Nên nhớ đây mới chỉ là dataLayer script cho Purchases Activities thôi nhé các bạn ơi).

2. Điều kiện để hiển thị dataLayer

Các dataLayer script này không phải muốn đặt ở đâu thì đặt, mà tùy vào chúng ta muốn track activity nào mà chúng ta sẽ đặt ra điều kiện để hiển thị chúng.

Đối với Purchases Activities thì điều kiện để hiển thị dataLayer script rất đơn giản, đó là:

• Load dataLayer script này khi Thank You page được load (tức là sau khi khách hàng order và thanh toán thành công).
  Đối với các website sử dụng Ajax để thông báo đơn hàng thành công, thì điều kiện này sẽ sửa lại thành load dataLayer script khi thông tin đơn hàng đã được load lên. (Bạn có thể hỏi developer xem website có sử dụng ajax để thông báo đơn hàng thành công hay không)
• Nằm càng gần document head thì càng tốt (để đoạn code này được load sớm nhất có thể).

Đối với các activity khác, như Detailed View, Checkout, Add/Remove from cart thì điều kiện hiển thị sẽ khác, trong bài này mình tránh liệt kê ra đễ đỡ lan man (vì đang chỉ triển khai cho Purchases Activities thôi). Nếu các bạn cần biết thêm về các activity khác

Tổng hợp lại, framework mẫu để viết document cho developer đối với từng loại ecommerce activity đó là:

1. DataLayer script – dựa theo document của Google
2. Điều kiện để hiển thị dataLayer này lên website

Bây giờ bạn đã có thể gửi implementation document cho developer và nhờ bạn ấy triển khai được rồi.  Đối với Purchases Activities thì quá trình triển khai khá nhanh, có khi trong vài tiếng là đã xong. Còn đối với developer nào quá bận thì chậm nhất thì khoảng 2-3 ngày cũng xong rồi.

III. Kiểm tra dataLayer script

Sau khi developer đã triển khai xong thì phần việc cuối cùng của bạn đó là kiểm tra xem trên website đã hiển thị đúng dữ liệu mình yêu cầu chưa. Nếu bạn triển khai đúng thì trên website sẽ hiển thị như sau:

Bạn sẽ thấy trang đặt hàng thành công hiển thị như bình thường

Còn trong source code, dataLayer sẽ hiện ra như thế này và nằm trong thẻ <script></script>.

Các bước để test:

• Clear Cache trước khi test, để chắc chắn rằng trình duyệt sẽ cập nhật code mới nhất của website
• Đặt hàng để đi đến Thank You page
• Nhấn ctrl+u để view source, sau đó ctrl+f để search từ khóa dataLayer để tìm đoạn code với format như hình trên
• Nếu không tìm thấy đoạn code giống như trên thì có nghĩa là khâu triển khai đang có vấn đề, hoặc bạn chưa clear cache đúng cách
• Nếu tìm thấy nhưng một số giá trị bị lỗi, không đúng như yêu cầu, thì có nghĩa là khâu triển khai có vấn đề

Đối với bất kỳ lỗi nào, bạn hãy liên hệ và làm việc trực tiếp với developer để nhờ họ tìm và fix lỗi. Hãy chắc chắn rằng dataLayer script hiển thị đúng và đầy đủ thông tin bạn cần trước khi chúng ta có thể đi qua các bước khác.

Sau khi tất cả mọi thứ đã được đảm bảo là hoạt động bình thường, chúng ta sẽ dùng Google Tag Manager để get các data này về và gửi tới Google Analytics. Các bước này mình sẽ hướng dẫn các bạn ở những bài tiếp theo.

Nếu có bất kỳ thắc mắc gì về bước này, các bạn hãy comment phía dưới để thảo luận nhé! Chúc các bạn thành công!

Nguồn: Nguyễn Hữu Hoàng

Share on Facebook Share on Twitter Share on Google Plus

"Sách là kho tàng đã và đang cho ta trí tuệ và biến ta thành người có tri thức, học rộng, tài cao"