วิธีสร้างหน่วยโฆษณา DFP ที่ตอบสนอง
เผยแพร่แล้ว: 2016-01-22โพสต์นี้ได้รับการอัปเดตล่าสุดเมื่อวันที่ 31 สิงหาคม 2021
ดังนั้น คุณมีธีมที่ปรับเปลี่ยนตามอุปกรณ์ และตอนนี้คุณต้องการย้ายไปที่ Google Ad Manager (GAM) จาก AdSense สิ่งแรกที่คุณเห็นคือไม่มีหน่วยโฆษณาที่ตอบสนองเหมือนกับที่คุณพบใน AdSense อีกแล้ว
คำแนะนำในการสนับสนุนของ Google อาจยุ่งยากหรือซับซ้อนเล็กน้อย วันนี้ฉันจะแสดงให้คุณเห็นว่าคุณจะทำให้รหัส GAM ตอบสนองได้อย่างไรในไม่กี่ขั้นตอนง่ายๆ
การปรับแต่งโค้ด DFP เพื่อสร้างโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์ของ Google Ad Manager นั้นไม่ใช่เรื่องง่ายหากคุณไม่มีประสบการณ์ในการเขียนโค้ด การให้ผู้เชี่ยวชาญดำเนินการให้คุณอย่างถูกต้องในครั้งแรกจะเป็นการดีกว่าคุณไม่ต้องการเสี่ยงต่อการสูญเสียรายได้จากโฆษณา! หากคุณต้องการความช่วยเหลือ ติดต่อเราที่นี่ |
ก่อนที่เราจะเริ่มต้น ตรวจสอบให้แน่ใจว่าได้ทำสิ่งต่อไปนี้:
- ตั้งค่าสินค้าคงคลังของคุณ กำหนดค่าขนาดที่เกี่ยวข้องทั้งหมดต่อหน่วยโฆษณา อ่าน: แนวทางปฏิบัติที่ดีที่สุดสำหรับการรวม Adsense และ GAM
- ดูบทแนะนำเกี่ยวกับวิธีสร้างแท็ก Ad Manager หลายรายการได้ที่นี่: https://youtu.be/s74dMDzczyc
- ตอนนี้สร้างไฟล์ข้อความสองไฟล์แล้วบันทึก ใช้โปรแกรมแก้ไขข้อความที่ดี (ฉันชอบใช้ Notepad++ เพราะฟรีและใช้งานง่าย)
- ทำอันหนึ่งสำหรับส่วนหัวและอีกอันสำหรับแท็กร่างกาย
- บันทึกแท็กร่างกาย
- เปิดไฟล์ head.txt ที่คุณสร้าง
ทำให้แท็กส่วนหัวตอบสนอง
ขั้นตอนที่ 1: เปิด head.txt ใน Notepad ++ก่อนอื่นมาทำทีละขั้นตอน รหัสส่วนหัวของคุณจะมีลักษณะดังนี้:
<!– เริ่มแท็ก GPT –> <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script> <สคริปต์> window.googletag = window.googletag || {ซม.: []}; googletag.cmd.push (ฟังก์ชัน () { googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1') .addService(googletag.pubads()); googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2') .addService(googletag.pubads()); googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3') .addService(googletag.pubads()); googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </script> <!– สิ้นสุดแท็ก GPT –> |
ขั้นตอนที่ 2: ฉันได้เน้นโค้ดบางส่วนไว้ที่นั่น:
googletag.cmd.push (ฟังก์ชัน () {
คุณต้องเพิ่มโค้ดเล็กน้อยหลังบรรทัดที่ไฮไลต์ ด้านล่างนี้เป็นรหัสที่คุณต้องเพิ่ม วางอินสแตนซ์ (สำเนา) ของอินสแตนซ์ได้มากเท่าที่ต้องการตามเส้นทางที่คุณเลือกจากรายการต่อไปนี้:
- จำนวนแผนที่ขนาด คุณสามารถใช้แมปขนาดเดียวกันซ้ำกับหน่วยโฆษณาหลายหน่วยได้ หากมี
- จำนวนหน่วยโฆษณาที่คุณมี
- จำนวนหน่วยโฆษณาที่คุณต้องการให้ตอบสนอง
var mappingadunitname = googletag.sizeMapping() addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]) //เดสก์ทอป addSize([768, 0], [[300, 250], [728, 90], [1, 1]]) //ยาเม็ด addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]) //มือถือ เพิ่มขนาด([0, 0], [[320, 50], [1, 1]]) //อื่น สร้าง(); |
ขั้นตอนที่ 3: ฉันเน้นโค้ดอีกเล็กน้อยแล้วนี่คือชื่อของการแมปที่เราจะส่งต่อไปยังหน่วยโฆษณาในอีกไม่ช้า ฉันชอบที่จะทำให้มันเป็นแบบนี้mappingadunitname ดังนั้นสำหรับตัวอย่างของเราข้างต้น ฉันเลือกที่จะสร้างแผนที่ขนาด 1 หน่วยต่อหน่วย ซึ่งหมายความว่าเราต้องการอินสแตนซ์ 4 รายการและวางไว้หลังจาก:
googletag.cmd.push (ฟังก์ชัน () {
ขั้นตอนที่ 4: หลังจากเพิ่มการแมปแล้ว โค้ดส่วนหัวของคุณควรมีลักษณะดังนี้:
<!– เริ่มแท็ก GPT –> <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script> <สคริปต์> window.googletag = window.googletag || {ซม.: []}; googletag.cmd.push (ฟังก์ชัน () { var mappingheaderad1 = googletag.sizeMapping() addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //เดสก์ทอป addSize([768, 0], [[300, 250], [728, 90], [1, 1]]) //ยาเม็ด เพิ่มขนาด([0, 0], [1, 1]) //อื่น สร้าง(); var mappingcontentad1 = googletag.sizeMapping() addSize([992, 0], [[728, 280], [728, 90], [1, 1]]) //เดสก์ทอป addSize([768, 0], [[728, 280], [728, 90], [1, 1]]) //ยาเม็ด เพิ่มขนาด([320, 0], [[320, 50], [320, 100], [1, 1]]) //มือถือ เพิ่มขนาด([0, 0], [[320, 50], [1, 1]]) //อื่น สร้าง(); var mappingcontentad2 = googletag.sizeMapping() addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]) //เดสก์ทอป addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]) //ยาเม็ด addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]) //มือถือ เพิ่มขนาด([0, 0], [[300, 250], [1, 1]]) //อื่น สร้าง(); var mappingrightrail1 = googletag.sizeMapping() เพิ่มขนาด([992, 0], [[300, 250], [1, 1]]) //เดสก์ทอป addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]) //ยาเม็ด เพิ่มขนาด([0, 0], [1, 1]) //อื่น สร้าง(); googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1') .addService(googletag.pubads()); googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2') .addService(googletag.pubads()); googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3') .addService(googletag.pubads()); googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </script> <!– สิ้นสุดแท็ก GPT –> |
ขั้นตอนที่ 5: ตอนนี้เป็นขั้นตอนสุดท้าย: คุณต้องกำหนดหรือกำหนดการแมปขนาดสำหรับหน่วยโฆษณาแต่ละหน่วยลองคว้าที่นี่แล้วฉันจะแสดงให้คุณเห็นว่าจะเพิ่มอะไรและที่ไหน
googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .addService(googletag.pubads()); |
ขั้นตอนที่ 6: ตอนนี้คุณต้องเพิ่มโค้ดส่วนนี้ .defineSizeMapping(mappingadunitname)ระหว่างส่วนสีน้ำเงินและสีแดงของโค้ดด้านบน เช่นก่อนจุด
สิ่งสำคัญในที่นี้คือคำในวงเล็บเหลี่ยมควรตรงกับแผนผังขนาดที่คุณต้องการเพิ่มในหน่วยโฆษณา สำหรับตัวอย่างของเราที่นี่ RightRail_Ad1 ควรมีลักษณะดังนี้:
googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .defineSizeMapping(mappingrightrail1).addService(googletag.pubads()); |
ขั้นตอนที่ 7: การเพิ่มการแมปที่คล้ายกันสำหรับหน่วยโฆษณาอื่นๆ ทั้งหมดจะให้รหัสสุดท้ายแก่คุณ
<!– เริ่มแท็ก GPT –> <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script> <สคริปต์> window.googletag = window.googletag || {ซม.: []}; googletag.cmd.push (ฟังก์ชัน () { var mappingheaderad1 = googletag.sizeMapping() addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //เดสก์ทอป addSize([768, 0], [[300, 250], [728, 90], [1, 1]]) //ยาเม็ด เพิ่มขนาด([0, 0], [1, 1]) //อื่น สร้าง(); var mappingcontentad1 = googletag.sizeMapping() addSize([992, 0], [[728, 280], [728, 90], [1, 1]]) //เดสก์ทอป addSize([768, 0], [[728, 280], [728, 90], [1, 1]]) //ยาเม็ด เพิ่มขนาด([320, 0], [[320, 50], [320, 100], [1, 1]]) //มือถือ เพิ่มขนาด([0, 0], [[320, 50], [1, 1]]) //อื่น สร้าง(); var mappingcontentad2 = googletag.sizeMapping() addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]) //เดสก์ทอป addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]) //ยาเม็ด addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]) //มือถือ เพิ่มขนาด([0, 0], [[300, 250], [1, 1]]) //อื่น สร้าง(); var mappingrightrail1 = googletag.sizeMapping() เพิ่มขนาด([992, 0], [[300, 250], [1, 1]]) //เดสก์ทอป addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]) //ยาเม็ด เพิ่มขนาด([0, 0], [1, 1]) //อื่น สร้าง(); googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1') .defineSizeMapping(mappingheaderad1).addService(googletag.pubads()); googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2') .defineSizeMapping(mappingcontentad1).addService(googletag.pubads()); googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3') .defineSizeMapping(mappingcontentad2).addService(googletag.pubads()); googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4') .defineSizeMapping(mappingrightrail1).addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); </script> <!– สิ้นสุดแท็ก GPT –> |
หมายเหตุ: บางส่วนของโค้ดที่ไฮไลต์เพื่อเน้นว่า Size Map ใดใช้สำหรับหน่วยโฆษณาใด
ขั้นตอนที่ 8: ทีนี้มาดูการทำแผนที่ขนาด:
var mappingcontentad2 = googletag.sizeMapping() addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]) //เดสก์ทอป addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]) //ยาเม็ด addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]) //มือถือ เพิ่มขนาด([0, 0], [[300, 250], [1, 1]]) //อื่น สร้าง(); |
รหัสสีแดงกำหนดความกว้างและความสูงของเบราว์เซอร์ โดยปกติแล้วความสูงไม่สำคัญเพราะจะพิจารณาก็ต่อเมื่อเรามีความกว้างเท่ากันสำหรับ 2 บรรทัดในโค้ดด้านบน
ขั้นตอนที่ 9: ตอนนี้เรากำลังพูดสิ่งนี้ในบรรทัดแรก:
- หากความกว้างของเบราว์เซอร์เท่ากับหรือมากกว่า 992px โปรดแสดงขนาดโฆษณา 728×280 หรือ 728×90 หรือ 336×280 หรือ 300×250 หรือ 1×1
และในบรรทัดสุดท้ายเรากำลังพูดว่า:
- หากความกว้างของเบราว์เซอร์เท่ากันหรือมากกว่า 320px โปรดแสดงขนาดโฆษณา 320×50 หรือ 320×100 หรือ 320×200 หรือ 300×250 หรือ 1×1
หมายเลข 992px, 768px และ 320px จะใช้ได้กับเว็บไซต์ส่วนใหญ่เนื่องจากเป็นไปตามขนาดปกติของเดสก์ท็อป แท็บเล็ต และเบราว์เซอร์มือถือ
อย่างไรก็ตาม หากคุณมีเว็บไซต์ที่มีธีมสำหรับแท็บเล็ตและมือถือ คุณสามารถถามนักพัฒนาของคุณว่าขนาดเบราว์เซอร์ใดที่ทริกเกอร์การเปลี่ยนธีมได้ จากนั้นคุณสามารถเพิ่มขนาดดังกล่าวแทน 768px และ 320px ตามลำดับ
กลยุทธ์รายได้แบบเป็นโปรแกรมของคุณในปี 2019 คืออะไร
ที่ MonetizeMore เราช่วยให้ผู้เผยแพร่ได้รับรายได้เพิ่มขึ้นจากพื้นที่โฆษณาที่มีอยู่เราเป็นพันธมิตรผู้เผยแพร่โฆษณาชั้นนำของ Google และมีชุดโซลูชันการสร้างรายได้ของผู้เผยแพร่โฆษณาที่ช่วยให้ลูกค้าของเราบรรลุเป้าหมายรายได้และแก้ปัญหาเรื่องปวดหัวในการดำเนินการโฆษณา
แม้ว่าคุณจะสามารถตั้งค่าหน่วยโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์ของ DFP ได้ด้วยตัวคุณเอง แต่สิ่งสำคัญคือต้องพิจารณาค่าเสียโอกาสของคุณคุ้มค่ากับการใช้เวลาไปกับการพัฒนาธุรกิจและเสี่ยงสูญเสียรายได้จากการตั้งค่าที่ผิดพลาดหรือไม่?
หากคุณสนใจรับความช่วยเหลือในการตั้งค่าหน่วยโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์ของ DFPลงทะเบียนสำหรับบัญชีพรีเมียมที่ MonetizeMore วันนี้!
อ่านที่เกี่ยวข้อง:
- AdSense เสนอหน่วยโฆษณาที่ตอบสนอง
- ประเภทโฆษณาบนมือถือยอดนิยมประจำปี 2559
- ประโยชน์ของ Accelerated Mobile Pages ของ Doubleclick สำหรับผู้เผยแพร่โฆษณา
- วิธีเตรียมผู้เผยแพร่โฆษณาให้พร้อมเนื่องจากการใช้จ่ายโฆษณาบนอุปกรณ์เคลื่อนที่มีมากกว่าเดสก์ท็อป
- ขณะนี้ Doubleclick เสนอการติดตามข้ามอุปกรณ์และการโฆษณาแบบเนทีฟให้กับผู้โฆษณาและผู้เผยแพร่บนมือถือ