Các phương pháp hay nhất dành cho thẻ và trình quản lý thẻ

Tối ưu hoá thẻ và trình quản lý thẻ cho Các chỉ số quan trọng về trang web.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

Thẻ là các đoạn mã của bên thứ ba được chèn vào một trang web, thường là thông qua một trình quản lý thẻ. Thẻ thường được dùng để tiếp thị và phân tích.

Hiệu suất của thẻ và trình quản lý thẻ có sự khác biệt rất lớn giữa các trang web. Bạn có thể so sánh Trình quản lý thẻ với một phong bì: trình quản lý thẻ cung cấp một tệp, nhưng nội dung bạn lấp đầy và cách sử dụng trình quản lý thẻ chủ yếu là do bạn quyết định.

Bài viết này thảo luận các kỹ thuật tối ưu hoá thẻ và trình quản lý thẻ để cải thiện hiệu suất và Các chỉ số quan trọng về trang web. Mặc dù bài viết này đề cập đến Trình quản lý thẻ của Google, nhưng nhiều ý tưởng được thảo luận cũng có thể áp dụng cho các trình quản lý thẻ khác.

Tác động đến Các chỉ số quan trọng về trang web

Thường thì Trình quản lý thẻ có thể tác động gián tiếp đến Các chỉ số quan trọng về trang web của bạn bằng cách sử dụng hết tài nguyên cần thiết để tải trang nhanh chóng và duy trì khả năng thích ứng. Bạn có thể sử dụng băng thông để tải JavaScript của trình quản lý thẻ xuống cho trang web của mình hoặc các lệnh gọi tiếp theo mà quá trình này thực hiện. Bạn có thể dành thời gian cho CPU trên luồng chính để đánh giá và thực thi JavaScript có trong trình quản lý thẻ và các thẻ.

Thời gian hiển thị nội dung lớn nhất (LCP) dễ bị tranh chấp băng thông trong thời gian tải trang quan trọng. Ngoài ra, việc chặn luồng chính có thể làm chậm thời gian kết xuất LCP.

Điểm số tổng hợp về mức thay đổi bố cục (CLS) có thể bị ảnh hưởng do trì hoãn việc tải các tài nguyên quan trọng trước lần hiển thị đầu tiên, hoặc do trình quản lý thẻ chèn nội dung vào trang.

Hoạt động tương tác với Nội dung hiển thị tiếp theo (INP) dễ gây tranh chấp CPU trên luồng chính. Chúng tôi đã thấy mối tương quan giữa quy mô của các trình quản lý thẻ và điểm INP thấp hơn.

Loại thẻ

Mức độ tác động của các thẻ đến hiệu suất sẽ khác nhau tuỳ theo loại thẻ. Nhìn chung, thẻ hình ảnh ("pixel") hoạt động hiệu quả nhất, tiếp theo là mẫu tuỳ chỉnh và cuối cùng là thẻ HTML tuỳ chỉnh. Thẻ nhà cung cấp sẽ khác nhau tuỳ thuộc vào chức năng mà thẻ cho phép.

Tuy nhiên, xin lưu ý rằng cách bạn sử dụng thẻ ảnh hưởng rất lớn đến hiệu suất của thẻ. "Pixel" có hiệu suất cao phần lớn vì bản chất của loại thẻ này đặt ra các hạn chế chặt chẽ về cách sử dụng; thẻ HTML tuỳ chỉnh không nhất thiết luôn có hiệu suất kém, nhưng do mức độ tự do mà chúng mang lại cho người dùng, thẻ có thể dễ bị sử dụng sai mục đích gây ảnh hưởng xấu đến hiệu suất.

Khi xem xét thẻ, hãy lưu ý đến quy mô: tác động về hiệu suất của một thẻ bất kỳ có thể không đáng kể, nhưng có thể trở nên đáng kể khi có hàng chục hoặc hàng trăm thẻ được sử dụng trên cùng một trang.

Không phải tất cả tập lệnh đều được tải bằng trình quản lý thẻ

