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