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

Thẻ Google (gtag.js) 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 người xem

Hướng dẫn này dành cho những chủ sở hữu Hệ thống quản lý nội dung (CMS) hoặc những người tạo trang web muốn cung cấp cho người dùng tính 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 CMS hoặc trình tạo trang web.

Trước khi bắt đầu

Hãy đảm bảo bạn có Mã nhà phát triển thẻ Google. Nếu bạn không có Mã nhà phát triển thẻ Google, hãy điền vào biểu mẫu yêu cầu Mã nhà phát triển thẻ Google. Mã nhà phát triển của bạ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ích hợp với thẻ Google
  2. Cập nhật cấu trúc hoạt động đầu vào của người dùng
  3. Triển khai API lấy sự đồng ý
  4. Thiết lập dữ liệu sự kiện
  5. Xác minh quy trình tích hợp mới
  6. Cập nhật hướng dẫn triển khai người dùng

Tích hợp với thẻ Google

Bằng cá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 thuộc trang web của họ. 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ích hợp với thẻ Google, hãy thay thế đoạn mã hiện có bằng đoạn mã sau. Hãy đả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 phần Tắt tính năng thu thập dữ liệu quảng cáo được cá nhân hoá.
  • Tốt nhất là đoạn mã thẻ Google chỉ nên xuất hiện một lần trên mỗi trang. Đoạn mã có thể chứa nhiều mã thẻ. Nếu đã có 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 hoạt động đầ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 dạng mã thẻ Google thông qua một giao diện, bất kể họ đang triển khai sản phẩm đo lường nào của Google.

Ví dụ: sau đây là một thông tin nhập đơn giản của thẻ Google. Quá trình tích hợp nên được đóng khung dưới dạng quá trình triển khai thẻ Google. Đây có thể là một phương pháp để triển khai Google Ads và Google Analytics.

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

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

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

Dữ liệu đầu vào mã thẻ phải chấp nhận nhiều biến thể mã nhận dạng 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ó tích hợp sẵn Consent API để quản lý sự đồng ý của người dùng. Tính năng 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 ý của người dùng cho mục đích phân tích.

Kết quả mong đợi là khách hàng nhận được ít nhất lệnh gọi gtag('consent', 'update' {...}) được tích hợp mà không cần khách hàng làm gì cả. Điều này cần đảm bảo 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 cho Google (thông qua tham 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 trong việc 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 các thẻ Google (tức là không kích hoạt có điều kiện dựa trên sự đồng ý) để kích hoạt chế độ đồng ý kích hoạt các thẻ theo cách nhận biết được sự đồng ý.

Để biết thông tin chi tiết về cách triển khai, hãy xem bài viết 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 phong phú từ trang web của khách hàng đến Tài khoản Google của họ mà không cần khách hàng làm gì cả. Ví dụ: bạn có thể thêm các sự kiện trong một 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à số lượt đăng ký.

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

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

Ghi nhật ký mọi thứ có thể

Nếu có thể, bạn nên thiết lập sự kiện theo mặc định. Trong đó có:

  • Các sự kiện chuyển đổi, chẳng hạn như purchase hoặc sign_up
  • Các sự kiện trước sự kiện chuyển đổi, chẳng hạn như add_to_cart
  • Các hoạt động tương tác dựa trên hành vi, chẳng hạn như tương tác với nội dung nghe nhìn, 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 chuyển đổi vào các trang chuyển đổi (ví dụ: xác nhận mua hàng, 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.

Các sự kiện được gửi bằng lệnh event. Mã này bao gồm Mã nhà phát triển thẻ Google mà bạn đã đưa vào thẻ toàn trang web đượ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à 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ỏ qua:
    • 'value' là giá trị số của lượt chuyển đổi (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ã nhận dạng duy nhất cho giao dịch (ví dụ: mã đơn hàng); mã này đượ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 cung cấp nhiều thông tin nhất có sẵn 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 ai đó xem một 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, đồng thời 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 chuyển đổi dựa trên lượt nhấp (ví dụ: lượt nhấp vào một 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 chính

Bạn nên thiết lập một 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 các sự kiện sau ở mức tối thiểu:

  • view_item_list: khi người dùng xem một danh sách 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 hay 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ể thấy 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 nhận bản tin.

    gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});
    
  • book_appointment: khi một 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ợ thêm nhiều sự kiện và thông số, đặc biệt là cho thương mại điện tử. Nói chung, bạn nên nắm bắt những thông tin sau:

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

Sau đây là các tài liệu bổ sung 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 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 yêu cầu tích hợp đã cập nhật

Trước khi bạn chuyển các thay đổi sang phiên bản chính thức, hãy xác minh khả năng tương thích với những nội dung sau:

  • Thẻ Google có đích đến 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ẻ kích hoạt đúng cách trên tất cả các trang (bao gồm cả trang chuyển đổi) 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 thẻ Google nào đã kích hoạt và thứ tự kích hoạt. Chế độ gỡ lỗi của 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 hoạt động trao đổi dữ liệu đó.
  • Công cụ cho nhà phát triển Chrome: Sử dụng thẻ Mạng để lọc các yêu cầu có chứa "google" nhằm xác minh cách dữ liệu được gửi.
  • Báo cáo theo thời gian thực của Google Analytics (phía máy chủ): Tạo 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 đưa ra ý kiến phản hồi về thông tin còn thiếu, hãy điền vào biểu mẫu Hỗ trợ hệ thống quản lý nội dung.

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

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

Cập nhật tài liệu của bạn để 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 quá trình triển khai. Vui lòng chia sẻ bản nháp của những hướng dẫn này bằng cách điền vào biểu mẫu Xem lại 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.