Trình quản lý thẻ thường không phải là một cơ chế hiệu quả để tải tài nguyên nhằm triển khai ngay các khía cạnh chức năng hoặc hình ảnh của trải nghiệm người dùng (ví dụ: thông báo cookie, hình ảnh chính hoặc tính năng của trang web). Việc sử dụng trình quản lý thẻ để tải các tài nguyên này thường làm chậm quá trình phân phối. Điều này không tốt cho trải nghiệm người dùng và cũng có thể làm tăng các chỉ số như LCP và CLS. Ngoài ra, hãy lưu ý rằng một số người dùng chặn trình quản lý thẻ. Việc sử dụng trình quản lý thẻ để triển khai các tính năng trải nghiệm người dùng có thể khiến một số người dùng của bạn truy cập vào trang web bị hỏng.

Hãy cẩn thận với thẻ HTML tuỳ chỉnh

Thẻ HTML tuỳ chỉnh đã xuất hiện trong nhiều năm và được sử dụng nhiều trên hầu hết các trang web. Thẻ HTML tuỳ chỉnh cho phép bạn nhập mã của riêng mình nhưng kèm theo một số hạn chế nhất định, bất kể tên gọi là gì, mục đích chính của thẻ này là thêm các phần tử <script> tuỳ chỉnh vào một trang.

Bạn có thể dùng thẻ HTML tuỳ chỉnh theo nhiều cách và tác động của chúng thay đổi đáng kể. Khi đo lường hiệu suất của trang web, xin lưu ý rằng hầu hết các công cụ sẽ quy tác động về hiệu suất của thẻ HTML tuỳ chỉnh cho trình quản lý thẻ đã chèn thẻ đó, thay vì chính thẻ đó.

Ảnh chụp màn hình về cách tạo thẻ tuỳ chỉnh trong Trình quản lý thẻ của Google

Thẻ HTML tuỳ chỉnh có thể chèn một phần tử vào trang xung quanh. Việc chèn phần tử vào trang có thể là một nguồn vấn đề về hiệu suất và trong một số trường hợp cũng gây ra sự thay đổi về bố cục.

  • Trong hầu hết trường hợp, nếu một phần tử được chèn vào trang, thì trình duyệt phải tính toán lại kích thước và vị trí của từng mục trên trang – quy trình này được gọi là bố cục. Tác động về hiệu suất của một bố cục đơn lẻ là rất nhỏ, nhưng nếu bố cục đó xảy ra quá mức thì có thể trở thành một nguyên nhân gây ra các vấn đề về hiệu suất. Ảnh hưởng của hiện tượng này sẽ lớn hơn đối với các thiết bị cấp thấp hơn và những trang có nhiều phần tử DOM.
  • Nếu một phần tử trang hiển thị được chèn vào DOM sau khi vùng xung quanh đã hiển thị, thì phần tử đó có thể gây ra sự thay đổi bố cục. Hiện tượng này không chỉ xảy ra với người quản lý thẻ. Tuy nhiên, vì thẻ thường tải muộn hơn so với các phần khác của trang, nên các thẻ đó thường được chèn vào DOM sau khi trang xung quanh đã hiển thị.

Cân nhắc việc sử dụng mẫu tuỳ chỉnh

Mẫu tuỳ chỉnh hỗ trợ một số thao tác tương tự như thẻ HTML tuỳ chỉnh nhưng được xây dựng dựa trên một phiên bản JavaScript dạng hộp cát, cung cấp API cho các trường hợp sử dụng phổ biến như chèn tập lệnh và chèn điểm ảnh. Giống như tên gọi, chúng cho phép tạo mẫu bởi một người dùng thành thạo có thể tạo mẫu này dựa trên hiệu suất. Sau đó, những người dùng ít kỹ thuật hơn có thể sử dụng mẫu. Cách này thường an toàn hơn so với việc cung cấp toàn quyền truy cập vào HTML tuỳ chỉnh.

Do các hạn chế lớn hơn được áp dụng cho mẫu tuỳ chỉnh, các thẻ này ít có khả năng gặp phải các vấn đề về hiệu suất hoặc bảo mật. Tuy nhiên, vì những lý do tương tự, mẫu tuỳ chỉnh sẽ không dùng được cho mọi trường hợp sử dụng.

Ảnh chụp màn hình về việc sử dụng mẫu tuỳ chỉnh trong Trình quản lý thẻ của Google

Chèn tập lệnh đúng cách

Sử dụng trình quản lý thẻ để chèn tập lệnh là trường hợp sử dụng rất phổ biến. Bạn nên sử dụng Mẫu tuỳ chỉnh và API injectScript để thực hiện việc này.

