ตัวอย่างโค้ดแท็กผู้เผยแพร่โฆษณาผ่าน Google

ต่อไปนี้เป็นตัวอย่างโค้ดที่สมบูรณ์สำหรับการสร้างแท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT) เพื่อใช้งานในเดสก์ท็อปและอุปกรณ์เคลื่อนที่ ใช้เครื่องมือสร้างแท็ก Google เพื่อสร้างแท็กโดยอัตโนมัติ

นักพัฒนาแอปและผู้ที่ต้องการติดตั้งใช้งาน GPT ขั้นสูง โปรดดูเอกสารอ้างอิง API และตัวอย่างการติดตั้งใช้งาน (เช่น การโหลดแบบ Lazy Loading)

ดูตัวอย่าง GPT ขั้นสูง

โค้ดตัวอย่างแท็กผู้เผยแพร่โฆษณาผ่าน 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: `"/1234/travel/asia"` ระบุรหัสเครือข่าย (`1234`) และหน่วยโฆษณาเป้าหมาย (`travel/asia`) ดูรหัสเครือข่ายได้ใน Ad Manager ในส่วนผู้ดูแลระบบ การตั้งค่าส่วนกลาง รหัสเครือข่าย `[728, 90]` ตั้งค่าขนาดโฆษณาของช่องโฆษณา ซึ่งระบุขนาดหลายขนาดโดยใช้ไวยากรณ์ `[[width1, height1], [width2, height2], [width3, height3]]` เชื่อมโยงขนาดทั้งหมดที่ระบุไว้ที่นี่กับหน่วยโฆษณาเป้าหมาย ซึ่งจะช่วยให้คุณปรับรายการให้เหลือน้อยลงได้ตามช่องที่เฉพาะเจาะจง เมื่อใช้ช่องโฆษณาหลายขนาด โปรดประกาศขนาดของช่องในลำดับเดียวกันกับที่แสดงใน Ad Manager ดูข้อมูลเพิ่มเติมเกี่ยวกับคำจำกัดความของช่องและการเรียงตามลำดับ
`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: ตั้งค่าการกำหนดเป้าหมายคีย์-ค่าระดับช่องโฆษณาด้วย `.setTargeting()` คุณสามารถเชื่อมโยงค่าหลายค่ากับคีย์เดียวได้เหมือนในตัวอย่างแรก ดังนี้ `("key", ["value1", "value2", "value3"])` หากต้องการกำหนดเป้าหมายหลายคีย์ ให้เรียกใช้ฟังก์ชันหลายครั้งตามที่แสดงในกรณีที่ 2 ดังนี้ (`gender=male` และ `age=20-30`) ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าการกำหนดเป้าหมายและขนาดด้วย GPT
16	`googletag.pubads().setTargeting("topic","basketball");`
บรรทัดที่ 16: `googletag.pubads().setTargeting("topic","basketball");` ตั้งค่าการกำหนดเป้าหมายคีย์-ค่าระดับหน้า เมื่อกำหนดค่าการกำหนดเป้าหมายโดยใช้คีย์-ค่าระดับหน้า ช่องโฆษณาทั้งหมดจะสืบทอดการกำหนดเป้าหมายนี้ เช่นเดียวกับคีย์-ค่าระดับช่องโฆษณา คุณจะเชื่อมโยงค่าหลายค่ากับคีย์เดียวได้ดังนี้ (`"key", ["value1", "value2", "value3"]`)
17	`googletag.pubads().enableSingleRequest();`
บรรทัดที่ 17: `googletag.pubads().enableSingleRequest();` enables สถาปัตยกรรมคำขอรวมครั้งเดียว (SRA) ใส่บรรทัดนี้เพื่อเรียกช่องใช้โฆษณาทั้งหมดในหน้าเว็บในการเรียกใช้ครั้งเดียว ซึ่งจะทำให้มั่นใจได้ว่าช่องโฆษณาทั้งหมดในหน้าจะได้รับการพิจารณาเมื่อประเมิน Roadblock และการยกเว้นโฆษณาของคู่แข่ง
18	`googletag.enableServices();`
19	`});`
`20`	`</script>`
`21`	`</head>`
`22`	`<body>`
`23`	`<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">`
บรรทัดที่ 23 (ไม่บังคับ): `style="width: 728px; height: 90px"` คือขนาดเริ่มต้นที่ตั้งค่าไว้ใน div ที่จองพื้นที่ก่อนครีเอทีฟโฆษณาจะแสดง ถ้ามีการใช้แท็กหลายขนาด เราขอแนะนำว่าไม่ต้องใส่บรรทัดนี้ (ในกรณีนี้ ขนาดขององค์ประกอบจะนำขนาดของครีเอทีฟโฆษณาที่เลือกเมื่อแสดงผลไปใช้) หรือปรับขนาดทั้งสองให้ใหญ่เพียงพอที่จะใส่ครีเอทีฟโฆษณาที่มีสิทธิ์ที่ใหญ่ที่สุดได้ สำหรับแท็กโฆษณาที่มีขนาดเดียว ให้ใช้บรรทัดนี้เพื่อขยายองค์ประกอบของคอนเทนเนอร์จนกว่าครีเอทีฟโฆษณาจะโหลดขึ้นมา ซึ่งจะช่วยให้องค์ประกอบอื่นๆ ของหน้าเว็บไม่เลื่อนเมื่อครีเอทีฟโฆษณาแสดงผล
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: `"div-gpt-ad-123456789-0"` คือวิธีที่เราจับคู่ช่องโฆษณาที่ระบุในส่วน head กับช่องโฆษณาบนหน้าเว็บ (แท็ก div ในส่วน body ที่แสดงครีเอทีฟโฆษณา) โดยอาจตั้งชื่อเป็นอะไรก็ได้ตราบใดที่ตรงกัน แต่เครื่องมือสร้างแท็กของเราใช้รูปแบบการตั้งชื่อ `"div-gpt-ad-[เลขสุ่ม]-0"`, `"div-gpt-ad-[เลขสุ่ม]-1"` และต่อไปเรื่อยๆ โปรดใช้รหัส `<div>` เดียวกันทุกครั้งสำหรับตำแหน่งที่กำหนดในหน้า เนื่องจากจะมีการใช้รหัสดังกล่าวในการเพิ่มประสิทธิภาพในขอบเขตที่กว้างขวาง แม้ว่าจะมีการใช้ตัวเลขสุ่มที่นี่ แต่ก็ไม่ใช่วิธีที่ GPT จะระบุคำขอโฆษณาได้อย่างไม่ซ้ำกัน โดยวิธีที่ใช้จะดำเนินการเบื้องหลังด้วยไลบรารี GPT นอกจากนี้ ชื่อในหน้าต่างๆ อาจเหมือนกันได้ตราบที่ชื่อ div เดียวกันไม่ได้มีหลายอินสแตนซ์ในหน้าเดียวกัน ดูข้อมูลเพิ่มเติมเกี่ยวกับโครงสร้างพื้นที่โฆษณา Ad Manager, ลำดับชั้นของหน่วยโฆษณา และวิธีที่หน่วยโฆษณาสืบทอดการกำหนดเป้าหมายในภาพรวมของพื้นที่โฆษณา
34	`});`
35	`</script>`
36	`</div>`
37	`</body>`
38	`</html>`

ดูตัวอย่าง GPT ขั้นสูง

หากคุณไม่สามารถแก้ไขส่วนหัวของหน้าเว็บ

คุณใช้ GPT ได้โดยไม่ต้องแก้ไข <header> ของเว็บไซต์

ตัวเลือกที่ 1: GPT แบบในบรรทัด

ใช้แท็กในบรรทัดแทนการใช้ส่วนหัวของหน้าในการกำหนดบริเวณที่หน่วยโฆษณาปรากฏบนหน้า เมื่อใช้แท็กในบรรทัด การกำหนดและคำขอช่องโฆษณา GPT ทั้งหมด ซึ่งรวมถึงการโหลดไลบรารี GPT จะอยู่ในแท็ก <script> แท็กเดียว

เนื่องจากแท็กโฆษณาใช้ไลบรารี GPT JavaScript คุณจึงต้องใส่โค้ดที่โหลดไลบรารีก่อนที่จะใส่โค้ดแท็กโฆษณา

ตัวอย่าง GPT ในบรรทัด

ตัวอย่าง 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

ข้อมูลนี้มีประโยชน์ไหม

เราจะปรับปรุงได้อย่างไร