Tránh các lỗi triển khai phổ biến

Các trường hợp sau đây thể hiện một số lỗi thường gặp nhất khi triển khai GPT. Mặc dù các phương pháp triển khai như vậy có vẻ hoạt động tốt với phiên bản GPT hiện tại, tuy nhiên, điều đó không đảm bảo rằng các phương pháp này sẽ tiếp tục hoạt động tốt trong tương lai. Trong trường hợp cực đoan nhất, những cách triển khai này có thể khiến hoạt động phân phát quảng cáo bị gián đoạn theo cách không thể dự đoán. Đây được coi là các phương pháp triển khai không được hỗ trợ.

Mỗi tình huống bao gồm một phương pháp đề xuất để khắc phục vấn đề được nêu.

Xin lưu ý rằng danh sách này không phải là danh sách đầy đủ các vấn đề tiềm ẩn, nhưng dự kiến sẽ đóng vai trò là một hướng dẫn hữu ích để xác định các loại vấn đề có thể cần được giải quyết.

Hơn nữa, tuỳ thuộc vào việc triển khai của mình, bạn có thể cần phải tìm tất cả các vị trí mà bạn có thể cần những thay đổi như vậy trong trang web của bạn.

Lỗi thường gặp

Trường hợp 1: Sử dụng bản sao không chính thức của thư viện JavaScript GPT

Nội dung mô tả trường hợp sử dụng cấp cao Lưu trữ gpt.js, pubads_impl.js hoặc bất kỳ thư viện nào mà chúng tải qua máy chủ của riêng bạn hoặc tải các tệp này qua một nguồn không chính thức.
Ví dụ về đoạn mã có lỗi
// Incorrect: Accessing these files from an unofficial source
<script async src="https://www.example.com/tag/js/gpt.js"></script>
Cách khắc phục lỗi được đề xuất
// Correct: Access these files from a Google domain
<script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
// Also correct, if using Limited Ads
<script src="https://pagead2.googlesyndication.com/tag/js/gpt.js" async></script>

Trường hợp 2: Dựa vào trình nghe thẻ tập lệnh gpt.js

Mô tả trường hợp sử dụng cấp cao Giả sử rằng API GPT đã sẵn sàng để được gọi khi tệp JavaScript gpt.js được tải không chính xác vì một số phần của API được cung cấp bởi pubads_impl.js. Do đó, việc dựa vào API theo bất kỳ cách nào (bao gồm cả khung) từ trong trình nghe sự kiện được đính kèm vào thẻ tập lệnh là không chính xác.
Ví dụ về đoạn mã có lỗi
var tag = document.createElement('script');
tag.type = 'text/javascript';
tag.src = (useSSL ? 'https:' : 'http:') +
        '//www.googletagservices.com/tag/js/gpt.js';
// Incorrect: Attaching a callback to the script's onload event.
tag.onload = callback;
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(tag, node);
Các cách đề xuất để khắc phục lỗi
// Make sure that googletag.cmd exists.
window.googletag = window.googletag || {};
googletag.cmd = googletag.cmd || [];
// Correct: Queueing the callback on the command queue.
googletag.cmd.push(callback);
Giải thích / mô tả bản sửa lỗi googletag.cmd duy trì danh sách các lệnh sẽ chạy ngay khi GPT sẵn sàng. Đây là cách chính xác để đảm bảo lệnh gọi lại của bạn được chạy khi GPT đã tải.

Tình huống 3: Kiểm tra đối tượng googletag để biết liệu GPT đã sẵn sàng hay chưa

Mô tả trường hợp sử dụng cấp cao Vì API GPT có thể chưa sẵn sàng khi tệp JavaScript gpt.js được tải hoặc khi đối tượng googletag được xác định, sẽ kiểm tra đối tượng đó để xem liệu API GPT có sẵn không đáng tin cậy.
Ví dụ về đoạn mã có lỗi
// Incorrect: Relying on the presence of the googletag object
// as a check for the GPT API.
if (typeof googletag != 'undefined') {
 functionProcessingGPT();
}
Các cách đề xuất để khắc phục lỗi
// Correct: Relying on googletag.apiReady as a check for the GPT API.
if (window.googletag && googletag.apiReady) {
 functionProcessingGPT();
}
Giải thích / mô tả bản sửa lỗi GPT sẽ điền cờ boolean googletag.apiReady ngay khi API sẵn sàng được gọi để bạn có thể đưa ra các câu nhận định đáng tin cậy.

