คุณอาจต้องการเชื่อมโยงช่องโฆษณา HTML ในหน้าเว็บกับช่องโฆษณาวิดีโอหรือโฆษณาซ้อนทับ ความสัมพันธ์ระหว่างช่องโฆษณาที่เชื่อมโยงกันนี้เรียกว่าความสัมพันธ์แบบ หลัก-แสดงร่วม
นอกเหนือจากการขอโฆษณาหลักแบบวิดีโอและโฆษณาซ้อนทับแล้ว คุณยังใช้ IMA SDK เพื่อแสดงโฆษณา HTML ที่แสดงร่วมได้ด้วย โฆษณาเหล่านี้จะแสดงในสภาพแวดล้อม HTML
ใช้โฆษณาที่แสดงร่วม
หากต้องการใช้โฆษณาที่แสดงร่วม ให้ทำตามขั้นตอนต่อไปนี้
1. จองโฆษณาที่แสดงร่วม
ก่อนอื่นคุณต้องจองโฆษณาที่แสดงร่วมที่ต้องการแสดงกับโฆษณาหลัก คุณสามารถดูแลการแสดงโฆษณาที่แสดงร่วมใน Ad Manager ได้ โดยแสดงโฆษณาที่แสดงร่วมได้สูงสุด 6 รายการต่อโฆษณาหลัก 1 รายการ เทคนิคนี้เรียกว่าRoadblockด้วยเช่นกัน เมื่อผู้ซื้อรายเดียวควบคุมโฆษณาทั้งหมดในหน้า
2. ส่งคำขอโฆษณาที่แสดงร่วม
โดยค่าเริ่มต้น ระบบจะเปิดใช้โฆษณาที่แสดงร่วมสำหรับคำขอโฆษณาทุกรายการ
3. แสดงโฆษณาที่แสดงร่วม
คุณแสดงโฆษณาที่แสดงร่วมได้ 2 วิธี
โดยอัตโนมัติ โดยใช้แท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT).
หากคุณใช้ GPT เพื่อติดตั้งใช้งานโฆษณาที่แสดงร่วม โฆษณาจะแสดงโดยอัตโนมัติตราบใดที่มีการประกาศช่องโฆษณาที่แสดงร่วมในหน้า HTML และโฆษณาเหล่านี้ลงทะเบียนกับ API (นั่นคือ div ID ใน JavaScript และ HTML ต้องตรงกัน) ข้อดีบางประการของการใช้ GPT มีดังนี้
- การรับรู้ช่องโฆษณาที่แสดงร่วม
- การส่งโฆษณาทดแทนที่แสดงร่วมจากเครือข่ายของผู้เผยแพร่โฆษณา หากการตอบสนองด้วย VAST มีโฆษณาที่แสดงร่วมจำนวนน้อยกว่าช่องโฆษณาที่กำหนดไว้ในหน้า HTML
- การเติมโฆษณาที่แสดงร่วมโดยอัตโนมัติหากไม่มีโฆษณาวิดีโอ
- ช่องโฆษณาที่แสดงร่วมที่โหลดไว้ล่วงหน้าสำหรับโปรแกรมเล่นวิดีโอแบบคลิกเพื่อเล่น
- การแสดงผลโฆษณาที่แสดงร่วมโดยอัตโนมัติ ซึ่งรวมถึง
HTMLResourceและiFrameResource
ด้วยตนเอง โดยใช้ Ad API.
ใช้โฆษณาที่แสดงร่วมกับแท็กผู้เผยแพร่โฆษณาผ่าน Google
แท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT) จะแสดงโฆษณา HTML ที่แสดงร่วมในเว็บไซต์ของคุณโดยอัตโนมัติ เราขอแนะนำให้ผู้เผยแพร่โฆษณาส่วนใหญ่ใช้ GPT HTML5 SDK จะรู้จักช่อง GPT หากโหลด GPT ในหน้าเว็บหลัก (ไม่ใช่ใน IFrame) ดูข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับการใช้ GPT กับ IMA SDK ได้ใน เอกสารประกอบของ GPT
กรณีที่คุณโฮสต์ HTML5 SDK ภายใน IFrame
หากคุณมีคุณสมบัติตรงตามเกณฑ์ทั้ง 2 ข้อต่อไปนี้ คุณต้องรวมสคริปต์พร็อกซีเพิ่มเติมเพื่อให้โฆษณาที่แสดงร่วมของ GPT แสดงอย่างถูกต้อง
- โหลด HTML5 SDK ใน IFrame
- โหลด GPT ในหน้าเว็บหลัก (นอก IFrame)
หากต้องการให้โฆษณาที่แสดงร่วมแสดงในสถานการณ์นี้ คุณต้องโหลดสคริปต์พร็อกซี GPT ก่อนโหลด SDK โดยทำดังนี้
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
สิ่งสำคัญที่ต้องคำนึงถึง
- ไม่ควรโหลด GPT ไว้ภายใน IFrame ที่โหลด SDK
- ต้องโหลด GPT ในหน้าแรก ไม่ใช่ใน IFrame อื่น
- ต้องโหลดสคริปต์พร็อกซีในเฟรมเดียวกับ GPT (นั่นคือในหน้าหลัก)
ประกาศช่องโฆษณาที่แสดงร่วมใน HTML
ส่วนนี้จะอธิบายวิธีประกาศโฆษณาที่แสดงร่วมใน HTML โดยใช้ GPT และแสดงโค้ดตัวอย่างสำหรับสถานการณ์ต่างๆ สำหรับ HTML5 SDK คุณต้องเพิ่ม JavaScript บางส่วนลงในหน้า HTML และประกาศช่องโฆษณาที่แสดงร่วม
- ตัวอย่างที่ 1: การติดตั้งใช้งานช่องโฆษณาพื้นฐาน
- ตัวอย่างที่ 2: การติดตั้งใช้งานช่องโฆษณาแบบไดนามิก
- ตัวอย่างที่ 3: ช่องโฆษณาที่โหลดไว้ล่วงหน้า
ตัวอย่างที่ 1: การติดตั้งใช้งานช่องโฆษณาพื้นฐาน
โค้ดตัวอย่างต่อไปนี้แสดงวิธีรวมไฟล์ gpt.js ในหน้า HTML และประกาศช่องโฆษณา ช่องโฆษณาที่ประกาศมีขนาด 728x90 พิกเซล GPT จะพยายามเติมช่องด้วยโฆษณาที่แสดงร่วมที่ส่งกลับในการตอบสนองด้วย VAST ซึ่งมีขนาดตรงกัน หลังจากประกาศช่องโฆษณาแล้ว ฟังก์ชัน googletag.display() จะแสดงผลช่องโฆษณาเหล่านั้นได้ทุกที่ที่เรียกใช้ในหน้า เนื่องจากช่องโฆษณาเป็นช่องโฆษณาที่แสดงร่วม โฆษณาจึงไม่แสดงทันที แต่จะปรากฏข้างโฆษณาวิดีโอหลัก
ตัวอย่างการติดตั้งใช้งาน
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!--<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() { googletag.display('companionDiv'); });
</script>
</div>
<body>
</html>
ลองเลย
คุณดูการติดตั้งใช้งานที่ใช้งานได้ใน Codepen ต่อไปนี้
ตัวอย่างที่ 2: การติดตั้งใช้งานช่องโฆษณาแบบไดนามิก
บางครั้งคุณอาจไม่ทราบว่ามีช่องโฆษณากี่ช่องในหน้าจนกว่าจะมีการแสดงผลเนื้อหาของหน้า โค้ดตัวอย่างต่อไปนี้แสดงวิธีกำหนดช่องโฆษณาขณะที่หน้าแสดงผล ตัวอย่างนี้เหมือนกับ ตัวอย่างที่ 1 ทุกประการ ยกเว้นว่าจะลงทะเบียนช่องโฆษณาในตำแหน่งที่แสดงจริง
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.display('companionDiv');
});
</script>
</div>
<body>
</html>
ลองเลย
คุณดูโค้ดต่อไปนี้สำหรับการติดตั้งใช้งานที่ใช้งานได้
ตัวอย่างที่ 3: ช่องโฆษณาที่โหลดไว้ล่วงหน้า
ในบางกรณี คุณอาจต้องแสดงบางอย่างในช่องโฆษณาก่อนที่จะมีการส่งคำขอโฆษณาที่แสดงร่วม โดยปกติแล้ว ระบบจะส่งคำขอโฆษณาที่แสดงร่วมพร้อมกับโฆษณาวิดีโอ คำขอนี้อาจเกิดขึ้นหลังจากโหลดหน้าแล้ว เช่น โฆษณาที่แสดงร่วมอาจโหลดหลังจากที่ผู้ใช้คลิกวิดีโอแบบคลิกเพื่อเล่นเท่านั้น ในกรณีดังกล่าว คุณต้องมีความสามารถในการส่งคำขอโฆษณาปกติเพื่อเติมช่องโฆษณาก่อนที่จะมีการส่งคำขอโฆษณาที่แสดงร่วม หากต้องการรองรับกรณีการใช้งานนี้ คุณสามารถแสดงโฆษณาเว็บมาตรฐานในช่องโฆษณาที่แสดงร่วม ตรวจสอบว่าได้กำหนดเป้าหมายโฆษณาเว็บไปยังช่องโฆษณาที่แสดงร่วม คุณกำหนดเป้าหมายช่องโฆษณาที่แสดงร่วมได้ด้วยวิธีเดียวกับที่กำหนดเป้าหมายช่องโฆษณาเว็บมาตรฐาน
ตัวอย่างการติดตั้งใช้งานที่อธิบายไว้ข้างต้น
<html>
<head>
...
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
...
</html>
ลองเลย
คุณดู Codepen ต่อไปนี้สำหรับการติดตั้งใช้งานที่ใช้งานได้
ใช้โฆษณาที่แสดงร่วมกับ Ad API
ส่วนนี้จะอธิบายวิธีแสดงโฆษณาที่แสดงร่วมโดยใช้ Ad API
แสดงโฆษณาที่แสดงร่วม
หากต้องการแสดงโฆษณาที่แสดงร่วม ก่อนอื่นให้รับข้อมูลอ้างอิงไปยังออบเจ็กต์ Ad ผ่านเหตุการณ์ใดก็ตาม
ที่ส่งจาก AdsManagerAdEvent เราขอแนะนำให้ใช้เหตุการณ์ AdEvent.STARTED เนื่องจากโฆษณาที่แสดงร่วมควรแสดงพร้อมกับโฆษณาหลัก
จากนั้นใช้ออบเจ็กต์ Ad นี้เพื่อเรียกใช้ getCompanionAds() เพื่อรับอาร์เรย์ของ
CompanionAd ออบเจ็กต์ ในที่นี้คุณมีตัวเลือกในการระบุ CompanionAdSelectionSettings ซึ่งช่วยให้คุณตั้งค่าตัวกรองในโฆษณาที่แสดงร่วมสำหรับประเภทครีเอทีฟโฆษณา เปอร์เซ็นต์ความเหมาะสมโดยประมาณ ประเภททรัพยากร และเกณฑ์ขนาดได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าเหล่านี้ได้ในเอกสารประกอบของ
IMA APICompanionAdSelectionSettings
ตอนนี้คุณสามารถใช้ออบเจ็กต์ CompanionAd ที่ส่งกลับโดย getCompanionAds เพื่อ
แสดงโฆษณาที่แสดงร่วมในหน้าได้โดยใช้หลักเกณฑ์ต่อไปนี้
- สร้างช่องโฆษณาที่แสดงร่วม
<div>ที่มีขนาดตามที่ต้องการในหน้า - ในตัวแฮนเดิลเหตุการณ์สำหรับเหตุการณ์
STARTEDให้ดึงข้อมูลออบเจ็กต์Adโดยเรียกใช้getAd() - ใช้
getCompanionAds()เพื่อรับรายการโฆษณาที่แสดงร่วมซึ่งมีขนาดช่องโฆษณาที่แสดงร่วมและCompanionAdSelectionSettingsตรงกัน และมีหมายเลขลำดับเดียวกับครีเอทีฟโฆษณาหลัก ระบบจะถือว่าครีเอทีฟโฆษณาที่ไม่มีแอตทริบิวต์ลำดับมีหมายเลขลำดับเป็น 0 - รับเนื้อหาจากอินสแตนซ์
CompanionAdและตั้งค่าเป็น HTMl ภายในของ<div>ของช่องโฆษณานั้น
โค้ดตัวอย่าง
<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>
<script>
// Listen to the STARTED event.
adsManager.addEventListener(
google.ima.AdEvent.Type.STARTED,
onAdEvent);
function onAdEvent(adEvent) {
switch (adEvent.type) {
case google.ima.AdEvent.Type.STARTED:
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
var companionAd = companionAds[0];
// Get HTML content from the companion ad.
var content = companionAd.getContent();
// Write the content to the companion ad slot.
var div = document.getElementById('companion-ad-300-250');
div.innerHTML = content;
break;
}
}
</script>
แสดงโฆษณาที่แสดงร่วมแบบยืดหยุ่น
ตอนนี้ IMA รองรับโฆษณาที่แสดงร่วมแบบยืดหยุ่นแล้ว โฆษณาที่แสดงร่วมเหล่านี้สามารถปรับขนาดให้ตรงกับขนาดของช่องโฆษณาได้ โดยจะเติมความกว้างของ div หลัก 100% จากนั้นปรับความสูงให้พอดีกับเนื้อหาของโฆษณาที่แสดงร่วม คุณตั้งค่าโฆษณาที่แสดงร่วมเหล่านี้ได้โดยใช้ขนาดโฆษณาที่แสดงร่วม Fluid ใน Ad Manager ดูตำแหน่งที่ตั้งค่านี้ได้ในรูปภาพต่อไปนี้
โฆษณาที่แสดงร่วมแบบยืดหยุ่นของ GPT
เมื่อใช้โฆษณาที่แสดงร่วมของ GPT คุณสามารถประกาศช่องโฆษณาที่แสดงร่วมแบบยืดหยุ่นได้โดยอัปเดตพารามิเตอร์ที่ 2 ของเมธอด defineSlot()
<!-- Register your companion slots -->
<script>
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
โฆษณาที่แสดงร่วมแบบยืดหยุ่นของ Ad API
เมื่อใช้ Ad API สำหรับโฆษณาที่แสดงร่วม คุณสามารถประกาศช่องโฆษณาที่แสดงร่วมแบบยืดหยุ่นได้
โดยอัปเดต
google.ima.CompanionAdSelectionSettings.SizeCriteria
เป็นค่า SELECT_FLUID
<script>
...
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
// Note: Companion width and height are irrelevant when fluid size is used.
var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
var companionAd = companionAds[0];
...
}
}
</script>