วิธีสร้างหน่วยโฆษณา DFP ที่ตอบสนอง

เผยแพร่แล้ว: 2016-01-22
โฆษณาที่ตอบสนองของ Google dfp - ตัวอย่างแท็ก doubleclick

โพสต์นี้ได้รับการอัปเดตล่าสุดเมื่อวันที่ 31 สิงหาคม 2021

ดังนั้น คุณมีธีมที่ปรับเปลี่ยนตามอุปกรณ์ และตอนนี้คุณต้องการย้ายไปที่ Google Ad Manager (GAM) จาก AdSense สิ่งแรกที่คุณเห็นคือไม่มีหน่วยโฆษณาที่ตอบสนองเหมือนกับที่คุณพบใน AdSense อีกแล้ว

คำแนะนำในการสนับสนุนของ Google อาจยุ่งยากหรือซับซ้อนเล็กน้อย วันนี้ฉันจะแสดงให้คุณเห็นว่าคุณจะทำให้รหัส GAM ตอบสนองได้อย่างไรในไม่กี่ขั้นตอนง่ายๆ

การปรับแต่งโค้ด DFP เพื่อสร้างโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์ของ Google Ad Manager นั้นไม่ใช่เรื่องง่ายหากคุณไม่มีประสบการณ์ในการเขียนโค้ด การให้ผู้เชี่ยวชาญดำเนินการให้คุณอย่างถูกต้องในครั้งแรกจะเป็นการดีกว่าคุณไม่ต้องการเสี่ยงต่อการสูญเสียรายได้จากโฆษณา!

หากคุณต้องการความช่วยเหลือ ติดต่อเราที่นี่

ก่อนที่เราจะเริ่มต้น ตรวจสอบให้แน่ใจว่าได้ทำสิ่งต่อไปนี้:

  1. ตั้งค่าสินค้าคงคลังของคุณ กำหนดค่าขนาดที่เกี่ยวข้องทั้งหมดต่อหน่วยโฆษณา อ่าน: แนวทางปฏิบัติที่ดีที่สุดสำหรับการรวม Adsense และ GAM
  2. ดูบทแนะนำเกี่ยวกับวิธีสร้างแท็ก Ad Manager หลายรายการได้ที่นี่: https://youtu.be/s74dMDzczyc
  3. ตอนนี้สร้างไฟล์ข้อความสองไฟล์แล้วบันทึก ใช้โปรแกรมแก้ไขข้อความที่ดี (ฉันชอบใช้ Notepad++ เพราะฟรีและใช้งานง่าย)
  4. ทำอันหนึ่งสำหรับส่วนหัวและอีกอันสำหรับแท็กร่างกาย
  5. บันทึกแท็กร่างกาย
  6. เปิดไฟล์ 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 เสนอการติดตามข้ามอุปกรณ์และการโฆษณาแบบเนทีฟให้กับผู้โฆษณาและผู้เผยแพร่บนมือถือ