Để biết thông tin về cách sử dụng API injectScript để chuyển đổi một thẻ HTML tuỳ chỉnh hiện có, hãy xem phần Chuyển đổi một thẻ hiện có.

Nếu bạn phải sử dụng thẻ HTML tuỳ chỉnh, hãy lưu ý một số điều sau:

  • Bạn nên tải các thư viện và tập lệnh có dung lượng lớn của bên thứ ba thông qua thẻ tập lệnh để tải tệp bên ngoài xuống (ví dụ: <script src="external-scripts.js">), thay vì trực tiếp sao chép và dán nội dung của tập lệnh vào thẻ đó. Mặc dù việc sử dụng thẻ <script> sẽ loại bỏ một lượt khứ hồi riêng biệt để tải nội dung của tập lệnh xuống, nhưng phương pháp này sẽ làm tăng kích thước vùng chứa và ngăn tập lệnh được lưu vào bộ nhớ đệm riêng biệt.
  • Nhiều nhà cung cấp khuyên bạn nên đặt thẻ <script> ở đầu <head>. Tuy nhiên, đối với các tập lệnh được tải thông qua trình quản lý thẻ, đề xuất này thường không cần thiết: trong hầu hết trường hợp, trình duyệt đã hoàn tất việc phân tích cú pháp <head> vào thời điểm trình quản lý thẻ thực thi.

Sử dụng pixel

Trong một số trường hợp, bạn có thể thay thế tập lệnh của bên thứ ba bằng "pixel" hình ảnh hoặc iframe. So với các phiên bản dựa trên tập lệnh, pixel có thể hỗ trợ ít chức năng hơn. Vì vậy, chúng thường được xem là cách triển khai ít được ưu tiên hơn. Tuy nhiên, khi được sử dụng bên trong trình quản lý thẻ, pixel có thể linh động hơn vì chúng có thể kích hoạt trình kích hoạt và chuyển các biến khác nhau. Đây là loại thẻ an toàn và hiệu quả nhất vì không có thực thi JavaScript sau khi kích hoạt. Pixel có kích thước tài nguyên rất nhỏ (dưới 1 KB) và không làm thay đổi bố cục.

Hãy liên hệ với nhà cung cấp bên thứ ba để biết thêm thông tin về khả năng hỗ trợ của họ cho pixel. Ngoài ra, bạn có thể thử kiểm tra mã của thẻ <noscript>. Nếu hỗ trợ pixel, nhà cung cấp thường sẽ đưa pixel vào thẻ <noscript>.

Ảnh chụp màn hình về thẻ hình ảnh tuỳ chỉnh trong Trình quản lý thẻ của Google

Lựa chọn thay thế cho pixel

Pixel trở nên phổ biến phần lớn vì có thời điểm đó, chúng là một trong những cách rẻ nhất và đáng tin cậy nhất để thực hiện yêu cầu HTTP trong trường hợp phản hồi của máy chủ không liên quan ( ví dụ: khi gửi dữ liệu đến nhà cung cấp phân tích). Các API navigator.sendBeacon() và fetch() keepalive được thiết kế để giải quyết cùng một trường hợp sử dụng này nhưng có độ tin cậy cao hơn pixel.

Việc tiếp tục sử dụng pixel không có gì sai trái – chúng được hỗ trợ tốt và có tác động tối thiểu đến hiệu suất. Tuy nhiên, nếu đang xây dựng beacon của riêng mình, bạn nên cân nhắc sử dụng một trong những API này.

sendBeacon()

API navigator.sendBeacon() được thiết kế để gửi một lượng nhỏ dữ liệu đến máy chủ web trong các trường hợp mà phản hồi của máy chủ không quan trọng.

const url = "https://example.com/analytics";
const data = JSON.stringify({
    event: "checkout",
    time: performance.now()
});

navigator.sendBeacon(url, data);

sendBeacon() có một API hạn chế: API này chỉ hỗ trợ tạo các yêu cầu POST chứ không hỗ trợ việc đặt tiêu đề tuỳ chỉnh. Tính năng này được tất cả trình duyệt hiện đại hỗ trợ.

fetch() keepalive

keepalive là cờ cho phép sử dụng API Tìm nạp để thực hiện các yêu cầu không chặn như báo cáo và phân tích sự kiện. Hàm này được sử dụng bằng cách đưa keepalive: true vào các tham số được truyền đến fetch().

