Chế độ của bên thứ nhất: Tải tập lệnh Google thông qua tính năng gắn thẻ phía máy chủ

Bài viết này dành cho các nhà phát triển sử dụng tính năng gắn thẻ phía máy chủ và muốn phân phát tập lệnh Google từ máy chủ của riêng họ.

Tính năng gắn thẻ phía máy chủ cho phép bạn tải các tập lệnh của Google, chẳng hạn như gtm.js hoặc gtag.js, trực tiếp từ máy chủ gắn thẻ thay vì từ máy chủ của Google. Điều này cho phép bạn phân phát dữ liệu trong bối cảnh của bên thứ nhất.

Hướng dẫn này giả định rằng bạn đã làm xong những việc sau:

Để bắt đầu, hãy chọn phương thức triển khai.

Bước 1: Định cấu hình ứng dụng

Để thiết lập ngữ cảnh của bên thứ nhất giữa vùng chứa web và máy chủ gắn thẻ, bạn cần tải tập lệnh của Google thông qua máy chủ.

Cách tải tập lệnh Google thông qua vùng chứa máy chủ:

  1. Mở Trình quản lý thẻ của Google
  2. Trong vùng chứa máy chủ, hãy nhấp vào Khách hàng.
  3. Nhấp vào Mới
  4. Chọn loại ứng dụng khách Trình quản lý thẻ của Google: Vùng chứa trên web. Hộp thoại Choose client type (Chọn loại ứng dụng khách) với Trình quản lý thẻ: Ứng dụng khách vùng chứa web được làm nổi bật

  5. Trong phần Cấu hình ứng dụng:

    • Thêm mã vùng chứa: Nhập mã vùng chứa của vùng chứa web Trình quản lý thẻ mà bạn sẽ sử dụng trên trang web của mình.
    • Tự động phân phát tất cả tập lệnh phụ thuộc của Google: Khi được bật (chế độ cài đặt mặc định), máy chủ gắn thẻ sẽ tự động phân phát các tập lệnh mà tập lệnh gốc của Google cần. Nhờ đó, bạn không cần phải đưa từng vùng chứa mà tập lệnh của Google yêu cầu vào danh sách cho phép. Nếu bạn chỉ muốn phân phát vùng chứa ban đầu từ máy chủ gắn thẻ, hãy bỏ chọn tuỳ chọn này.
    • Bật chế độ cài đặt theo khu vực cụ thể: Sử dụng tuỳ chọn này để kích hoạt một số thẻ nhất định dựa trên vị trí của người dùng. Tìm hiểu thêm.

    Ảnh chụp màn hình ứng dụng vùng chứa web của Trình quản lý thẻ

  6. Đặt tên cho ứng dụng khách rồi Lưu.

  7. Xuất bản không gian làm việc.

Bước 2: Cập nhật miền nguồn tập lệnh

Theo mặc định, Trình quản lý thẻ hoặc gtag.js sẽ tải các phần phụ thuộc từ các máy chủ do Google sở hữu, chẳng hạn như https://example.com/metrics. Bạn cần cập nhật URL của tập lệnh trên trang web của mình để tải các phần phụ thuộc thông qua máy chủ của riêng bạn.

Cách tải mã GTM thông qua vùng chứa phía máy chủ:

  1. Tìm mã Trình quản lý thẻ hiện có trên trang.
  2. Thay thế chuỗi https://example.com/metrics bằng tên miền của máy chủ gắn thẻ trong <head><body> của mã cài đặt Trình quản lý thẻ của Google.

    • Đầu:
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://example.com/metrics/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
    <!-- End Google Tag Manager -->
    
    • Body:
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://example.com/metrics/ns.html?id=TAG_ID"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    

Bước 3: Xác minh nguồn của tập lệnh

Hướng dẫn sau đây cho biết cách kiểm thử bằng Google Chrome. Bạn có thể sử dụng bất kỳ trình duyệt nào bạn muốn, nhưng các bước có thể khác nhau.

Cách kiểm tra xem vùng chứa máy chủ của bạn có đang tải các phần phụ thuộc hay không:

  1. Mở trang web của bạn trong một thẻ trình duyệt mới.
  2. Mở công cụ dành cho nhà phát triển của trình duyệt. Trong Google Chrome, bạn có thể nhấp chuột phải vào vị trí bất kỳ trên trang rồi chọn Kiểm tra.
  3. Trong công cụ dành cho nhà phát triển, hãy mở thẻ Sources (Nguồn). Cửa sổ này hiển thị tất cả các phần phụ thuộc đã tải khi bạn mở trang web.

    • ✅ Bạn triển khai đúng cách nếu gtm.js được tải từ nguồn bạn chỉ định.

    Ảnh chụp màn hình các công cụ dành cho nhà phát triển, trong đó máy chủ của riêng bạn là nguồn cho các tập lệnh của Google

    • ❌ Nếu thẻ Sources (Nguồn) hiển thị www.googletagmanager.com làm nguồn cho gtm.js, thì các phần phụ thuộc vẫn được tải từ máy chủ của Google.

    Ảnh chụp màn hình các công cụ dành cho nhà phát triển, trong đó www.googletagmanager.com là nguồn cho các tập lệnh của Google

    • Kiểm tra xem bạn đã sửa đổi URL nguồn trong mã hay chưa, hãy xem bước 2.
    • Kiểm tra xem mã có đang hoạt động hay không.

Các bước tiếp theo

Nếu đang sử dụng chế độ đồng ý, bạn có thể thiết lập hành vi của thẻ theo khu vực để có thêm quyền kiểm soát.