Tích hợp thẻ Google vào CMS hoặc trình tạo trang web

Thẻ Google là một đoạn mã có thể thêm vào trang web để đo lường hoạt động của người dùng trên nhiều sản phẩm của Google, bao gồm Google Analytics 4, Google Ads và Google Marketing Platform. Tìm hiểu thêm về thẻ Google

Hướng dẫn này mô tả cách tích hợp thẻ Google vào Hệ thống quản lý nội dung (CMS) hoặc trình tạo trang web để cấp cho người dùng cuối quyền truy cập vào các sản phẩm đo lường của Google.

Đối tượng

Hướng dẫn này dành cho chủ sở hữu Hệ thống quản lý nội dung (CMS) hoặc trình tạo trang web muốn cung cấp cho người dùng khả năng tích hợp với các sản phẩm đo lường của Google. Hướng dẫn này không dành cho người dùng hệ thống quản lý nội dung (CMS) hoặc trình tạo trang web.

Trước khi bắt đầu

Đảm bảo bạn có Mã nhà phát triển thẻ Google. Nếu bạn chưa có mã nhận dạng nhà phát triển thẻ Google, hãy điền vào biểu mẫu yêu cầu cấp mã nhận dạng nhà phát triển thẻ Google. Mã nhà phát triển khác với các mã khác, chẳng hạn như Mã đo lường hoặc Mã chuyển đổi mà người dùng cuối thêm vào mã đo lường trang web của họ.

Tổng quan

Để tích hợp nền tảng của bạn với các sản phẩm của Google, hãy làm theo các bước sau:

  1. Tạo chế độ tích hợp với thẻ Google
  2. Cập nhật cấu trúc dữ liệu đầu vào của người dùng
  3. Triển khai Consent API
  4. Thiết lập dữ liệu sự kiện
  5. Xác minh chế độ tích hợp mới
  6. Cập nhật hướng dẫn triển khai người dùng

Tạo chế độ tích hợp với thẻ Google

Bằng cách tạo chế độ tích hợp với thẻ Google, khách hàng của bạn có thể triển khai các sản phẩm đo lường của Google (thông qua gtag.js) trên mọi trang của trang web. Hãy nhớ xoá mọi chế độ tích hợp thẻ cũ hiện có (ví dụ: analytics.js) trước khi tạo chế độ tích hợp với gtag.js.

Để tạo chế độ tích hợp với thẻ Google, hãy thay thế đoạn mã hiện có bằng đoạn mã sau. Đảm bảo người dùng có thể thay thế TAG_ID bằng mã thẻ của riêng họ.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

  gtag('config', 'GOOGLE_TAG_ID');
</script>

