IMA SDK ช่วยให้ผสานรวมโฆษณามัลติมีเดียเข้ากับเว็บไซต์และแอปได้อย่างง่ายดาย IMA SDK สามารถ ขอโฆษณาจากเซิร์ฟเวอร์โฆษณา ที่รองรับ VAST และจัดการการเล่นโฆษณาในแอปได้ เมื่อใช้ SDK ฝั่งไคลเอ็นต์ของ IMA คุณจะควบคุมการเล่นวิดีโอเนื้อหาได้ ในขณะที่ SDK จะจัดการการเล่นโฆษณา โฆษณาจะเล่นในวิดีโอเพลเยอร์ แยกต่างหากซึ่งวางอยู่เหนือวิดีโอเพลเยอร์เนื้อหาของแอป
คู่มือนี้แสดงวิธีผสานรวม IMA SDK เข้ากับแอปโปรแกรมเล่นวิดีโอ หากต้องการดูหรือทำตามตัวอย่างการผสานรวมที่เสร็จสมบูรณ์แล้ว ให้ดาวน์โหลด BasicExample จาก GitHub
ภาพรวมฝั่งไคลเอ็นต์ของ IMA
การติดตั้งใช้งานฝั่งไคลเอ็นต์ของ IMA เกี่ยวข้องกับคอมโพเนนต์ SDK หลัก 4 รายการ คู่มือนี้ แสดงให้เห็นถึงคอมโพเนนต์ต่อไปนี้
IMAAdDisplayContainer: ออบเจ็กต์คอนเทนเนอร์ที่ระบุตําแหน่งที่ IMA แสดงผลองค์ประกอบ UI ของโฆษณาและวัดการมองเห็นโฆษณา รวมถึงมุมมองแอ็กทีฟและ Open MeasurementIMAAdsLoader: ออบเจ็กต์ที่ขอโฆษณาและจัดการเหตุการณ์จากการตอบกลับคำขอโฆษณา คุณควรสร้างอินสแตนซ์ของ AdLoader เพียงรายการเดียว ซึ่งสามารถนำกลับมาใช้ใหม่ได้ตลอดอายุการใช้งานของแอปพลิเคชันIMAAdsRequest: ออบเจ็กต์ที่กำหนดคำขอโฆษณา คำขอโฆษณาระบุ URL สำหรับแท็กโฆษณา VAST รวมถึง พารามิเตอร์เพิ่มเติม เช่น ขนาดโฆษณาIMAAdsManager: ออบเจ็กต์ที่มีการตอบกลับคำขอโฆษณา ควบคุมการเล่นโฆษณา และรอฟังเหตุการณ์โฆษณา ที่ SDK เรียกใช้
ข้อกำหนดเบื้องต้น
ก่อนเริ่มต้น คุณต้องมีสิ่งต่อไปนี้
- Xcode 13 ขึ้นไป
- วิธีติดตั้ง IMA SDK
- แนะนำ: Swift Package Manager
- CocoaPods
- สำเนาที่ดาวน์โหลดของ IMA SDK สำหรับ tvOS
1. สร้างโปรเจ็กต์ Xcode ใหม่
สร้างโปรเจ็กต์ tvOS ใหม่ใน Xcode โดยใช้ Objective-C หรือ Swift ใช้ BasicExample เป็นชื่อโปรเจ็กต์
2. เพิ่ม IMA SDK ลงในโปรเจ็กต์ Xcode
หากต้องการติดตั้ง IMA SDK ให้เลือกวิธีที่ต้องการ
แนะนำ: ติดตั้ง IMA SDK โดยใช้ Swift Package Manager
SDK โฆษณาสื่ออินเทอร์แอกทีฟรองรับ Swift Package Manager ตั้งแต่เวอร์ชัน 4.8.2 เป็นต้นไป ทำตาม ขั้นตอนต่อไปนี้เพื่อนำเข้าแพ็กเกจ Swift
ใน Xcode ให้ติดตั้งแพ็กเกจ Swift ของ IMA SDK โดยไปที่File > Add Packages...
ในพรอมต์ที่ปรากฏขึ้น ให้ค้นหาที่เก็บ IMA SDK Swift Package GitHub
https://github.com/googleads/swift-package-manager-google-interactive-media-ads-tvosเลือกเวอร์ชันของแพ็กเกจ Swift ของ IMA SDK ที่ต้องการใช้ สำหรับโปรเจ็กต์ใหม่ เราขอแนะนำให้ใช้อัปเดตเป็นเวอร์ชันหลักถัดไป
เมื่อดำเนินการเสร็จแล้ว Xcode จะแก้ไขการขึ้นต่อกันของแพ็กเกจและดาวน์โหลดไว้ในเบื้องหลัง ดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีเพิ่มการอ้างอิงแพ็กเกจได้ในบทความของ Apple
ติดตั้ง IMA SDK โดยใช้ CocoaPods
หากต้องการติดตั้ง IMA SDK ให้ใช้ CocoaPods ดูข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้งหรือการใช้ CocoaPods ได้ที่เอกสารประกอบสำหรับ CocoaPods หลังจาก ติดตั้ง CocoaPods แล้ว ให้ทำดังนี้
ในไดเรกทอรีเดียวกับไฟล์ BasicExample.xcodeproj ให้สร้างไฟล์ข้อความ ชื่อ Podfile แล้วเพิ่มการกำหนดค่าต่อไปนี้
source 'https://github.com/CocoaPods/Specs.git' platform :tvos, '15' target "BasicExample" do pod 'GoogleAds-IMA-tvOS-SDK', '~> 4.16.0' endจากไดเรกทอรีที่มี Podfile ให้เรียกใช้
pod install --repo-updateยืนยันว่าการติดตั้งสำเร็จโดยเปิดไฟล์ BasicExample.xcworkspace แล้วตรวจสอบว่ามี 2 โปรเจ็กต์ ได้แก่ BasicExample และ Pods (ทรัพยากร Dependency ที่ติดตั้งโดย CocoaPods)
การดาวน์โหลดและติดตั้ง IMA SDK ด้วยตนเอง
หากไม่ต้องการใช้ Swift Package Manager ให้ดาวน์โหลดและเพิ่ม IMA SDK ลงในโปรเจ็กต์ด้วยตนเอง
3. นำเข้า IMA SDK
เพิ่มเฟรมเวิร์ก IMA โดยใช้คำสั่งนำเข้า
Objective-C
#import "ViewController.h"
#import <AVKit/AVKit.h>
@import GoogleInteractiveMediaAds;
Swift
import AVFoundation
import GoogleInteractiveMediaAds
import UIKit
4. สร้างวิดีโอเพลเยอร์และผสานรวม IMA SDK
ตัวอย่างต่อไปนี้เริ่มต้น IMA SDK
Objective-C
NSString *const kContentURLString =
@"https://storage.googleapis.com/interactive-media-ads/media/stock.mp4";
NSString *const kAdTagURLString =
@"https://pubads.g.doubleclick.net/gampad/ads?"
@"iu=/21775744923/external/vmap_ad_samples&sz=640x480&"
@"cust_params=sample_ar%3Dpremidpostlongpod&ciu_szs=300x250&gdfp_req=1&ad_rule=1&"
@"output=vmap&unviewed_position_start=1&env=vp&cmsid=496&vid=short_onecue&correlator=";
@interface ViewController () <IMAAdsLoaderDelegate, IMAAdsManagerDelegate>
@property(nonatomic) IMAAdsLoader *adsLoader;
@property(nonatomic) IMAAdDisplayContainer *adDisplayContainer;
@property(nonatomic) IMAAdsManager *adsManager;
@property(nonatomic) IMAAVPlayerContentPlayhead *contentPlayhead;
@property(nonatomic) AVPlayerViewController *contentPlayerViewController;
@property(nonatomic, getter=isAdBreakActive) BOOL adBreakActive;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor blackColor];
[self setupAdsLoader];
[self setupContentPlayer];
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
[self requestAds];
}
// Add the content video player as a child view controller.
- (void)showContentPlayer {
[self addChildViewController:self.contentPlayerViewController];
self.contentPlayerViewController.view.frame = self.view.bounds;
[self.view insertSubview:self.contentPlayerViewController.view atIndex:0];
[self.contentPlayerViewController didMoveToParentViewController:self];
}
// Remove and detach the content video player.
- (void)hideContentPlayer {
// The whole controller needs to be detached so that it doesn't capture resume events from the
// remote and play content underneath the ad.
[self.contentPlayerViewController willMoveToParentViewController:nil];
[self.contentPlayerViewController.view removeFromSuperview];
[self.contentPlayerViewController removeFromParentViewController];
}
Swift
class ViewController: UIViewController, IMAAdsLoaderDelegate, IMAAdsManagerDelegate {
static let contentURLString =
"https://devstreaming-cdn.apple.com/videos/streaming/examples/"
+ "img_bipbop_adv_example_fmp4/master.m3u8"
static let adTagURLString =
"https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&"
+ "sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&"
+ "unviewed_position_start=1&env=vp&correlator="
var adsLoader: IMAAdsLoader!
var adDisplayContainer: IMAAdDisplayContainer!
var adsManager: IMAAdsManager!
var contentPlayhead: IMAAVPlayerContentPlayhead?
var playerViewController: AVPlayerViewController!
var adBreakActive = false
deinit {
NotificationCenter.default.removeObserver(self)
}
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.black
setUpContentPlayer()
setUpAdsLoader()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
requestAds()
}
ในตัวอย่างนี้ viewDidLoad() จะเริ่มต้น IMAAdsLoader และ
viewDidAppear() จะขอโฆษณาเมื่อมุมมองปรากฏ เมธอด Helper
showContentPlayer() และ hideContentPlayer() สลับระดับการมองเห็นเนื้อหาระหว่าง
การเล่นโฆษณา
ตัวอย่างนี้ใช้ตัวแปรค่าคงที่ adTagURLString เพื่อกำหนดแท็กโฆษณา VAST สำหรับคำขอโฆษณา และใช้คอมโพเนนต์ต่อไปนี้เพื่อจัดการ IMA SDK
adsLoader: จัดการคำขอโฆษณาและการตอบกลับ เราขอแนะนำให้ใช้ อินสแตนซ์เดียวสำหรับวงจรของแอปadDisplayContainer: ระบุมุมมองสำหรับการแสดงโฆษณาadsManager: จัดการการเล่นโฆษณาและรอเหตุการณ์โฆษณาcontentPlayhead: ติดตามความคืบหน้าของเนื้อหาเพื่อเรียกช่วงพักโฆษณาตอนกลางadBreakActive: ระบุว่าช่วงพักโฆษณากำลังเล่นอยู่เพื่อป้องกันไม่ให้ ข้ามโฆษณา
5. ใช้เครื่องมือติดตามหัวอ่านเนื้อหาและเครื่องมือสังเกตการณ์ตอนท้ายของสตรีม
หากต้องการเล่นโฆษณาตอนกลาง IMA SDK ต้องติดตามตำแหน่งปัจจุบัน
ของเนื้อหาวิดีโอ หากต้องการส่งตำแหน่งปัจจุบันไปยัง IMA ให้สร้างคลาสที่
ใช้ IMAContentPlayhead หากใช้ AVPlayer ดังที่ตัวอย่างนี้
แสดง IMA SDK จะมีคลาส IMAAVPlayerContentPlayhead เพื่อส่งข้อมูลตำแหน่งปัจจุบัน
ให้คุณ หากไม่ได้ใช้ AVPlayer ให้ใช้
IMAContentPlayhead ในคลาสของคุณเอง
Objective-C
- (void)setupContentPlayer {
// Create a content video player. Create a playhead to track content progress so the SDK knows
// when to play ads in a VMAP playlist.
NSURL *contentURL = [NSURL URLWithString:kContentURLString];
AVPlayer *player = [AVPlayer playerWithURL:contentURL];
self.contentPlayerViewController = [[AVPlayerViewController alloc] init];
self.contentPlayerViewController.player = player;
self.contentPlayerViewController.view.frame = self.view.bounds;
self.contentPlayhead =
[[IMAAVPlayerContentPlayhead alloc] initWithAVPlayer:self.contentPlayerViewController.player];
// Track end of content.
AVPlayerItem *contentPlayerItem = self.contentPlayerViewController.player.currentItem;
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(contentDidFinishPlaying:)
name:AVPlayerItemDidPlayToEndTimeNotification
object:contentPlayerItem];
// Attach content video player to view hierarchy.
[self showContentPlayer];
}
Swift
func setUpContentPlayer() {
// Load AVPlayer with path to our content.
let contentURL = URL(string: ViewController.contentURLString)!
let player = AVPlayer(url: contentURL)
playerViewController = AVPlayerViewController()
playerViewController.player = player
// Set up our content playhead and contentComplete callback.
contentPlayhead = IMAAVPlayerContentPlayhead(avPlayer: player)
NotificationCenter.default.addObserver(
self,
selector: #selector(ViewController.contentDidFinishPlaying(_:)),
name: NSNotification.Name.AVPlayerItemDidPlayToEndTime,
object: player.currentItem)
showContentPlayer()
}
ตั้งค่าผู้ฟังให้โทรหา contentComplete ใน IMAAdsLoader เมื่อเนื้อหาของคุณจบลงโดยใช้ AVPlayerItemDidPlayToEndTimeNotification การเรียกใช้
contentComplete จะช่วยให้ IMA SDK ทราบเมื่อเนื้อหาเล่นจบเพื่อ
แสดงโฆษณาตอนท้าย
Objective-C
- (void)contentDidFinishPlaying:(NSNotification *)notification {
// Notify the SDK that the postrolls should be played.
[self.adsLoader contentComplete];
}
- (void)dealloc {
[[NSNotificationCenter defaultCenter] removeObserver:self];
}
Swift
@objc func contentDidFinishPlaying(_ notification: Notification) {
adsLoader.contentComplete()
}
6. เริ่มต้นเครื่องมือโหลดโฆษณาและส่งคำขอโฆษณา
หากต้องการขอชุดโฆษณา ให้สร้างอินสแตนซ์ IMAAdsLoader
โปรแกรมโหลดนี้จะประมวลผลออบเจ็กต์ IMAAdsRequest ที่เชื่อมโยงกับ
URL แท็กโฆษณาที่ระบุ
แนวทางปฏิบัติแนะนำคือให้คงอินสแตนซ์ของ IMAAdsLoader ไว้เพียงอินสแตนซ์เดียวตลอดวงจรของแอป หากต้องการส่งคำขอโฆษณาเพิ่มเติม ให้สร้างออบเจ็กต์ IMAAdsRequest ใหม่ แต่ให้ใช้ IMAAdsLoader เดิม ดูข้อมูลเพิ่มเติมได้ที่คำถามที่พบบ่อยเกี่ยวกับ IMA SDK
Objective-C
- (void)setupAdsLoader {
self.adsLoader = [[IMAAdsLoader alloc] init];
self.adsLoader.delegate = self;
}
- (void)requestAds {
// Pass the main view as the container for ad display.
self.adDisplayContainer = [[IMAAdDisplayContainer alloc] initWithAdContainer:self.view
viewController:self];
IMAAdsRequest *request = [[IMAAdsRequest alloc] initWithAdTagUrl:kAdTagURLString
adDisplayContainer:self.adDisplayContainer
contentPlayhead:self.contentPlayhead
userContext:nil];
[self.adsLoader requestAdsWithRequest:request];
}
Swift
func setUpAdsLoader() {
adsLoader = IMAAdsLoader(settings: nil)
adsLoader.delegate = self
}
func requestAds() {
// Create ad display container for ad rendering.
adDisplayContainer = IMAAdDisplayContainer(adContainer: self.view, viewController: self)
// Create an ad request with our ad tag, display container, and optional user context.
let request = IMAAdsRequest(
adTagUrl: ViewController.adTagURLString,
adDisplayContainer: adDisplayContainer,
contentPlayhead: contentPlayhead,
userContext: nil)
adsLoader.requestAds(with: request)
}
7. ตั้งค่าผู้มอบสิทธิ์โปรแกรมโหลดโฆษณา
ในเหตุการณ์การโหลดที่สําเร็จ IMAAdsLoader จะเรียกใช้เมธอด adsLoadedWithData
ของตัวแทนที่กําหนด โดยส่งอินสแตนซ์ของ IMAAdsManager ไปให้
หลังจากมีอินสแตนซ์ IMAAdsManager แล้ว ให้เริ่มต้นตัวจัดการโฆษณา
ซึ่งจะโหลดโฆษณาแต่ละรายการตามการตอบกลับของ URL แท็กโฆษณา
สำหรับเหตุการณ์การโหลดที่ไม่สำเร็จ ให้ตั้งค่าตัวแทน IMAAdsLoader เพื่อจัดการ
ข้อผิดพลาดที่เกิดขึ้นระหว่างกระบวนการโหลด หากโฆษณาไม่โหลด ให้ตรวจสอบว่า
การเล่นสื่อยังคงดำเนินต่อไปโดยไม่มีโฆษณาเพื่อให้ผู้ใช้ดูเนื้อหาสื่อได้
Objective-C
#pragma mark - IMAAdsLoaderDelegate
- (void)adsLoader:(IMAAdsLoader *)loader adsLoadedWithData:(IMAAdsLoadedData *)adsLoadedData {
// Initialize and listen to the ads manager loaded for this request.
self.adsManager = adsLoadedData.adsManager;
self.adsManager.delegate = self;
[self.adsManager initializeWithAdsRenderingSettings:nil];
}
- (void)adsLoader:(IMAAdsLoader *)loader failedWithErrorData:(IMAAdLoadingErrorData *)adErrorData {
// Fall back to playing content.
NSLog(@"Error loading ads: %@", adErrorData.adError.message);
[self.contentPlayerViewController.player play];
}
Swift
func adsLoader(_ loader: IMAAdsLoader, adsLoadedWith adsLoadedData: IMAAdsLoadedData) {
// Grab the instance of the IMAAdsManager and set ourselves as the delegate.
adsManager = adsLoadedData.adsManager
adsManager.delegate = self
adsManager.initialize(with: nil)
}
func adsLoader(_ loader: IMAAdsLoader, failedWith adErrorData: IMAAdLoadingErrorData) {
print("Error loading ads: \(adErrorData.adError.message ?? "No error message available.")")
showContentPlayer()
playerViewController.player?.play()
}
8. ตั้งค่าผู้รับมอบสิทธิ์ของ Ads Manager
สุดท้ายนี้ หากต้องการจัดการเหตุการณ์และการเปลี่ยนแปลงสถานะ ตัวจัดการโฆษณาต้องมีตัวแทน
ของตัวเอง IMAAdManagerDelegate มีวิธีจัดการเหตุการณ์โฆษณาและ
ข้อผิดพลาด รวมถึงวิธีทริกเกอร์การเล่นและการหยุดชั่วคราวในเนื้อหาวิดีโอ
เริ่มเล่น
didReceiveAdEvent วิธีการจัดการเหตุการณ์ IMAAdEvent ทั้งหมด
สำหรับตัวอย่างพื้นฐานนี้ ให้รอเหตุการณ์ LOADED เพื่อบอกให้ Ad Manager
เริ่มเล่นเนื้อหาและโฆษณา IMA SDK จะทริกเกอร์เหตุการณ์
ICON_FALLBACK_IMAGE_CLOSED เมื่อผู้ใช้ปิดกล่องโต้ตอบไอคอนสำรอง
หลังจากแตะไอคอน หลังจากดำเนินการนี้แล้ว การเล่นโฆษณาจะกลับมาทำงานอีกครั้ง
Objective-C
#pragma mark - IMAAdsManagerDelegate
- (void)adsManager:(IMAAdsManager *)adsManager didReceiveAdEvent:(IMAAdEvent *)event {
switch (event.type) {
case kIMAAdEvent_LOADED: {
// Play each ad once it has loaded.
[adsManager start];
break;
}
case kIMAAdEvent_ICON_FALLBACK_IMAGE_CLOSED: {
// Resume ad after user has closed dialog.
[adsManager resume];
break;
}
default:
break;
}
}
Swift
func adsManager(_ adsManager: IMAAdsManager, didReceive event: IMAAdEvent) {
switch event.type {
case IMAAdEventType.LOADED:
// Play each ad once it has been loaded.
adsManager.start()
case IMAAdEventType.ICON_FALLBACK_IMAGE_CLOSED:
// Resume playback after the user has closed the dialog.
adsManager.resume()
default:
break
}
}
การจัดการข้อผิดพลาด
เพิ่มตัวแฮนเดิลสำหรับข้อผิดพลาดเกี่ยวกับโฆษณาด้วย หากเกิดข้อผิดพลาด เช่น ในขั้นตอนก่อนหน้า ให้เล่นเนื้อหาต่อ
Objective-C
- (void)adsManager:(IMAAdsManager *)adsManager didReceiveAdError:(IMAAdError *)error {
// Fall back to playing content.
NSLog(@"AdsManager error: %@", error.message);
[self showContentPlayer];
[self.contentPlayerViewController.player play];
}
Swift
func adsManager(_ adsManager: IMAAdsManager, didReceive error: IMAAdError) {
// Fall back to playing content
print("AdsManager error: \(error.message ?? "No error message available.")")
showContentPlayer()
playerViewController.player?.play()
}
ทริกเกอร์เหตุการณ์การเล่นและการหยุดชั่วคราว
เมธอดตัวแทน 2 รายการสุดท้ายที่คุณใช้จะทริกเกอร์เหตุการณ์เล่นและ หยุดชั่วคราวในเนื้อหาวิดีโอพื้นฐานเมื่อ IMA SDK ร้องขอ การเรียกใช้การหยุดชั่วคราวและการเล่นเมื่อ IMA SDK ร้องขอจะช่วยป้องกันไม่ให้ผู้ใช้พลาดเนื้อหาวิดีโอบางส่วนเมื่อโฆษณาแสดง
Objective-C
- (void)adsManagerDidRequestContentPause:(IMAAdsManager *)adsManager {
// Pause the content for the SDK to play ads.
[self.contentPlayerViewController.player pause];
[self hideContentPlayer];
// Trigger an update to send focus to the ad display container.
self.adBreakActive = YES;
[self setNeedsFocusUpdate];
}
- (void)adsManagerDidRequestContentResume:(IMAAdsManager *)adsManager {
// Resume the content since the SDK is done playing ads (at least for now).
[self showContentPlayer];
[self.contentPlayerViewController.player play];
// Trigger an update to send focus to the content player.
self.adBreakActive = NO;
[self setNeedsFocusUpdate];
}
Swift
func adsManagerDidRequestContentPause(_ adsManager: IMAAdsManager) {
// Pause the content for the SDK to play ads.
playerViewController.player?.pause()
hideContentPlayer()
// Trigger an update to send focus to the ad display container.
adBreakActive = true
setNeedsFocusUpdate()
}
func adsManagerDidRequestContentResume(_ adsManager: IMAAdsManager) {
// Resume the content since the SDK is done playing ads (at least for now).
showContentPlayer()
playerViewController.player?.play()
// Trigger an update to send focus to the content player.
adBreakActive = false
setNeedsFocusUpdate()
}
เท่านี้ก็เรียบร้อย ตอนนี้คุณขอและแสดงโฆษณาด้วย IMA SDK แล้ว ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์อื่นๆ ของ SDK ได้ในคำแนะนำอื่นๆ หรือตัวอย่างใน GitHub
ขั้นตอนถัดไป
หากต้องการเพิ่มรายได้จากโฆษณาในแพลตฟอร์ม tvOS ให้ได้สูงสุด ขอสิทธิ์ความโปร่งใสและการติดตามของแอปเพื่อใช้ IDFA