Tình huống 4: Dựa vào cú pháp mã bị làm rối

Mô tả trường hợp sử dụng cấp cao Nếu đang dựa vào cú pháp chính xác của mã thư viện GPT rút gọn, bạn gần như chắc chắn sẽ gặp phải sự cố. Vui lòng chỉ sử dụng API nêu trong Hướng dẫn tham khảo API, vì chúng tôi liên tục thay đổi hoạt động nội bộ của GPT nhằm cải tiến liên tục.
Ví dụ: một yêu cầu phổ biến là phát hiện thời điểm PubAdsService được tải đầy đủ trong để gọi refresh().
Ví dụ về đoạn mã có lỗi
// Incorrect: Relying on an obfuscated property.
if (googletag.pubads().a != null) {
 functionProcessingGPT();
}
Các cách đề xuất để khắc phục lỗi
// Correct: Relying on public GPT API methods
// (i.e. googletag.pubadsReady in this case).
if(window.googletag && googletag.pubadsReady) {
 functionProcessingGPT();
}
Giải thích / mô tả bản sửa lỗi Bạn chỉ có thể dựa vào API công khai. Trong trường hợp phát hiện xem PubAdsService có nên chúng ta có một giá trị boolean googletag.pubadsReady.

Trường hợp 5: Ghi đè bất kỳ hàm hoặc biến nào của GPT

Mô tả trường hợp sử dụng cấp cao Các trường hợp sử dụng dựa trên việc ghi đè bất kỳ hàm hoặc biến nào mà GPT sử dụng có thể bị hỏng bất cứ lúc nào vì đây không phải là trường hợp sử dụng được hỗ trợ. Việc thay đổi thời gian trong nội bộ GPT có thể hiển thị thông tin này loại hành vi không chính xác do bị hỏng.
Ví dụ về đoạn mã có lỗi
// Incorrect: Haphazardly overwriting a googletag.* property.
googletag.cmd = [];
Các cách đề xuất để khắc phục lỗi
// Correct: Never overwrite googletag.* properties if they already exist.
// Always check before assigning to them.
googletag.cmd = googletag.cmd || [];

Trường hợp 6: Thứ tự lệnh gọi GPT không đúng

Mô tả trường hợp sử dụng cấp cao Tình huống tương tranh có thể gây ra sự cố khi các thành phần bên trong GPT phát triển. Không chính xác một tập hợp câu lệnh theo thứ tự mà hoạt động được do thời gian cụ thể trong quá trình thực thi có thể không còn hoạt động trong tương lai.
Ví dụ về đoạn mã có lỗi
// Incorrect: Setting page-level key-value targeting after calling
// googletag.enableServices().
googletag.enableServices();
googletag.defineSlot(...);
googletag.pubads().setTargeting(e, a);
Các cách đề xuất để khắc phục lỗi
// Correct: Setting page-level key-value targeting before calling
// googletag.enableServices().
googletag.pubads().setTargeting(e, a);
googletag.defineSlot(...);
googletag.enableServices();
Giải thích/nội dung mô tả về bản sửa lỗi Tránh tình huống tương tranh bằng cách đảm bảo tuân thủ thời gian thông thường của GPT. Sau đây là ví dụ về các thứ tự một phần hợp lệ:
  • Define-Enable-Display
    1. Xác định chế độ cài đặt ở cấp trang
    2. Xác định khung giờ
    3. enableServices()
    4. Vùng hiển thị
  • Enable-Define-Display
    1. Xác định chế độ cài đặt ở cấp trang
    2. enableServices()
    3. Xác định khung giờ
    4. Vùng hiển thị

