การหลีกเลี่ยงข้อผิดพลาดที่พบบ่อยในการติดตั้งใช้งาน
สถานการณ์ต่อไปนี้แสดงถึงข้อผิดพลาดที่พบบ่อยที่สุดบางส่วนเมื่อ
การนำ 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 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: อาศัยไวยากรณ์โค้ดที่ปรับให้ยากต่อการอ่าน
คำอธิบายกรณีการใช้งานระดับสูง |
หากคุณใช้ไวยากรณ์ที่แม่นยำของโค้ดไลบรารี 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 ใช้งานอาจเสียหายได้ทุกเมื่อ
เนื่องจากไม่ใช่ Use Case ที่รองรับ การเปลี่ยนแปลงช่วงเวลาในโครงสร้างภายในของ 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 ตัวอย่างที่ถูกต้อง
การจัดลำดับบางส่วนรวมถึง
-
กำหนดเปิดใช้โฆษณาแบบดิสเพลย์
- กำหนดการตั้งค่าระดับหน้าเว็บ
- กำหนดสล็อต
- enableServices()
- ช่องโฆษณา Display
-
Enable-Define-Display
- กำหนดการตั้งค่าระดับหน้าเว็บ
- enableServices()
- กําหนดสล็อต
- ช่องโฆษณา Display
|
สถานการณ์ 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 โหลด ในตัวอย่างก่อนหน้านี้ การดำเนินการนี้จะเปลี่ยนลักษณะการทํางานของคําสั่งที่อยู่ในคิว
เพื่อหลีกเลี่ยงปัญหาใดๆ ควรเขียนโค้ดโดยไม่มีข้อสันนิษฐานว่าทำงานได้
ที่อยู่ในคิวคำสั่งจะทำงานทันที และควรทำด้วยความระมัดระวัง
เกี่ยวกับกฎขอบเขตของ 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); }
|
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2024-10-14 UTC
[null,null,["อัปเดตล่าสุด 2024-10-14 UTC"],[[["Avoid unofficial copies of GPT JavaScript libraries, always access them from an official Google domain."],["Utilize `googletag.cmd.push` to queue functions and ensure they execute when GPT is ready, rather than relying on script tag listeners or checking the `googletag` object directly."],["Strictly adhere to the documented GPT API and refrain from relying on obfuscated code or overwriting any GPT functions or variables to prevent breakages."],["Maintain the correct order of GPT calls, like defining page-level settings and slots before enabling services and displaying ads, to avoid race conditions."],["Be mindful of JavaScript variable scoping and closures, especially when using `googletag.cmd.push`, to prevent unexpected behavior due to delayed execution."],["Ensure slot containers are positioned correctly in the DOM before calling `display` to avoid reflows and unpredictable rendering."],["Refrain from overwriting browser APIs, as it can negatively impact the functionality of third-party scripts like GPT."]]],["The content outlines unsupported methods of implementing GPT (Google Publisher Tag) that may cause unpredictable ad serving issues. Key actions to avoid include: using unofficial GPT JavaScript libraries, relying on script tag listeners or the `googletag` object to determine API readiness, using obfuscated code syntax, overwriting GPT functions/variables, mis-ordering GPT calls, and misusing JavaScript variable scoping. Correct implementations involve using Google-hosted libraries, leveraging `googletag.cmd.push`, respecting API timing, and modifying the DOM before calling display. Also, avoid overwriting browser APIs.\n"]]