const url = "https://example.com/analytics";
const data = JSON.stringify({
  event: "checkout",
  time: performance.now()
});

fetch(url, {
    method: 'POST',
    body: data,
    keepalive: true
});

Nếu fetch() keepalive và sendBeacon() có vẻ rất giống nhau, thì đó là do chúng là như vậy. Trên thực tế, trong các trình duyệt Chromium, sendBeacon() hiện được xây dựng dựa trên fetch() keepalive.

Khi lựa chọn giữa fetch() keepalive và sendBeacon(), bạn cần phải cân nhắc các tính năng và khả năng hỗ trợ trình duyệt mà bạn cần. API tìm nạp() linh hoạt hơn đáng kể; tuy nhiên, keepalive có ít hỗ trợ trình duyệt hơn so với sendBeacon().

Tìm hiểu thêm

Thẻ thường được tạo theo hướng dẫn của nhà cung cấp bên thứ ba. Nếu không rõ mã của nhà cung cấp có tác dụng gì, hãy cân nhắc việc hỏi một người biết rõ. Việc thu thập ý kiến thứ hai có thể giúp xác định xem một thẻ có khả năng gây ra vấn đề về hiệu suất hoặc bảo mật hay không.

Bạn cũng nên gắn nhãn cho thẻ có chủ sở hữu trong trình quản lý thẻ. Thật quá dễ dàng để quên ai sở hữu thẻ và ngại phải xoá thẻ đó trong trường hợp cần phải xoá thẻ!

Điều kiện kích hoạt

Ở cấp độ tổng thể, việc tối ưu hoá điều kiện kích hoạt thẻ thường bao gồm việc đảm bảo không kích hoạt thẻ nhiều hơn mức cần thiết và chọn một điều kiện kích hoạt sẽ cân bằng nhu cầu kinh doanh với chi phí hiệu suất.

Bản thân trình kích hoạt là mã JavaScript sẽ làm tăng kích thước (và chi phí thực thi) của trình quản lý thẻ. Mặc dù hầu hết các điều kiện kích hoạt đều nhỏ, nhưng tác động tích luỹ có thể tăng thêm. Ví dụ: việc có nhiều sự kiện nhấp chuột hoặc trình kích hoạt bộ tính giờ có thể làm tăng đáng kể khối lượng công việc của trình quản lý thẻ.

Chọn một sự kiện kích hoạt thích hợp

Mức độ tác động về hiệu suất của thẻ là chưa khắc phục: nói chung, thẻ kích hoạt càng sớm thì tác động của thẻ càng lớn đến hiệu suất. Tài nguyên thường bị hạn chế trong lần tải trang ban đầu. Do đó, việc tải hoặc thực thi một tài nguyên (hoặc thẻ) cụ thể sẽ lấy đi tài nguyên của nội dung khác.

Mặc dù bạn phải chọn điều kiện kích hoạt phù hợp cho tất cả các thẻ, nhưng điều này đặc biệt quan trọng đối với những thẻ tải tài nguyên lớn hoặc thực thi tập lệnh dài.

Thẻ có thể được kích hoạt trên Lượt xem trang (thường là Page load, vào DOM Ready, trên Window Loaded) hoặc dựa trên một sự kiện tùy chỉnh. Để tránh ảnh hưởng đến tải trang, bạn nên kích hoạt các thẻ không cần thiết sau Window Loaded.

Sử dụng sự kiện tuỳ chỉnh

Sự kiện tuỳ chỉnh cho phép bạn kích hoạt điều kiện kích hoạt để phản hồi các sự kiện trang không có trong trình kích hoạt tích hợp của Trình quản lý thẻ của Google. Ví dụ: nhiều thẻ sử dụng điều kiện kích hoạt lượt xem trang; tuy nhiên, khoảng thời gian từ DOM Ready đến Window Loaded có thể dài trên nhiều trang và điều này có thể gây khó khăn cho việc tinh chỉnh khi một thẻ được kích hoạt. Sự kiện tuỳ chỉnh cung cấp giải pháp cho vấn đề này.

Để sử dụng sự kiện tuỳ chỉnh, trước tiên hãy tạo một điều kiện kích hoạt sự kiện tuỳ chỉnh và cập nhật các thẻ để sử dụng điều kiện kích hoạt này.

