คำแนะนำต่อไปนี้อธิบายเพิ่มเติมเกี่ยวกับการแสดงโฆษณาทดสอบ และแนะนำแนวคิดพื้นฐานเพิ่มเติมในการใช้ประโยชน์สูงสุดจากไลบรารีแท็กผู้เผยแพร่โฆษณาผ่าน 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
ตัวอย่างที่สมบูรณ์
ต่อไปนี้เป็นซอร์สโค้ดแบบเต็มของหน้าตัวอย่างที่คู่มือนี้อ้างอิงอยู่ นอกจากนี้ คุณยังดูการสาธิตเชิงโต้ตอบของหน้านี้ได้ด้วย