การหลีกเลี่ยงข้อผิดพลาดที่พบบ่อยในการติดตั้งใช้งาน

สถานการณ์ต่อไปนี้แสดงข้อผิดพลาดที่พบบ่อยที่สุดบางส่วนที่พบเมื่อติดตั้งใช้งาน GPT แม้ว่าการติดตั้งแบบดังกล่าวจะดูเหมือนว่าจะทำงานได้ดีกับ ของ GPT แล้ว จึงไม่รับประกันว่าจะมีการดำเนินการดังกล่าวต่อไปในอนาคต ใน กรณีที่ร้ายแรงที่สุด การติดตั้งเหล่านี้อาจทำให้การแสดงโฆษณาขัดข้องโดยที่คาดเดาไม่ได้ โดยถือว่าเป็นการใช้งานที่ไม่รองรับ

แต่ละสถานการณ์จะมีแนวทางที่แนะนําในการแก้ไขปัญหาที่แสดง

โปรดทราบว่ารายการนี้ไม่ได้แสดงถึงปัญหาที่อาจเกิดขึ้นทั้งหมด แต่คาดว่าจะเป็นคำแนะนำที่เป็นประโยชน์ในการระบุประเภทของปัญหาที่อาจต้อง ที่ควรทราบ

นอกจากนี้ คุณอาจต้องค้นหาตำแหน่งทั้งหมดในเว็บไซต์ที่จำเป็นต้องเปลี่ยนแปลงดังกล่าว ทั้งนี้ขึ้นอยู่กับการติดตั้งใช้งาน

ข้อผิดพลาดทั่วไป

สถานการณ์ 1: การใช้สำเนาที่ไม่เป็นทางการของไลบรารี JavaScript ของ GPT

คำอธิบายกรณีการใช้งานระดับสูง โฮสติ้ง gpt.js, pubads_impl.js หรือไลบรารีที่โหลดจากเซิร์ฟเวอร์ของคุณเอง หรือโหลดไฟล์เหล่านี้จากแหล่งที่มาที่ไม่เป็นทางการ
ตัวอย่างข้อมูลโค้ดที่มีข้อผิดพลาด 
// Incorrect: Accessing these files from an unofficial source
<script async src="https://www.example.com/tag/js/gpt.js"></script>
วิธีที่แนะนำในการแก้ไขข้อผิดพลาด 
// 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>

สถานการณ์ที่ 2: การใช้ Listener แท็กสคริปต์ gpt.js

คำอธิบายกรณีการใช้งานระดับสูง สมมติว่า GPT API พร้อมสำหรับการเรียกเมื่อไฟล์ JavaScript gpt.js โหลดไม่ถูกต้อง เนื่องจากบางส่วนของ API มาจาก pubads_impl.js การใช้ API ไม่ว่าในลักษณะใด (รวมถึงเฟรมเวิร์ก) จากภายใน Listener เหตุการณ์ที่แนบมากับแท็กสคริปต์จึงไม่ถูกต้อง
ตัวอย่างข้อมูลโค้ดที่มีข้อผิดพลาด 
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);
วิธีที่แนะนำในการแก้ไขข้อผิดพลาด 
// 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);
คำอธิบาย / คำอธิบายการแก้ไข googletag.cmd เก็บรักษารายการคำสั่งที่จะทำงานทันทีที่ GPT พร้อมแล้ว วิธีนี้เป็นวิธีที่ถูกต้องเพื่อให้แน่ใจว่าระบบจะเรียกใช้การเรียกกลับเมื่อ GPT โหลดแล้ว

สถานการณ์ที่ 3: ตรวจสอบออบเจ็กต์ googletag เพื่อดูว่า GPT พร้อมหรือยัง

คำอธิบายกรณีการใช้งานระดับสูง เนื่องจาก GPT API อาจยังไม่พร้อมใช้งานเมื่อโหลดไฟล์ JavaScript gpt.js หรือเมื่อกำหนดออบเจ็กต์ googletag การตรวจสอบออบเจ็กต์ดังกล่าวเพื่อดูว่า GPT API พร้อมใช้งานหรือไม่จึงไม่น่าเชื่อถือ
ตัวอย่างข้อมูลโค้ดที่มีข้อผิดพลาด 
// Incorrect: Relying on the presence of the googletag object
// as a check for the GPT API.
if (typeof googletag != 'undefined') {
 functionProcessingGPT();
}
วิธีที่แนะนำในการแก้ไขข้อผิดพลาด 
// Correct: Relying on googletag.apiReady as a check for the GPT API.
if (window.googletag && googletag.apiReady) {
 functionProcessingGPT();
}
คำอธิบาย/คำอธิบายการแก้ไข GPT จะป้อนข้อมูลค่าสถานะบูลีน googletag.apiReady ทันทีที่ API พร้อมที่จะถูกเรียกเพื่อให้คุณยืนยันได้อย่างน่าเชื่อถือ

