Làm cách nào để thiết lập Google Analytics 4 với Zonos legacy iframe Checkout?

Thêm đoạn mã gtag.js GA4 tiêu chuẩn vào trang của bạn mà lưu trữ iframe Checkout, sau đó thêm tập lệnh Zonos analyticsRelayOnInit.js. Tập lệnh chuyển tiếp tự động xử lý giao tiếp qua iframe và chuyển tiếp các sự kiện thanh toán đến thuộc tính GA4 của bạn.

Zonos Checkout theo dõi những sự kiện GA4 nào?

Zonos Checkout theo dõi toàn bộ phễu thanh toán bao gồm zonos-checkout-start, zonos-checkout-customer-info, zonos-checkout-shipping-info, zonos-checkout-payment-info, zonos-checkout-payment-fail, zonos-checkout-success, zonos-checkout-close, và sự kiện mua hàng GA4 tiêu chuẩn có chi tiết giao dịch.

Checkout•

Trang chủTài liệu tham khảo API Checkout REST API Google Analytics 4

Google Analytics 4 cho Checkout iframe

Q: Có phải tôi cần sửa đổi cuộc gọi API createTempCart của tôi cho theo dõi GA4 không?

Không. Hệ thống chuyển tiếp hoạt động độc lập với API createTempCart. Bạn chỉ cần thêm thẻ GA4 và tập lệnh chuyển tiếp Zonos vào trang của bạn.

Q: Làm cách nào để gỡ lỗi các sự kiện GA4 từ Zonos Checkout?

Thêm tham số truy vấn zonosDebug=true vào URL trang của bạn và mở bảng điều khiển nhà phát triển của trình duyệt để xem nhật ký chi tiết của quá trình bắt tay chuyển tiếp và các sự kiện được chuyển tiếp. Bạn cũng có thể sử dụng GA4 DebugView trong Google Analytics để xác minh các sự kiện trong thời gian thực.

Theo dõi toàn bộ phễu thanh toán bằng GA4 khi sử dụng tích hợp Checkout dựa trên iframe.

Các nhà bán hàng sử dụng tích hợp Checkout kế thừa (iframe được lưu trữ trên iglobalstores.com) hiện có thể theo dõi các sự kiện phân tích GA4 trên toàn bộ phễu thanh toán. Zonos Checkout tự động chuyển tiếp các sự kiện phân tích từ iframe đến trang cha bằng một tập lệnh chuyển tiếp nhẹ, do đó các sự kiện xuất hiện trong thuộc tính GA4 của bạn như thể chúng xuất phát từ chính trang của bạn.

Các tích hợp gốc không cần hướng dẫn này. Nếu <zonos-checkout> được hiển thị trực tiếp trên trang của bạn (không có iframe), Zonos sẽ gọi window.gtag của trang của bạn thay thế — chỉ cần bật Google Analytics trong bảng điều khiển Zonos dưới Cài đặt thanh toán → Theo dõi và đảm bảo thẻ GA4 cơ bản thông thường của bạn được tải trên trang. Thiết lập chuyển tiếp bên dưới chỉ được yêu cầu khi Checkout được lưu trữ trong một iframe trên một nguồn gốc khác.

Đang tìm cách theo dõi chuyển đổi Meta Ads thay thế? Xem hướng dẫn Facebook Pixel -- nó sử dụng cùng một tập lệnh chuyển tiếp và có thể chạy cùng với GA4.

Cách hoạt động

Vì Zonos Checkout chạy bên trong một iframe trên một nguồn gốc khác, nó không thể trực tiếp truy cập chức năng gtag của trang của bạn. Hệ thống chuyển tiếp giải quyết vấn đề này bằng một quá trình bắt tay hai bước (các bước 1-2) theo sau là chuyển tiếp sự kiện (bước 3):