Xin lưu ý những điều sau:

  • Nhà quảng cáo có thể chọn không sử dụng các tính năng cá nhân hoá quảng cáo như tái tiếp thị bằng thông số allow_ad_personalization_signals (xem bài viết Tắt tính năng thu thập dữ liệu quảng cáo được cá nhân hoá.
  • Lý tưởng nhất là mỗi trang chỉ nên xuất hiện một đoạn mã thẻ Google. Đoạn mã có thể chứa nhiều mã thẻ. Nếu đã có một bản sao của gtag.js, bạn nên thêm mã thẻ mới vào thẻ hiện có. Tìm hiểu thêm

Cập nhật cấu trúc dữ liệu đầu vào của người dùng

Khách hàng của bạn phải có thể cung cấp nhiều hình thức mã thẻ Google thông qua một giao diện, bất kể sản phẩm đo lường của Google mà họ đang triển khai.

Ví dụ: nội dung sau đây cho thấy một dữ liệu đầu vào đơn giản về thẻ Google. Quá trình tích hợp phải được định dạng là một quá trình triển khai cho thẻ Google. Bạn có thể gọi đây là một phương thức triển khai Google Ads và Google Analytics.

Hình ảnh hộp nhập mã thẻ Google

Ngoài ra, sơ đồ sau đây cho thấy cách một nền tảng có thể có các luồng người dùng riêng biệt cho Analytics và Google Ads, nhưng mỗi luồng sẽ dẫn đến một giao diện để người dùng cung cấp mã thẻ Google của họ.

Hình ảnh về Analytics và Google Ads dẫn đến một luồng đầu vào

Giá trị nhập mã thẻ phải chấp nhận nhiều biến thể mã bằng cách sử dụng mẫu biểu thức chính quy [A-Z]{1,3}\w{5,}[\w]*

Thẻ Google có một API Chế độ đồng ý tích hợp để quản lý sự đồng ý của người dùng. Cookie này có thể phân biệt sự đồng ý của người dùng đối với cookie cho mục đích quảng cáo với sự đồng ý cho mục đích phân tích.

Kết quả dự kiến là khách hàng sẽ nhận được ít nhất lệnh gọi gtag('consent', 'update' {...}) được tích hợp mà khách hàng không cần làm gì cả. Điều này sẽ đảm bảo rằng các thẻ Google (Google Ads, Floodlight, Google Analytics, Trình liên kết chuyển đổi) có thể đọc trạng thái đồng ý mới nhất của người dùng và đưa trạng thái đó vào các yêu cầu mạng gửi đến Google (thông qua thông số &gcs).

Các bước triển khai bổ sung sẽ là triển khai hoặc hỗ trợ nhà quảng cáo triển khai (ví dụ: thông qua giao diện người dùng) trạng thái gtag('consent', default' {...}) và bỏ chặn thẻ Google (tức là không kích hoạt có điều kiện dựa trên sự đồng ý) để cho phép chế độ đồng ý kích hoạt các thẻ đó theo cách nhận biết sự đồng ý.

Để biết thông tin chi tiết về cách triển khai, hãy xem phần Quản lý chế độ cài đặt về sự đồng ý (web).

Thiết lập dữ liệu sự kiện

Bạn nên gửi dữ liệu sự kiện đa dạng thức từ trang web của khách hàng đến Tài khoản Google của họ mà khách hàng không cần làm gì cả. Ví dụ: bạn có thể thêm các sự kiện dọc theo phễu mua hàng (tức là add_to_cart, begin_checkout, add_payment_info, add_shipping_infopurchase), tạo khách hàng tiềm năng và đăng ký.

Dưới đây là các phương pháp hay nhất để thêm sự kiện:

  • Ghi nhật ký mọi nội dung có thể
  • Thiết lập ít nhất 8 sự kiện chính
  • Ưu tiên sự kiện thương mại điện tử

Ghi nhật ký mọi nội dung có thể

Bạn nên thiết lập sự kiện theo mặc định nếu có thể. Nội dung như vậy bao gồm:

  • Các sự kiện chính, chẳng hạn như purchase hoặc sign_up
  • Sự kiện trước sự kiện chính như add_to_cart
  • Tương tác hành vi, chẳng hạn như tương tác với phương tiện truyền thông giúp khách hàng hiểu được cách họ tương tác với người dùng cuối

Bạn chỉ nên thêm đoạn mã sự kiện chính vào các trang sự kiện chính (ví dụ: trang xác nhận mua hàng, trang xác nhận gửi biểu mẫu). Xin lưu ý rằng bạn vẫn phải thêm thẻ Google trên mọi trang của trang web.

Sự kiện được gửi bằng lệnh event. Mã này bao gồm cùng một Mã nhà phát triển thẻ Google mà bạn đã thêm vào thẻ trang web chung được mô tả ở trên:

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

Ví dụ: bạn có thể sử dụng lệnh event để gửi một sự kiện login có giá trị method là "Google":

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});
<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

Xin lưu ý những điều sau:

  • Mã nhà phát triển <developer ID> là mã duy nhất và dành riêng cho nền tảng của bạn. Đính kèm mã nhận dạng vào mọi sự kiện.
  • Các tham số sau đây là không bắt buộc và có thể bị bỏ qua:
    • 'value' là giá trị dạng số của sự kiện chính (ví dụ: giá của một giao dịch mua)
    • 'currency' là mã đơn vị tiền tệ gồm ba chữ cái, hữu ích cho những nhà quảng cáo chấp nhận nhiều đơn vị tiền tệ
    • 'transaction_id' là một mã nhận dạng duy nhất cho giao dịch (ví dụ: mã đơn hàng); được dùng để loại bỏ trùng lặp.
  • Mặc dù một số thông số là không bắt buộc, nhưng bạn nên đưa vào nhiều thông tin nhất có thể cho mỗi sự kiện.
    • Các tham số cung cấp thêm thông tin về cách người dùng tương tác với trang web hoặc ứng dụng của bạn. Ví dụ: khi có người xem sản phẩm mà bạn bán, bạn có thể thêm các tham số mô tả sản phẩm mà họ đã xem, chẳng hạn như tên, danh mục và giá.
    • Một số thông số tự động điền các phương diện và chỉ số được tạo sẵn trong Google Analytics, giúp người dùng hiểu rõ hơn về khách hàng của họ.

Nếu muốn đo lường một sự kiện chính dựa trên một lượt nhấp (ví dụ: một lượt nhấp vào nút hoặc phản hồi động cho một trang web sử dụng AJAX), bạn cũng có thể sử dụng đoạn mã sau:

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

Thiết lập ít nhất 8 sự kiện cốt lõi