สถานการณ์ที่ 4: การใช้ไวยากรณ์โค้ดที่ปรับให้ยากต่อการอ่าน (Obfuscate)

คำอธิบายกรณีการใช้งานระดับสูง หากคุณใช้ไวยากรณ์ที่แม่นยำของโค้ดไลบรารี GPT ที่ผ่านการ Minify คุณจะพบปัญหาการหยุดทำงานเกือบแน่นอน โปรดจำกัดการใช้งานไว้เฉพาะ API ที่ระบุไว้ในคู่มืออ้างอิง API เนื่องจากเราเปลี่ยนแปลงการทํางานภายในของ GPT อยู่อย่างต่อเนื่องเพื่อปรับปรุงอย่างต่อเนื่อง
เช่น ข้อกําหนดทั่วไปคือการตรวจหาเมื่อ PubAdsService โหลดเสร็จแล้วเพื่อเรียกใช้ refresh()
ตัวอย่างข้อมูลโค้ดที่มีข้อผิดพลาด 
// Incorrect: Relying on an obfuscated property.
if (googletag.pubads().a != null) {
 functionProcessingGPT();
}
วิธีที่แนะนำในการแก้ไขข้อผิดพลาด 
// Correct: Relying on public GPT API methods
// (i.e. googletag.pubadsReady in this case).
if(window.googletag && googletag.pubadsReady) {
 functionProcessingGPT();
}
คำอธิบาย / คำอธิบายการแก้ไข ซึ่งเชื่อถือได้เพียง API สาธารณะเท่านั้น ในกรณีที่ตรวจพบว่า PubAdsService ที่โหลดอย่างสมบูรณ์เรามีค่าบูลีน googletag.pubadsReady

สถานการณ์ที่ 5: การเขียนทับฟังก์ชันหรือตัวแปรของ GPT

คำอธิบายกรณีการใช้งานระดับสูง กรณีการใช้งานที่อิงตามการเขียนทับฟังก์ชันหรือตัวแปรที่ GPT ใช้อาจใช้งานไม่ได้เมื่อใดก็ได้เนื่องจากกรณีการใช้งานนี้ไม่รองรับ การเปลี่ยนแปลงช่วงเวลาในโครงสร้างภายในของ GPT อาจทําให้ลักษณะการทํางานที่ไม่ถูกต้องประเภทนี้ปรากฏขึ้นเนื่องจากข้อบกพร่อง
ตัวอย่างข้อมูลโค้ดที่มีข้อผิดพลาด 
// Incorrect: Haphazardly overwriting a googletag.* property.
googletag.cmd = [];
วิธีที่แนะนำในการแก้ไขข้อผิดพลาด 
// Correct: Never overwrite googletag.* properties if they already exist.
// Always check before assigning to them.
googletag.cmd = googletag.cmd || [];

สถานการณ์ 6: ลําดับการเรียกใช้ GPT ไม่ถูกต้อง

คำอธิบายกรณีการใช้งานระดับสูง สภาวะการแข่งขันอาจทำให้เกิดความแตกแยกเมื่อโครงสร้างพื้นฐานของ GPT เปลี่ยนแปลงไป ไม่ถูกต้อง ชุดคำสั่งที่ใช้งานได้จริงเนื่องจากช่วงเวลาที่เฉพาะเจาะจงในการดำเนินการ อาจไม่สามารถให้บริการได้ในอนาคต
ตัวอย่างข้อมูลโค้ดที่มีข้อผิดพลาด 
// Incorrect: Setting page-level key-value targeting after calling
// googletag.enableServices().
googletag.enableServices();
googletag.defineSlot(...);
googletag.pubads().setTargeting(e, a);
วิธีที่แนะนำในการแก้ไขข้อผิดพลาด 
// Correct: Setting page-level key-value targeting before calling
// googletag.enableServices().
googletag.pubads().setTargeting(e, a);
googletag.defineSlot(...);
googletag.enableServices();
คำอธิบาย/คำอธิบายการแก้ไข หลีกเลี่ยงสภาวะการแข่งขันโดยคุณต้องทำตามช่วงเวลาปกติของ GPT ตัวอย่างการจัดลําดับบางส่วนที่ถูกต้อง ได้แก่
  • Define-Enable-Display
    1. กำหนดการตั้งค่าระดับหน้า
    2. กําหนดสล็อต
    3. enableServices()
    4. ช่องแสดงผล
  • เปิดใช้-นิยามการแสดงผล
    1. กำหนดการตั้งค่าระดับหน้าเว็บ
    2. enableServices()
    3. กําหนดสล็อต
    4. ช่องแสดงผล