Ảnh chụp màn hình trình kích hoạt Sự kiện tuỳ chỉnh trong Trình quản lý thẻ của Google

Để kích hoạt điều kiện kích hoạt, hãy đẩy sự kiện tương ứng đến lớp dữ liệu.

// Custom event trigger that fires after 2 seconds
setTimeout(() => {
  dataLayer.push({
    'event' : 'my-custom-event'
  });
}, 2000);

Sử dụng các điều kiện kích hoạt cụ thể

Việc sử dụng các điều kiện kích hoạt cụ thể giúp tránh kích hoạt một thẻ một cách không cần thiết. Mặc dù có nhiều cách để áp dụng khái niệm này, nhưng một trong những cách đơn giản nhưng hữu ích nhất mà bạn có thể làm là đảm bảo rằng thẻ chỉ kích hoạt trên những trang thực sự được sử dụng.

Ảnh chụp màn hình cho thấy các điều kiện kích hoạt trong Trình quản lý thẻ của Google

Bạn cũng có thể kết hợp biến tích hợp vào các điều kiện kích hoạt để hạn chế kích hoạt thẻ.

Tuy nhiên, hãy lưu ý rằng việc có các điều kiện kích hoạt hoặc ngoại lệ phức tạp sẽ làm mất thời gian xử lý và thời gian xử lý, vì vậy, đừng tạo các điều kiện hoặc ngoại lệ quá phức tạp.

Tải trình quản lý thẻ vào một thời điểm thích hợp

Việc điều chỉnh thời điểm tải trình quản lý thẻ có thể ảnh hưởng đáng kể đến hiệu suất. Điều kiện kích hoạt, bất kể được định cấu hình như thế nào, không thể kích hoạt cho đến khi trình quản lý thẻ tải. Mặc dù điều quan trọng là phải chọn điều kiện kích hoạt tốt cho các thẻ riêng lẻ (như đã giải thích ở trên), nhưng việc thử nghiệm thời điểm tải trình quản lý thẻ thường có tác động tương đương hoặc lớn hơn vì quyết định duy nhất này sẽ tác động đến tất cả các thẻ trên trang.

Việc tải trình quản lý thẻ sau này cũng sẽ thêm một lớp kiểm soát và có thể tránh các vấn đề về hiệu suất trong tương lai vì điều này sẽ ngăn người dùng trình quản lý thẻ vô tình tải thẻ quá sớm mà không nhận ra tác động có thể xảy ra.

Biến

Các biến cho phép đọc dữ liệu trên trang. Chúng hữu ích trong điều kiện kích hoạt cũng như trong chính các thẻ.

Giống như điều kiện kích hoạt, các biến sẽ dẫn đến việc mã JavaScript được thêm vào trình quản lý thẻ, và do đó có thể gây ra các vấn đề về hiệu suất. Biến có thể là những loại tích hợp sẵn tương đối đơn giản, có thể đọc các phần của URL, cookie, lớp dữ liệu hoặc DOM. Hoặc chúng có thể là JavaScript tuỳ chỉnh về cơ bản là không giới hạn về khả năng của nó.

Giữ các biến đơn giản và ở mức tối thiểu, vì trình quản lý thẻ sẽ cần đánh giá liên tục các biến đó. Xoá các biến cũ không còn được sử dụng để giảm cả kích thước của tập lệnh trình quản lý thẻ lẫn thời gian xử lý mà tập lệnh đó sử dụng.

Quản lý thẻ

Việc sử dụng thẻ một cách hiệu quả sẽ giúp giảm nguy cơ gặp các vấn đề về hiệu suất.

Sử dụng lớp dữ liệu

Lớp dữ liệu "chứa tất cả thông tin bạn muốn chuyển đến Trình quản lý thẻ của Google". Cụ thể hơn, đó là một mảng JavaScript gồm các đối tượng chứa thông tin về trang. Bạn cũng có thể dùng đoạn mã này để kích hoạt thẻ.

// Contents of the data layer
window.dataLayer = [{
    'pageCategory': 'signup',
    'visitorType': 'high-value'
  }];

// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});

// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});