Tình huống 7: Sử dụng sai mục đích hàm đóng và phạm vi biến JavaScript

Nội dung mô tả trường hợp sử dụng cấp cao Giả định không chính xác về phạm vi biến JavaScript và giá trị của biến được ghi lại trong hàm được truyền đến googletag.cmd.push.
Ví dụ về đoạn mã có lỗi
// Incorrect: Variable x is declared outside the anonymous function
// but referenced within it.
for (var x = 0; x < slotCount; x++) {
 window.googletag.cmd.push(
  function(){
    // If GPT is not yet loaded, this code will be executed subsequently when
    // the command queue is processed. Every queued function will use the last value
    // assigned to x (most likely slotCount).
    // This is because the function closure captures the reference to x,
    // not the current value of x.
    window.googletag.display(slot[x]);
  })
 }
}
Các cách đề xuất để khắc phục lỗi
window.googletag.cmd.push(
 function(){
  // Correct: We both declare and reference x inside the context of the function.
  for (var x = 0; x < slotCount; x++){
   window.googletag.display(slot[x]);
  }
 }
)
Giải thích / mô tả bản sửa lỗi

Trong JavaScript, các hàm đóng thu thập biến theo tham chiếu thay vì theo giá trị. Điều này có nghĩa là nếu một biến được gán lại, thì giá trị mới của biến đó sẽ được sử dụng khi hàm đóng đã thu thập biến đó được thực thi sau này. Do đó, hành vi của mã trong hàm đóng có thể thay đổi tuỳ thuộc vào việc lệnh gọi lại được thực thi ngay lập tức hay bị trì hoãn.

Trong trường hợp GPT được tải không đồng bộ, tuỳ thuộc vào tốc độ tải của GPT, các lệnh gọi lại trên hàng đợi lệnh có thể thực thi ngay lập tức hoặc không. Trong phần trước ví dụ: điều này làm thay đổi hành vi của các lệnh được xếp hàng đợi.

Để tránh mọi vấn đề, bạn không nên giả định rằng các hàm được đặt vào hàng đợi lệnh sẽ thực thi ngay lập tức và bạn cần phải cẩn thận với các quy tắc về phạm vi của JavaScript.

Trường hợp 8: Di chuyển vùng chứa vị trí trong DOM sau khi gọi màn hình hiển thị

Mô tả trường hợp sử dụng cấp cao Việc di chuyển hoặc chèn vùng chứa vị trí trong DOM sau khi gọi màn hình có thể dẫn đến tình trạng chảy lại không mong muốn và hành vi không thể dự đoán trong GPT.
Ví dụ về đoạn mã có lỗi
// Incorrect: Moving slot containers after calling display
googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0");
googletag.enableServices();
googletag.display("div-gpt-ad-123456789-0");
...
// Inserting another element before the slot container, pushing the slot container down the page.
document.body.insertBefore(someOtherElement, document.getElementById("div-gpt-ad-123456789-0"));
Cách khắc phục lỗi được đề xuất
// Correct: Make any DOM order changes before calling display

document.body.insertBefore(someOtherElement, document.getElementById("div-gpt-ad-123456789-0"));
...
googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0");
googletag.enableServices();
googletag.display("div-gpt-ad-123456789-0");

Trường hợp 9: Ghi đè API trình duyệt

Nội dung mô tả trường hợp sử dụng cấp cao GPT không hỗ trợ API trình duyệt ghi đè (còn gọi là vá khỉ, polyfilling). Phương pháp này có thể làm hỏng các tập lệnh của bên thứ ba như GPT theo những cách không mong muốn.
Ví dụ về đoạn mã có lỗi
// Incorrect: Overwriting window.fetch
const { fetch: originalFetch } = window;
window.fetch = (...args) => {
 console.log('Fetching!');
 return originalFetch(resource, config);
};
Cách khắc phục lỗi được đề xuất
// Correct: Avoid making changes to browser APIs.
// If you need custom logic, consider leaving the browser API intact.
const myFetch = (...args) => {
  console.log('Fetching!');
  return window.fetch(...args);
}