Bạn nên thiết lập nhóm sự kiện cốt lõi có giá trị nhất đối với chủ sở hữu trang web. Bạn nên thiết lập tối thiểu các sự kiện sau:

  • view_item_list: khi người dùng xem danh sách các mặt hàng (ví dụ: danh sách sản phẩm). Tìm hiểu thêm

    gtag('event', 'view_item_list', {
      item_list_id: "related_products",
      item_list_name: "Related products",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Item",
        currency: "USD",
        discount: 2.22,
        price: 99.9,
        quantity: 1
      }]
    });
    
  • add_to_cart: khi người dùng thêm một hoặc nhiều sản phẩm vào giỏ hàng. Tìm hiểu thêm

    gtag('event', 'add_to_cart', {
      value: 99.0,
      currency: "USD",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Product",
        price: 99.0,
        currency: ‘USD’,
        quantity: 1,
        item_category: "All Products"
      }]
    });
    
  • begin_checkout: khi người dùng bắt đầu quy trình thanh toán cho một hoặc nhiều sản phẩm. Tìm hiểu thêm

    gtag('event', 'begin_checkout') {
      value: 99.0,
      currency: "USD",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Product",
        price: 99.0,
        currency: ‘USD’,
        quantity: 1,
        item_category: "All Products"
      }]
    });
    
  • purchase: khi người dùng mua một hoặc nhiều sản phẩm/dịch vụ. Tìm hiểu thêm

    gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});
    
  • sign_up: khi người dùng đăng ký để người dùng cuối có thể xem các phương thức đăng ký phổ biến nhất (ví dụ: Tài khoản Google, địa chỉ email). Tìm hiểu thêm

    gtag('event', 'sign_up', {method: 'web'});
    
  • generate_lead: khi người dùng gửi một biểu mẫu. Tìm hiểu thêm

    gtag('event', 'generate_lead', {value: XX, currency: 'USD'});
    
  • subscribe: khi người dùng đăng ký một dịch vụ hoặc bản tin.

    gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});
    
  • book_appointment: khi người dùng đặt lịch hẹn.

    gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});
    

Đề xuất bổ sung

Google hỗ trợ nhiều sự kiện và thông số hơn, đặc biệt là đối với thương mại điện tử. Nói chung, bạn nên chụp những thông tin sau:

  • Mọi sự kiện thành công đều liên kết trực tiếp với giá trị
  • Sự kiện thành công đóng góp vào các sự kiện chính cốt lõi (add_to_cart, sign_up, v.v.)
  • Lượt tương tác và lượt tương tác của người dùng giúp nhà quảng cáo hiểu được cách họ thu hút người dùng cuối

Sau đây là các tài nguyên khác giải thích thêm về việc thu thập sự kiện:

Chúng tôi muốn thảo luận về các tiện ích mở rộng tiềm năng cho giản đồ này, vì vậy, vui lòng cho chúng tôi biết nếu bạn có đề xuất.

Xác minh chế độ tích hợp đã cập nhật

Trước khi đẩy các thay đổi lên phiên bản chính thức, hãy xác minh khả năng tương thích với các tính năng sau:

  • Thẻ Google của bạn có đích đến là Google Analytics 4
  • Thẻ Google để tái tiếp thị và đo lường lượt chuyển đổi

Ngoài ra, hãy xác minh rằng thẻ này kích hoạt đúng cách trên tất cả các trang, bao gồm cả các trang sự kiện chính, bằng cách sử dụng bất kỳ công cụ nào sau đây:

  • Google Tag Assistant: Tag Assistant cho phép bạn xem những thẻ Google đã được kích hoạt và thứ tự kích hoạt. Chế độ gỡ lỗi của tiện ích Tag Assistant cho biết dữ liệu nào đang được truyền vào lớp dữ liệu và những sự kiện nào đã kích hoạt các lượt trao đổi dữ liệu đó.
  • Công cụ dành cho nhà phát triển Chrome: Sử dụng thẻ Mạng để lọc các yêu cầu chứa "google" nhằm xác minh cách gửi dữ liệu.
  • (Phía máy chủ) Báo cáo theo thời gian thực của Google Analytics: tạo một tài khoản Google Analytics miễn phí và sử dụng báo cáo Theo thời gian thực để xem máy chủ của Google có nhận được lượt truy cập thẻ hay không.

Để báo cáo lỗi hoặc phản hồi về thông tin bị thiếu, hãy điền vào biểu mẫu Hỗ trợ hệ thống quản lý nội dung.

Nếu có thể, vui lòng chia sẻ quyền truy cập thử nghiệm với Google để chúng tôi tiếp tục xác minh.

Cập nhật hướng dẫn triển khai cho người dùng

Cập nhật tài liệu để cung cấp hướng dẫn rõ ràng về cách triển khai các sản phẩm đo lường của Google thông qua cách triển khai của bạn. Vui lòng chia sẻ bản nháp của các hướng dẫn này bằng cách điền vào biểu mẫu Xem xét tài liệu thiết lập tích hợp CMS để chúng tôi có thể đưa ra ý kiến phản hồi.