Mặc dù có thể sử dụng Trình quản lý thẻ của Google mà không cần lớp dữ liệu, nhưng bạn nên sử dụng trình quản lý thẻ của Google. Lớp dữ liệu cung cấp một cách để hợp nhất dữ liệu đang được các tập lệnh của bên thứ ba truy cập vào một nơi duy nhất, qua đó giúp bạn hiểu rõ hơn về mức sử dụng dữ liệu đó. Ngoài ra, điều này có thể giúp giảm các phép tính biến thừa và quá trình thực thi tập lệnh. Việc sử dụng lớp dữ liệu cũng kiểm soát dữ liệu mà thẻ đang truy cập, thay vì cấp quyền truy cập DOM hoặc biến JavaScript đầy đủ.

Xoá các thẻ trùng lặp và không dùng đến

Trường hợp thẻ trùng lặp có thể xảy ra khi một thẻ được đưa vào mã đánh dấu HTML của một trang ngoài việc được chèn thông qua một trình quản lý thẻ.

Bạn nên tạm dừng hoặc xoá các thẻ không dùng đến thay vì chặn bằng cách sử dụng trường hợp ngoại lệ của điều kiện kích hoạt. Việc tạm dừng hoặc xoá thẻ sẽ xoá mã khỏi vùng chứa còn thao tác chặn thì không.

Khi xoá các thẻ không dùng đến, bạn cũng nên xem xét điều kiện kích hoạt và biến để xem có thể xoá bất kỳ thẻ nào trong số đó nếu chỉ được các thẻ đó sử dụng hay không.

Sử dụng danh sách cho phép và từ chối

Danh sách cho phép và từ chối cho phép bạn định cấu hình các quy tắc hạn chế chi tiết cao đối với thẻ, trình kích hoạt và biến được phép trên trang. Thông tin này có thể được dùng để giúp thực thi các phương pháp hay nhất về hiệu suất và các chính sách khác.

Danh sách cho phép và từ chối được định cấu hình thông qua lớp dữ liệu.

window.dataLayer = [{
  'gtm.allowlist': ['<id>', '<id>', ...],
  'gtm.blocklist': ['customScripts']
}];

Ví dụ: bạn có thể không cho phép bất kỳ thẻ HTML tuỳ chỉnh, biến JavaScript hoặc DOM trực tiếp nào. Điều này có nghĩa là bạn chỉ có thể sử dụng pixel và thẻ được xác định trước với dữ liệu từ lớp dữ liệu. Mặc dù điều này chắc chắn có tính hạn chế, nhưng nó có thể dẫn đến việc triển khai trình quản lý thẻ hiệu quả và an toàn hơn nhiều.

Cân nhắc sử dụng cấu hình gắn thẻ phía máy chủ

Việc chuyển sang tính năng gắn thẻ phía máy chủ không phải là một nhiệm vụ đơn giản nhưng cũng đáng cân nhắc – đặc biệt là đối với các trang web lớn muốn có nhiều quyền kiểm soát hơn đối với dữ liệu của trang web. Việc gắn thẻ phía máy chủ sẽ xoá mã nhà cung cấp khỏi ứng dụng, đồng thời giảm tải quá trình xử lý từ ứng dụng sang máy chủ.

Ví dụ: khi sử dụng cấu hình gắn thẻ phía máy khách, việc gửi dữ liệu đến nhiều tài khoản phân tích đòi hỏi ứng dụng phải bắt đầu các yêu cầu riêng cho từng điểm cuối. Ngược lại, với cấu hình gắn thẻ phía máy chủ, ứng dụng sẽ gửi một yêu cầu duy nhất đến vùng chứa phía máy chủ và từ đó, dữ liệu này được chuyển tiếp đến nhiều tài khoản phân tích.

Xin lưu ý rằng tính năng gắn thẻ phía máy chủ chỉ hoạt động với một số thẻ; khả năng tương thích của thẻ thay đổi tuỳ thuộc vào nhà cung cấp.

Để biết thêm thông tin, hãy xem bài viết Giới thiệu về tính năng gắn thẻ phía máy chủ.

Vùng chứa

Trình quản lý thẻ thường cho phép nhiều phiên bản hoặc "vùng chứa" trong quá trình thiết lập. Điều này cho phép kiểm soát nhiều vùng chứa trong một tài khoản trình quản lý thẻ.

Chỉ sử dụng một vùng chứa trên mỗi trang