สถานการณ์ที่ 7: การใช้การปิดและขอบเขตตัวแปร JavaScript ในทางที่ผิด

คำอธิบายกรณีการใช้งานระดับสูง สมมติฐานที่ไม่ถูกต้องเกี่ยวกับขอบเขตตัวแปร JavaScript และค่าของตัวแปรที่บันทึกไว้ในฟังก์ชันที่ส่งไปยัง googletag.cmd.push
ตัวอย่างข้อมูลโค้ดที่มีข้อผิดพลาด 
// 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]);
  })
 }
}
วิธีที่แนะนำในการแก้ไขข้อผิดพลาด 
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]);
  }
 }
)
คำอธิบาย / คำอธิบายการแก้ไข

ใน JavaScript การปิดตัวแปรจะจับตัวแปรตามการอ้างอิงแทนค่า ซึ่งหมายความว่าหากมีการกําหนดค่าตัวแปรใหม่ ระบบจะใช้ค่าใหม่เมื่อเรียกใช้ฟังก์ชันการปิดที่บันทึกไว้ในภายหลัง ดังนั้นลักษณะการทำงานของโค้ดในการปิด อาจเปลี่ยนแปลงโดยขึ้นอยู่กับว่าการเรียกกลับนั้นดำเนินการโดยทันทีหรือล่าช้า

ในกรณีของ GPT ที่โหลดแบบไม่พร้อมกัน ขึ้นอยู่กับว่า GPT โหลด Callback ในคิวคำสั่งอาจดำเนินการทันทีหรือไม่ ในตัวอย่างก่อนหน้านี้ การดำเนินการนี้จะเปลี่ยนลักษณะการทํางานของคําสั่งที่อยู่ในคิว

เพื่อหลีกเลี่ยงปัญหาใดๆ ควรเขียนโค้ดโดยไม่มีข้อสันนิษฐานว่าทำงานได้ ที่อยู่ในคิวคำสั่งจะทำงานทันที และควรทำด้วยความระมัดระวัง เกี่ยวกับกฎขอบเขตของ JavaScript

สถานการณ์ 8: การย้ายคอนเทนเนอร์ช่องภายใน DOM หลังจากเรียกใช้การแสดงผล

คำอธิบายกรณีการใช้งานระดับสูง การย้ายหรือแทรกคอนเทนเนอร์ช่องใน DOM หลังจากเรียกใช้การแสดงผลอาจทําให้เกิดการเรียงบรรทัดใหม่ที่ไม่พึงประสงค์และลักษณะการทํางานที่คาดเดาไม่ได้ใน GPT
ตัวอย่างข้อมูลโค้ดที่มีข้อผิดพลาด 
// 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"));
วิธีแก้ไขข้อผิดพลาดที่แนะนำ 
// 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");

สถานการณ์ที่ 9: การเขียนทับ API ของเบราว์เซอร์

คำอธิบายกรณีการใช้งานระดับสูง GPT ไม่รองรับการเขียนทับ (หรือที่เรียกว่าการแพตช์ด้วย Monkey, การเติมเต็ม) API ของเบราว์เซอร์ แนวทางนี้อาจทำให้สคริปต์ของบุคคลที่สาม เช่น GPT ใช้งานไม่ได้ในลักษณะที่ไม่คาดคิด
ตัวอย่างข้อมูลโค้ดที่มีข้อผิดพลาด 
// Incorrect: Overwriting window.fetch
const { fetch: originalFetch } = window;
window.fetch = (...args) => {
 console.log('Fetching!');
 return originalFetch(resource, config);
};
วิธีแก้ไขข้อผิดพลาดที่แนะนำ 
// 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);
}
ก่อนหน้า
ตรวจสอบประสิทธิภาพ