สถานการณ์ต่อไปนี้แสดงถึงข้อผิดพลาดที่พบบ่อยที่สุดบางส่วนเมื่อติดตั้งใช้งาน GPT แม้ว่าการใช้งานดังกล่าวอาจดูเหมือนว่าทำงานได้ดีกับ GPT เวอร์ชันปัจจุบัน แต่ไม่มีการรับประกันว่าจะเป็นเช่นนั้นต่อไปในอนาคต ในกรณีร้ายแรงที่สุด การติดตั้งใช้งานเหล่านี้อาจทำให้การแสดงโฆษณาหยุดชะงักในแบบที่คาดเดาไม่ได้ ถือว่าเป็นการติดตั้งใช้งานที่ไม่รองรับ
แต่ละสถานการณ์จะมีแนวทางที่แนะนำในการแก้ไขปัญหาที่แสดง
โปรดทราบว่ารายการนี้ไม่ได้แสดงรายการปัญหาที่อาจเกิดขึ้นทั้งหมด แต่เป็นคู่มือที่มีประโยชน์ในการระบุประเภทปัญหาที่อาจจำเป็นต้องได้รับการแก้ไข
นอกจากนี้ คุณอาจต้องมองหาตำแหน่งทั้งหมดที่ต้องมีการเปลี่ยนแปลงดังกล่าวภายในเว็บไซต์ ทั้งนี้ขึ้นอยู่กับการติดตั้งใช้งานของคุณ
ข้อผิดพลาดทั่วไป
สถานการณ์ที่ 1: การใช้สำเนาไลบรารี GPT JavaScript อย่างไม่เป็นทางการ
คำอธิบายกรณีการใช้งานระดับสูง | การโฮสต์ 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 async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> // Also correct, if using Limited Ads <script async src="https://pagead2.googlesyndication.com/tag/js/gpt.js"></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: การใช้ไวยากรณ์โค้ดที่สร้างความสับสน
คำอธิบายกรณีการใช้งานระดับสูง |
หากต้องใช้ไวยากรณ์ที่ชัดเจนของโค้ดไลบรารี GPT ที่มีการลดขนาด คุณจะเจอกับข้อผิดพลาดแทบจะอย่างแน่นอน โปรดจำกัดการใช้ 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
คำอธิบายกรณีการใช้งานระดับสูง | Use Case ที่อิงตามการเขียนทับฟังก์ชันหรือตัวแปรที่ 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 ตัวอย่างการเรียงลำดับบางส่วนที่ถูกต้องมีดังนี้
|
สถานการณ์ที่ 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 โหลดโค้ดเรียกกลับในคิวคำสั่งได้รวดเร็วเพียงใด โดยขึ้นอยู่กับความเร็วที่ GPT อาจโหลดทันทีหรือไม่ ในตัวอย่างด้านบนจะเป็นการเปลี่ยนลักษณะการทำงานของคำสั่งที่อยู่ในคิว เพื่อหลีกเลี่ยงปัญหาใดๆ ควรเขียนโค้ดโดยไม่มีข้อสันนิษฐานว่าฟังก์ชันที่วางไว้ในคิวคำสั่งจะทำงานทันที และควรใช้ความระมัดระวังเกี่ยวกับกฎขอบเขตของ JavaScript |
สถานการณ์ที่ 8: การย้ายคอนเทนเนอร์ของช่องภายใน DOM หลังจากเรียกใช้ Display
คำอธิบายกรณีการใช้งานระดับสูง | การย้ายหรือการแทรกคอนเทนเนอร์ของช่องใน 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"); |