Việc sử dụng nhiều containers trên một trang có thể gây ra vấn đề nghiêm trọng về hiệu suất vì điều này gây ra thêm hao tổn và thực thi tập lệnh. Ít nhất, mã này sẽ sao chép chính mã thẻ cốt lõi, vì mã được phân phối dưới dạng một phần của JavaScript của vùng chứa nên không thể sử dụng lại giữa các vùng chứa.

Hiếm khi nhiều vùng chứa được sử dụng hiệu quả. Tuy nhiên, có thể xảy ra một số trường hợp (nếu được kiểm soát tốt) trong đó có:

  • Có một vùng chứa "tải sớm" nhẹ hơn và một vùng chứa "tải sau" nặng hơn, thay vì một vùng chứa lớn.
  • Có vùng chứa bị hạn chế dành cho những người dùng ít kỹ thuật hơn, ít bị hạn chế hơn nhưng được kiểm soát chặt chẽ hơn và chứa các thẻ không thể sử dụng trong vùng chứa bị hạn chế.

Nếu bạn phải sử dụng nhiều vùng chứa trên mỗi trang, hãy làm theo hướng dẫn của Trình quản lý thẻ của Google để thiết lập nhiều vùng chứa.

Dùng các vùng chứa riêng nếu cần

Nếu bạn sử dụng trình quản lý thẻ cho nhiều thuộc tính (ví dụ: ứng dụng web và ứng dụng dành cho thiết bị di động), thì số lượng vùng chứa mà bạn sử dụng có thể hữu ích hoặc làm giảm năng suất của quy trình làm việc. Điều này cũng có thể ảnh hưởng đến hiệu suất.

Nói chung, một vùng chứa có thể được sử dụng hiệu quả trên nhiều trang web nếu các trang web đó có cách sử dụng và cấu trúc tương tự nhau. Ví dụ: mặc dù ứng dụng web và ứng dụng di động của một thương hiệu có thể phân phát các chức năng tương tự nhau, nhưng có khả năng ứng dụng sẽ có cấu trúc khác nhau và do đó được quản lý hiệu quả hơn thông qua các vùng chứa riêng biệt.

Việc cố gắng sử dụng lại một vùng chứa quá rộng thường sẽ làm tăng độ phức tạp và kích thước của vùng chứa bằng cách buộc áp dụng logic phức tạp để quản lý thẻ và điều kiện kích hoạt.

Chú ý đến kích thước vùng chứa

Kích thước của vùng chứa được xác định bởi các thẻ, trình kích hoạt và biến của vùng chứa đó. Mặc dù vùng chứa nhỏ vẫn có thể tác động tiêu cực đến hiệu suất trang, nhưng một vùng chứa lớn gần như chắc chắn sẽ có tác động tiêu cực.

Kích thước vùng chứa không được là chỉ số sao bắc cầu khi tối ưu hoá việc sử dụng thẻ. Tuy nhiên, kích thước vùng chứa lớn thường là dấu hiệu cảnh báo rằng vùng chứa không được duy trì tốt và có thể bị sử dụng sai mục đích.

Trình quản lý thẻ của Google giới hạn kích thước vùng chứa ở mức 200 KB và sẽ cảnh báo về kích thước vùng chứa bắt đầu từ 140 KB. Tuy nhiên, hầu hết các trang web nên cố gắng giữ cho vùng chứa của mình nhỏ hơn nhiều. Theo góc độ, vùng chứa trang web trung bình có kích thước khoảng 50 KB.

Để xác định kích thước của vùng chứa, hãy xem kích thước của phản hồi do https://www.googletagmanager.com/gtag/js?id=YOUR_ID trả về. Phản hồi này chứa thư viện Trình quản lý thẻ của Google cùng với nội dung của vùng chứa. Thư viện Trình quản lý thẻ của Google có kích thước nén khoảng 33 KB.

Đặt tên cho phiên bản vùng chứa của bạn

Phiên bản vùng chứa là thông tin tổng quan nhanh về nội dung của một vùng chứa tại một thời điểm cụ thể. Việc sử dụng một cái tên có ý nghĩa và nội dung mô tả ngắn về những thay đổi có ý nghĩa trong đó có thể giúp ích rất nhiều trong việc khắc phục các vấn đề về hiệu suất trong tương lai.

Quy trình gắn thẻ

Việc quản lý các thay đổi đối với thẻ là rất quan trọng để đảm bảo các thay đổi đó không tác động tiêu cực đến hiệu suất của trang.