Thanh toán ping trang cha -- Khi thanh toán được tải bên trong iframe, nó gửi một tin nhắn đến cửa sổ cha cho biết nó sẵn sàng chuyển tiếp sự kiện.
Trang cha xác nhận -- Tập lệnh chuyển tiếp trên trang của bạn nhận được ping, phát hiện cấu hình GA4 hiện có của bạn và báo hiệu lại rằng nó sẵn sàng nhận sự kiện.
Các sự kiện được chuyển tiếp -- Khi những người mua sắm tiến hành thanh toán, mỗi sự kiện phân tích được gửi qua postMessage đến trang của bạn, nơi tập lệnh chuyển tiếp chuyển tiếp nó đến gtag.

Tất cả các tin nhắn được xác thực với các nguồn gốc Zonos đáng tin cậy (zonos.com và iglobalstores.com) chỉ qua HTTPS.

Điều kiện tiên quyết

Một thuộc tính GA4 có ID đo lường (định dạng: G-XXXXXXXXXX). Bạn có thể tạo một trong Google Analytics.
Một tích hợp Checkout kế thừa mà tải Zonos Checkout trong một iframe trên trang của bạn.

Thiết lập

Bước 1: Thêm thẻ GA4 vào trang của bạn

Nếu bạn chưa cài đặt GA4 trên trang của mình, hãy thêm thẻ Google Analytics 4 tiêu chuẩn vào <head> của trang mà lưu trữ iframe Checkout. Thay thế G-XXXXXXXXXX bằng ID đo lường của riêng bạn.

1

3<script

4 async

5 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

6></script>

8<script>

9 window.dataLayer = window.dataLayer || [];

10 function gtag() {

11 dataLayer.push(arguments);

12 }

13 gtag('js', new Date());

14 gtag('config', 'G-XXXXXXXXXX');

15</script>

Lưu ý: Nếu trang của bạn đã cài đặt thẻ GA4 (ví dụ: thông qua Google Tag Manager hoặc một tập lệnh trực tiếp), bạn có thể bỏ qua bước này. Tập lệnh chuyển tiếp sẽ sử dụng chức năng gtag hiện có của bạn.

Bạn có thể tìm thấy tập lệnh này trong thuộc tính GA4 của bạn dưới Admin -> Data Streams -> chọn luồng của bạn -> Xem hướng dẫn thẻ -> Cài đặt thủ công.

Bước 2: Chuyển ID đo lường của bạn đến Zonos Checkout

Cho Zonos Checkout biết ID đo lường GA4 nào cần sử dụng bằng cách đặt window.Zonos.googleAnalyticId bên trong customHTML của Checkout của bạn. Bảng điều khiển Zonos làm cho một trình chỉnh sửa customHTML được tiếp xúc dưới các cài đặt Checkout -- thêm một thẻ <script> như thế này:

1<script>

2 window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX';

3</script>

Giá trị này được gửi đến trang cha trong quá trình bắt tay chuyển tiếp. Nếu trang cha của bạn không có gtag được tải sẵn, tập lệnh chuyển tiếp sẽ cài đặt thẻ GA4 cơ bản cho bạn sử dụng ID này.

Bước 3: Thêm tập lệnh chuyển tiếp phân tích Zonos

Thêm thẻ tập lệnh sau đây vào cùng một trang, sau thẻ GA4. Tập lệnh này lắng nghe các sự kiện phân tích từ iframe Zonos Checkout và chuyển tiếp chúng đến gtag của bạn.

1<script

2 async

3 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"

4></script>

Ví dụ hoàn chỉnh

Đây là cách thiết lập đầy đủ trông như thế nào trong <head> của trang của bạn:

1<head>

2 

4 

6 <script

7 async

8 src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

9 ></script>

11 <script>

12 window.dataLayer = window.dataLayer || [];

13 function gtag() {

14 dataLayer.push(arguments);

15 }

16 gtag('js', new Date());

17 gtag('config', 'G-XXXXXXXXXX');

18 </script>

20 

22 <script

23 async

24 src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js"

25 ></script>

26</head>

Đó là tất cả. Khi cả hai tập lệnh đều nằm trên trang của bạn, tập lệnh chuyển tiếp tự động hoàn thành quá trình bắt tay với iframe thanh toán và chuyển tiếp tất cả các sự kiện phễu thanh toán đến thuộc tính GA4 của bạn.

Tham chiếu sự kiện GA4

