คุณอาจต้องการเชื่อมโยงช่องโฆษณา HTML ในหน้ากับช่องโฆษณาวิดีโอหรือโฆษณาซ้อนทับ ความสัมพันธ์ระหว่างช่องโฆษณาที่เชื่อมโยงนี้เรียกว่าความสัมพันธ์โฆษณาหลัก-โฆษณาที่แสดงร่วม
นอกเหนือจากการขอโฆษณาวิดีโอและโฆษณาหลักแบบซ้อนทับแล้ว คุณยังใช้ IMA SDK เพื่อแสดงโฆษณา HTML ที่แสดงร่วมได้ด้วย โฆษณาเหล่านี้จะแสดงภายในสภาพแวดล้อม HTML
ใช้โฆษณาที่แสดงร่วม
หากต้องการใช้โฆษณาที่แสดงร่วม ให้ทำตามขั้นตอนต่อไปนี้
1. จองโฆษณาที่แสดงร่วม
คุณต้องจองโฆษณาที่แสดงร่วมที่ต้องการแสดงกับโฆษณาหลักก่อน คุณดูแลการแสดงโฆษณาที่แสดงร่วมใน Ad Manager ได้ คุณแสดงโฆษณาที่แสดงร่วมได้สูงสุด 6 รายการต่อโฆษณาหลัก 1 รายการ เทคนิคนี้ซึ่งใช้เมื่อผู้ซื้อรายเดียวควบคุมโฆษณาทั้งหมดในหน้าเว็บยังเป็นที่รู้จักกันในชื่อการใช้โฆษณา Roadblock
2. ขอโฆษณาที่แสดงร่วม
โดยค่าเริ่มต้น ระบบจะเปิดใช้โฆษณาที่แสดงร่วมสำหรับคำขอโฆษณาแต่ละรายการ
3. โฆษณา Display ที่แสดงร่วม
คุณแสดงโฆษณาที่แสดงร่วมได้ 2 วิธีดังนี้
โดยอัตโนมัติ โดยใช้แท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT)
หากใช้ GPT เพื่อติดตั้งใช้งานโฆษณาที่แสดงร่วม ระบบจะแสดงโฆษณาที่แสดงร่วมโดยอัตโนมัติตราบใดที่มีช่องโฆษณาที่แสดงร่วมที่ประกาศในหน้า HTML และโฆษณาเหล่านี้ลงทะเบียนกับ API (กล่าวคือ รหัส div ใน JavaScript และ HTML ต้องตรงกัน) ข้อดีบางประการของการใช้ GPT มีดังนี้
- การรับรู้ช่องโฆษณาที่แสดงร่วม
- การส่งโฆษณาทดแทนที่แสดงร่วมจากเครือข่ายของผู้เผยแพร่โฆษณา หากการตอบสนองด้วย VAST มีโฆษณาที่แสดงร่วมจำนวนน้อยกว่าช่องที่กำหนดไว้ในหน้า HTML
- ป้อนข้อความอัตโนมัติที่แสดงร่วมหากไม่มีโฆษณาวิดีโอ
- ช่องโฆษณาที่แสดงร่วมที่โหลดล่วงหน้าสำหรับวิดีโอเพลเยอร์แบบคลิกเพื่อเล่น
- การแสดงผลโฆษณาที่แสดงร่วมโดยอัตโนมัติ ซึ่งรวมถึง
HTMLResourceและiFrameResource
ด้วยตนเองโดยใช้ Ad API
ใช้โฆษณาที่แสดงร่วมกับแท็กผู้เผยแพร่โฆษณาผ่าน Google
แท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT) จะแสดงโฆษณา HTML ที่แสดงร่วมในเว็บไซต์โดยอัตโนมัติ เราขอแนะนำให้ผู้เผยแพร่โฆษณาส่วนใหญ่ใช้ GPT SDK ของ HTML5 จะรู้จักช่อง 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 และ แสดงโค้ดตัวอย่างสำหรับสถานการณ์ต่างๆ สำหรับ SDK ของ HTML5 คุณต้องเพิ่ม 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
โฆษณา Display ที่แสดงร่วม
หากต้องการแสดงโฆษณาที่แสดงร่วม ให้รับข้อมูลอ้างอิงไปยังออบเจ็กต์ Ad ผ่านเหตุการณ์ใดก็ได้
จากเหตุการณ์ AdEvent ที่ส่งจาก AdsManager เราขอแนะนำให้ใช้เหตุการณ์ AdEvent.STARTED เนื่องจากโฆษณาที่แสดงร่วมควรแสดงพร้อมกับ
โฆษณาหลัก
จากนั้นใช้ออบเจ็กต์ Ad นี้เพื่อเรียก getCompanionAds() เพื่อรับอาร์เรย์ของออบเจ็กต์
CompanionAd ในส่วนนี้ คุณมีตัวเลือกในการระบุ
CompanionAdSelectionSettings ซึ่งช่วยให้คุณตั้งค่าตัวกรองในโฆษณา
ที่แสดงร่วมสำหรับประเภทครีเอทีฟโฆษณา เปอร์เซ็นต์ความใกล้เคียง ประเภททรัพยากร และเกณฑ์ขนาดได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าเหล่านี้ได้ในเอกสารประกอบเกี่ยวกับ IMA CompanionAdSelectionSettings API
ตอนนี้คุณสามารถใช้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>
โฆษณา 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>