Kiểm tra thẻ trước khi triển khai

Việc kiểm thử thẻ trước khi triển khai có thể giúp bạn phát hiện các vấn đề (hiệu suất, nếu không) trước khi triển khai.

Những điều cần xem xét khi thử nghiệm thẻ bao gồm:

  • Thẻ có hoạt động chính xác không?
  • Thẻ có gây ra bất kỳ thay đổi nào về bố cục không?
  • Thẻ có tải tài nguyên nào không? Những tài nguyên này có lớn đến mức nào?
  • Thẻ có kích hoạt tập lệnh chạy trong thời gian dài không?

Chế độ xem trước

Chế độ xem trước cho phép bạn thử nghiệm các thay đổi về thẻ trên trang web thực tế của mình mà không cần phải triển khai các thay đổi đó công khai trước. Chế độ xem trước bao gồm một bảng điều khiển gỡ lỗi cung cấp thông tin về các thẻ.

Thời gian thực thi của Trình quản lý thẻ của Google sẽ khác (chậm hơn một chút) khi chạy ở chế độ Xem trước do mức hao tổn bổ sung cần thiết để hiển thị thông tin trong bảng điều khiển gỡ lỗi. Do đó, bạn không nên so sánh các chỉ số đo lường Các chỉ số quan trọng về trang web được thu thập ở chế độ xem trước với các kết quả đo lường được thu thập trong phiên bản chính thức. Tuy nhiên, sự khác biệt này sẽ không ảnh hưởng đến hành vi thực thi của chính các thẻ.

Kiểm thử độc lập

Một phương pháp thay thế để kiểm thử thẻ là thiết lập một trang trống chứa một vùng chứa có một thẻ duy nhất (thẻ mà bạn đang kiểm thử). Cách thiết lập kiểm thử này ít thực tế hơn và sẽ không phát hiện được một số vấn đề (ví dụ: liệu một thẻ có gây ra sự thay đổi bố cục hay không) – tuy nhiên, việc thiết lập này có thể giúp bạn dễ dàng tách biệt và đo lường tác động của thẻ đến những yếu tố như thực thi tập lệnh. Hãy xem cách Telegraph sử dụng phương pháp tách biệt này để cải thiện hiệu suất của mã bên thứ ba.

Theo dõi hiệu suất của thẻ

Bạn có thể sử dụng API giám sát trong Trình quản lý thẻ của Google để thu thập thông tin về thời gian thực thi của một thẻ cụ thể. Thông tin này được báo cáo tới một điểm cuối mà bạn chọn.

Để biết thêm thông tin, hãy xem bài viết Cách tạo công cụ Theo dõi trình quản lý thẻ của Google.

Yêu cầu phê duyệt đối với các thay đổi vùng chứa

Mã của bên thứ nhất thường trải qua quá trình xem xét và kiểm thử trước khi triển khai – hãy xử lý các thẻ của bạn như nhau. Thêm tính năng xác minh 2 bước (yêu cầu quản trị viên phê duyệt các thay đổi về vùng chứa) là một cách để làm việc này. Ngoài ra, nếu không muốn yêu cầu xác minh hai bước nhưng vẫn muốn theo dõi các thay đổi, bạn có thể thiết lập thông báo vùng chứa để nhận thông báo qua email về các sự kiện vùng chứa mà bạn chọn.

Định kỳ kiểm tra việc sử dụng thẻ

Một trong những thách thức khi làm việc với thẻ là thẻ có xu hướng tích luỹ theo thời gian: thẻ được thêm vào nhưng hiếm khi bị xoá. Việc kiểm tra thẻ định kỳ là một cách để đảo ngược xu hướng này. Tần suất lý tưởng để thực hiện việc này sẽ phụ thuộc vào tần suất cập nhật thẻ trên trang web của bạn.

Việc gắn nhãn từng thẻ để chủ sở hữu có thể dễ dàng xác định xem ai là người thích ứng cho thẻ đó và có thể cho biết liệu thẻ đó có cần thiết hay không.

Khi kiểm tra thẻ, đừng quên dọn dẹp điều kiện kích hoạt và biến. Chúng cũng có thể dễ dàng là nguyên nhân gây ra các vấn đề về hiệu suất.

Để biết thêm thông tin, hãy xem phần Giữ quyền kiểm soát tập lệnh của bên thứ ba.