คำแนะนำต่อไปนี้อธิบายเพิ่มเติมเกี่ยวกับการแสดงโฆษณาทดสอบ และแนะนำแนวคิดพื้นฐานเพิ่มเติมในการใช้ประโยชน์สูงสุดจากไลบรารีแท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT) แนวคิดเหล่านี้ประกอบด้วย:
- ขนาดโฆษณา
- การกำหนดเป้าหมายคีย์-ค่า
- สถาปัตยกรรมคำขอรวมครั้งเดียว
โหลดไลบรารี GPT
เริ่มด้วยการโหลดและเริ่มต้นไลบรารี GPT เพิ่มข้อมูลต่อไปนี้ลงใน <head>
ของเอกสาร HTML
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(() => { }); </script>
การดำเนินการนี้จะโหลดไลบรารี GPT และเริ่มต้นทั้งออบเจ็กต์ googletag
และ CommandArray
การเริ่มต้นออบเจ็กต์เหล่านี้ช่วยให้คุณเริ่มใช้อาร์เรย์คำสั่ง GPT ได้ทันที เพิ่มโค้ด JavaScript ที่ต่อท้ายเนื้อหาของฟังก์ชันว่างที่กำหนดไว้ในข้อมูลโค้ดนี้
กำหนดช่องโฆษณา
หลังจากโหลด GPT แล้ว คุณจะกำหนดช่องโฆษณาได้ ตัวอย่างต่อไปนี้ระบุช่องโฆษณา 3 ช่องที่มีรูปแบบโฆษณา ขนาด และตัวเลือกการกำหนดเป้าหมายแตกต่างกัน
ช่องโฆษณาที่มีขนาดคงที่
ต่อไปนี้คือช่องโฆษณาอย่างง่ายที่มีขนาดคงที่
// Define a fixed size ad slot, customized with key-value targeting. googletag .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad") .addService(googletag.pubads()) .setTargeting("color", "red") .setTargeting("position", "atf");
นอกเหนือจากเส้นทางหน่วยโฆษณา ขนาด และรหัสคอนเทนเนอร์ <div>
แล้ว ข้อมูลโค้ดนี้ยังระบุตัวเลือกการกำหนดเป้าหมายหลายรายการด้วย ตัวเลือกเหล่านี้จะจำกัดและแยกความแตกต่างของโฆษณาที่มีสิทธิ์แสดงผลในช่องนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดเป้าหมายคีย์-ค่า
ช่องโฆษณา Anchor
นี่คือช่องโฆษณา Anchor ที่อยู่ด้านล่างของวิวพอร์ต
// Define an anchor ad slot that sticks to the bottom of the viewport. const anchorSlot = googletag.defineOutOfPageSlot( "/6355419/Travel", googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR, ); // The slot will be null if the page or device does not support anchors. if (anchorSlot) { anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads()); document.getElementById("status").textContent = "Anchor ad is initialized. Scroll page to activate."; }
ช่องโฆษณา Anchor เป็นประเภทที่ไม่อยู่ในขอบเขตหน้า ซึ่งกำหนดโดยใช้เมธอด defineOutOfPageSlot
ไม่ใช่เมธอด defineSlot
ปกติ ดูข้อมูลเพิ่มเติมเกี่ยวกับครีเอทีฟโฆษณาที่ไม่อยู่ในขอบเขตหน้า
รูปแบบที่ไม่อยู่ในขอบเขตหน้ามักมีข้อจํากัดเกี่ยวกับประเภทของหน้าและอุปกรณ์ที่สามารถแสดงได้ เนื่องจากข้อจำกัดเหล่านี้ คุณจึงต้องยืนยันว่าได้กำหนดช่องโฆษณาสำเร็จก่อนที่จะโต้ตอบกับช่อง ดูรายละเอียดได้ในตัวอย่างแสดงโฆษณา Anchor
ช่องโฆษณาแบบไหล
ต่อไปนี้คือช่องโฆษณาแบบไหลสำหรับโฆษณาเนทีฟ
// Define a fluid ad slot that adjusts its height to fit the creative // content being displayed. googletag .defineSlot("/6355419/Travel", ["fluid"], "native-ad") .addService(googletag.pubads());
ช่องโฆษณาแบบไหลไม่มีขนาดคงที่ ช่องโฆษณาแบบไหลจะปรับให้พอดีกับ
เนื้อหาครีเอทีฟโฆษณาจากโฆษณาได้ คุณต้องกำหนดช่องโฆษณาแบบไหลด้วยตัวเลือกขนาด fluid
ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการปรับขนาดโฆษณาและการปรับขนาดที่ใช้ได้
กำหนดการตั้งค่าระดับหน้าเว็บ
ตัวเลือกการกำหนดค่า GPT บางตัวเลือกสามารถนำไปใช้ได้ทั่วโลก แทนที่จะใช้กับช่องโฆษณาเฉพาะ การตั้งค่าเหล่านี้เรียกว่าการตั้งค่าระดับหน้าเว็บ
ต่อไปนี้เป็นตัวอย่างวิธีกำหนดการตั้งค่าระดับหน้าเว็บ
// Configure page-level targeting. googletag.pubads().setTargeting("interests", "basketball"); // Enable SRA and services. googletag.pubads().enableSingleRequest(); googletag.enableServices();
ข้อมูลโค้ดนี้มี 3 สิ่งต่อไปนี้
- กำหนดค่าตัวเลือกการกำหนดเป้าหมายระดับหน้า ซึ่งระบบจะนำไปใช้กับช่องโฆษณาทุกช่องในหน้าเว็บ
- เปิดโหมดสถาปัตยกรรมคำขอรวมครั้งเดียว (SRA) ซึ่งจะรวมคำขอสำหรับช่องโฆษณาหลายช่องไว้เป็นคำขอโฆษณาเดียว SRA ช่วยเพิ่มประสิทธิภาพและจำเป็นต้องรับประกันว่าการยกเว้นโฆษณาของคู่แข่งและ Roadblock จะเคารพ เราจึงขอแนะนำให้คุณเปิด SRA เสมอ ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ SRA อย่างถูกต้อง
- เปิดใช้บริการที่แนบมากับช่องโฆษณาซึ่งอนุญาตให้สร้างคำขอโฆษณาได้
โฆษณา Display
สุดท้าย ให้เพิ่มข้อมูลโค้ดต่อไปนี้ลงใน <body>
ของหน้าเว็บ
<div class="page-content centered"> <div id="banner-ad" style="width: 728px; height: 90px"></div> <!-- If the following status is displayed when the page is rendered, try loading the page in a new window or on a different device. --> <h1 id="status">Anchor ads are not supported on this page.</h1> <!-- Spacer used for example purposes only. This positions the native ad container below the fold to encourage scrolling. --> <div class="spacer"></div> <div id="native-ad" class="native-slot"></div> </div> <script> googletag.cmd.push(() => { // Request and render all previously defined ad slots. googletag.display("banner-ad"); }); </script>
ซึ่งกำหนดคอนเทนเนอร์ช่องโฆษณา 2 ช่อง ได้แก่ banner-ad
และ native-ad
ค่า id
ของคอนเทนเนอร์เหล่านี้สอดคล้องกับค่าที่คุณระบุเมื่อกำหนดช่องโฆษณาก่อนหน้านี้ในตัวอย่างนี้
หลังจากกำหนดช่องโฆษณาทั้งหมดแล้ว ระบบจะเรียกใช้การแสดง banner-ad
เนื่องจากมีการเปิดใช้ SRA อยู่ คำขอการเรียกแบบ Display เดี่ยวนี้จะแสดงและแสดงช่องโฆษณาทั้งหมดที่กำหนดไว้จนถึงจุดนี้ หากจำเป็น คุณจะควบคุมการโหลดและรีเฟรชโฆษณา รวมถึงการทำงานแบบกลุ่มได้แม่นยำยิ่งขึ้นด้วย SRA
ตัวอย่างที่สมบูรณ์
ต่อไปนี้เป็นซอร์สโค้ดแบบเต็มของหน้าตัวอย่างที่คู่มือนี้อ้างอิงอยู่ นอกจากนี้ คุณยังดูการสาธิตเชิงโต้ตอบของหน้านี้ได้ด้วย