Zonos Checkout phát ra các sự kiện sau đây thông qua chuyển tiếp. Tất cả các sự kiện bao gồm một cờ isTestMode và checkoutSessionId.

Event↕	Trigger↕	Additional metadata↕
`zonos-checkout-start`	Thanh toán mở	--
`zonos-checkout-customer-info`	Người mua sắm nhập thông tin khách hàng	--
`zonos-checkout-shipping-info`	Người mua sắm chọn phương thức vận chuyển	`serviceLevelId`
`zonos-checkout-payment-info`	Người mua sắm nhập chi tiết thanh toán	`paymentMethod`
`zonos-checkout-payment-fail`	Nỗ lực thanh toán không thành công	--
`zonos-checkout-success`	Đơn hàng hoàn thành thành công	`transaction_id`, `currency`, `value`, `items`
`zonos-checkout-close`	Người mua sắm đóng thanh toán	--
`purchase`	Đơn hàng hoàn thành (sự kiện thương mại GA4)	`transaction_id`, `currency`, `value`, `items`

Metadata sự kiện mua hàng

Sự kiện purchase theo dõi theo Sơ đồ sự kiện mua hàng thương mại GA4:

Field↕	Description↕
`transaction_id`	ID đơn hàng Zonos hoặc ID phiên thanh toán
`currency`	Mã tiền tệ gồm ba chữ cái (ví dụ: `USD`)
`value`	Giá trị đơn hàng tổng cộng
`items`	Mảng các mục giỏ hàng, mỗi mục có `item_id`, `item_name`, `price`, và `quantity`

Gỡ lỗi

Để bật ghi nhật ký gỡ lỗi cho tập lệnh chuyển tiếp, hãy thêm tham số truy vấn zonosDebug=1 vào URL trang của bạn:

1https://www.yourstore.com/checkout?zonosDebug=1

Mở bảng điều khiển nhà phát triển của trình duyệt để xem nhật ký chi tiết của quá trình bắt tay chuyển tiếp và các sự kiện được chuyển tiếp. Điều này rất hữu ích để xác minh rằng:

Tập lệnh chuyển tiếp nhận được ping từ iframe thanh toán.
GA4 được cấu hình với ID đo lường chính xác.
Các sự kiện được chuyển tiếp đến gtag.

Các câu hỏi phổ biến

Có phải tôi cần sửa đổi cuộc gọi API `createTempCart` của tôi không?

Không. Hệ thống chuyển tiếp hoạt động độc lập với API createTempCart. Bạn chỉ cần thêm thẻ GA4 và tập lệnh chuyển tiếp vào trang của bạn.

Điều gì xảy ra nếu tôi đã sử dụng `footerHTML` cho Google Analytics?

Tham số footerHTML trong API createTempCart cài đặt các tập lệnh bên trong iframe thanh toán, điều này bị giới hạn để theo dõi các sự kiện cấp trang trong nguồn gốc iframe. Phương pháp chuyển tiếp được khuyến nghị vì nó gửi các sự kiện đến thuộc tính GA4 của riêng bạn trên miền của bạn, cho bạn toàn bộ khả năng hiển thị phễu trong một thuộc tính.

Bạn có thể an toàn xóa bất kỳ tập lệnh GA4 nào từ footerHTML sau khi thiết lập chuyển tiếp.

Điều này có hoạt động với chế độ gỡ lỗi GA4 trong Google Analytics không?

Có. Bạn có thể sử dụng zonosDebug=1 để bật các nhật ký tập lệnh chuyển tiếp trong bảng điều khiển nhà phát triển của trình duyệt, và sử dụng GA4 DebugView trong Google Analytics để xác minh các sự kiện trong thời gian thực.

Có phải đơn hàng thử nghiệm được theo dõi không?

Tất cả các sự kiện bao gồm một trường isTestMode. Khi Thanh toán ở chế độ thử nghiệm, các sự kiện vẫn được gửi đến GA4 nhưng được đánh dấu bằng isTestMode: true. Bạn có thể lọc những sự kiện này trong GA4 bằng các kích thước tùy chỉnh nếu cần.

Book a demo