ต่อไปนี้เป็นตัวอย่างโค้ดที่สมบูรณ์สำหรับการสร้างแท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT) เพื่อใช้งานในเดสก์ท็อปและอุปกรณ์เคลื่อนที่ ใช้เครื่องมือสร้างแท็ก Google เพื่อสร้างแท็กโดยอัตโนมัติ
นักพัฒนาแอปและผู้ที่ต้องการติดตั้งใช้งาน GPT ขั้นสูง โปรดดูเอกสารอ้างอิง API และตัวอย่างการติดตั้งใช้งาน (เช่น การโหลดแบบ Lazy Loading)
โค้ดตัวอย่างแท็กผู้เผยแพร่โฆษณาผ่าน Google
โค้ดที่ติดตั้งใช้งานสำหรับ GPT มีอยู่ด้วยกัน 2 ส่วน ได้แก่
- การกำหนดค่า GPT จะอยู่ใน
<head>ของหน้าเว็บ - การเรียกใช้ช่องโฆษณาที่เจาะจงแต่ละช่องจะอยู่ในส่วนที่เกี่ยวข้องของ
<body>
ตัวอย่างนี้มีวัตถุประสงค์เพื่อให้ข้อมูลเท่านั้น และเราขอแนะนำให้นักพัฒนาซอฟต์แวร์ติดตั้งโค้ดดังกล่าวในเว็บไซต์ของคุณ
การกำหนดค่า GPT
ตัวอย่างโค้ดต่อไปนี้ ซึ่งรวมถึงการเรียกใช้ไลบรารี GPT JavaScript, การกำหนดช่องโฆษณา, การกำหนดเป้าหมายคีย์-ค่า และอื่นๆ
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
บรรทัดที่ 3-6: โหลดไลบรารี GPT แบบไม่พร้อมกันที่ Ad Manager ใช้งานโดยใช้ SSL/HTTPS ซึ่งเป็นจุดที่สร้างคิวคำสั่งที่จัดการฟังก์ชันต่างๆ (โดยทั่วไปเป็นการเรียกโฆษณา) แบบไม่พร้อมกัน คุณไม่จำเป็นต้องแก้ไขโค้ดในส่วนนี้ |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
บรรทัดที่ 9:
|
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
12 |
googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()) |
14 |
.setTargeting("gender", "male") |
| 15 | .setTargeting("age", "20-30"); |
|
บรรทัดที่ 11, 14 และ 15: ตั้งค่าการกำหนดเป้าหมายคีย์-ค่าระดับช่องโฆษณาด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าการกำหนดเป้าหมายและขนาดด้วย GPT |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
บรรทัดที่ 16: เมื่อกำหนดค่าการกำหนดเป้าหมายโดยใช้คีย์-ค่าระดับหน้า ช่องโฆษณาทั้งหมดจะสืบทอดการกำหนดเป้าหมายนี้ เช่นเดียวกับคีย์-ค่าระดับช่องโฆษณา คุณจะเชื่อมโยงค่าหลายค่ากับคีย์เดียวได้ดังนี้ ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
บรรทัดที่ 17: |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
บรรทัดที่ 23 (ไม่บังคับ): ถ้ามีการใช้แท็กหลายขนาด เราขอแนะนำว่าไม่ต้องใส่บรรทัดนี้ (ในกรณีนี้ ขนาดขององค์ประกอบจะนำขนาดของครีเอทีฟโฆษณาที่เลือกเมื่อแสดงผลไปใช้) หรือปรับขนาดทั้งสองให้ใหญ่เพียงพอที่จะใส่ครีเอทีฟโฆษณาที่มีสิทธิ์ที่ใหญ่ที่สุดได้ สำหรับแท็กโฆษณาที่มีขนาดเดียว ให้ใช้บรรทัดนี้เพื่อขยายองค์ประกอบของคอนเทนเนอร์จนกว่าครีเอทีฟโฆษณาจะโหลดขึ้นมา ซึ่งจะช่วยให้องค์ประกอบอื่นๆ ของหน้าเว็บไม่เลื่อนเมื่อครีเอทีฟโฆษณาแสดงผล |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
บรรทัดที่ 8, 25 และ 32: จะมีการเพิ่มการเรียกใช้ฟังก์ชันลงในคิวคำสั่งที่จะประมวลผลแบบไม่พร้อมกันเมื่อโหลดหน้าเว็บ |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
บรรทัดที่ 9, 12, 23, 26, 30 และ 33: แม้ว่าจะมีการใช้ตัวเลขสุ่มที่นี่ แต่ก็ไม่ใช่วิธีที่ GPT จะระบุคำขอโฆษณาได้อย่างไม่ซ้ำกัน โดยวิธีที่ใช้จะดำเนินการเบื้องหลังด้วยไลบรารี GPT นอกจากนี้ ชื่อในหน้าต่างๆ อาจเหมือนกันได้ตราบที่ชื่อ div เดียวกันไม่ได้มีหลายอินสแตนซ์ในหน้าเดียวกัน ดูข้อมูลเพิ่มเติมเกี่ยวกับโครงสร้างพื้นที่โฆษณา Ad Manager, ลำดับชั้นของหน่วยโฆษณา และวิธีที่หน่วยโฆษณาสืบทอดการกำหนดเป้าหมายในภาพรวมของพื้นที่โฆษณา |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
การตั้งค่าส่วนกลาง หากคุณไม่สามารถแก้ไขส่วนหัวของหน้าเว็บ
คุณใช้ GPT ได้โดยไม่ต้องแก้ไข <header> ของเว็บไซต์
ตัวเลือกที่ 1: GPT แบบในบรรทัด
ใช้แท็กในบรรทัดแทนการใช้ส่วนหัวของหน้าในการกำหนดบริเวณที่หน่วยโฆษณาปรากฏบนหน้า เมื่อใช้แท็กในบรรทัด การกำหนดและคำขอช่องโฆษณา GPT ทั้งหมด ซึ่งรวมถึงการโหลดไลบรารี GPT จะอยู่ในแท็ก <script> แท็กเดียว
เนื่องจากแท็กโฆษณาใช้ไลบรารี GPT JavaScript คุณจึงต้องใส่โค้ดที่โหลดไลบรารีก่อนที่จะใส่โค้ดแท็กโฆษณา
ตัวอย่าง GPT ในบรรทัดเหล่านี้ไม่รองรับ SRA
เรียกไลบรารี JavaScript ของ GPT
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
ตัวอย่างแท็กโฆษณาในบรรทัด
<div id="div-gpt-ad-1234567891234-0">
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
.addService(googletag.pubads())
.setTargeting("Gender", "Male");
googletag.enableServices();
googletag.display('div-gpt-ad-1234567891234-0');
});
</script>
</div>
ตัวเลือกที่ 2: ใส่โค้ดทั้งหมดในเนื้อหาของหน้าเว็บ
ใช้การใช้งาน GPT แบบทั่วไป แต่ให้ใส่การกำหนดช่องโฆษณาในส่วน body ของ HTML แทนที่จะใส่ที่ส่วนหัว
ต้องมีการเรียกใช้โค้ดที่โหลดไลบรารีและกำหนดช่องโฆษณาก่อนที่คุณจะขอโฆษณาสำหรับช่องเหล่านั้น เนื่องจากไม่มีการแบ่งกลุ่มโค้ดเป็นส่วน head และส่วน body ของหน้า คุณจะต้องจัดการลำดับของโค้ด วิธีนี้มีความซับซ้อนมากกว่า แต่คุณจะมีความยืดหยุ่นเพราะสามารถใช้ SRA ได้
สร้างคำขอโฆษณาแบบไร้แท็กโดยไม่ใช้ JavaScript
คุณใช้คำขอโฆษณาแบบไร้แท็กแทนแท็กโฆษณาเพื่อขอโค้ดครีเอทีฟโฆษณาดิบที่มีการดูแลการแสดงใน Ad Manager ได้ โดยทั่วไปจะมีการใช้คำขอโฆษณาแบบไร้แท็กเมื่อต้องมีการแยกวิเคราะห์และการแสดงที่กำหนดเอง เช่น Set-top box หรือสภาพแวดล้อมอื่นๆ ที่ไม่มีการติดแท็กของ Google หรือการรองรับ SDK