เริ่มสร้างรายได้จากเนื้อหาวิดีโอด้วยโฆษณา
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 ขึ้นไป
- CocoaPods (แนะนำ), Swift Package Manager หรือ สำเนาที่ดาวน์โหลดของ IMA SDK สำหรับ iOS
1. สร้างโปรเจ็กต์ Xcode ใหม่
สร้างโปรเจ็กต์ iOS ใหม่ใน Xcode โดยใช้ Objective-C หรือ Swift ใช้ BasicExample เป็นชื่อโปรเจ็กต์
2. เพิ่ม IMA SDK ลงในโปรเจ็กต์ Xcode
ติดตั้ง SDK โดยใช้ CocoaPods (แนะนำ)
CocoaPods เป็นเครื่องมือจัดการทรัพยากร Dependency สำหรับโปรเจ็กต์ Xcode และเป็นวิธีที่แนะนำในการติดตั้ง IMA SDK ดูข้อมูลเพิ่มเติมเกี่ยวกับการติดตั้งหรือการใช้ CocoaPods ได้ที่เอกสารประกอบของ CocoaPods เมื่อติดตั้ง CocoaPods แล้ว ให้ใช้คำสั่งต่อไปนี้เพื่อติดตั้ง IMA SDK
ในไดเรกทอรีเดียวกับไฟล์ BasicExample.xcodeproj ให้สร้างไฟล์ข้อความ ชื่อ Podfile แล้วเพิ่มการกำหนดค่าต่อไปนี้
Objective-C
source 'https://github.com/CocoaPods/Specs.git' platform :ios, '12' target "BasicExample" do pod 'GoogleAds-IMA-iOS-SDK', '~> 3.26.1' end
Swift
source 'https://github.com/CocoaPods/Specs.git' platform :ios, '12' target "BasicExample" do pod 'GoogleAds-IMA-iOS-SDK', '~> 3.26.1' end
จากไดเรกทอรีที่มี Podfile ให้เรียกใช้
pod install --repo-update
ยืนยันว่าการติดตั้งสำเร็จโดยเปิดไฟล์ BasicExample.xcworkspace แล้วตรวจสอบว่ามีโปรเจ็กต์ 2 รายการ ได้แก่ BasicExample และ Pods (ทรัพยากร Dependency ที่ติดตั้งโดย CocoaPods)
ติดตั้ง SDK โดยใช้ Swift Package Manager
Interactive Media Ads SDK รองรับ Swift Package Manager ตั้งแต่เวอร์ชัน 3.18.4 เป็นต้นไป หากต้องการนำเข้าแพ็กเกจ Swift ให้ทำตามขั้นตอนต่อไปนี้
ใน Xcode ให้ติดตั้งแพ็กเกจ Swift ของ IMA SDK โดยไปที่File > Add Package Dependencies...
ในข้อความแจ้ง ให้ค้นหารีโป GitHub ของแพ็กเกจ Swift สำหรับ IMA iOS SDK ดังนี้
swift-package-manager-google-interactive-media-ads-ios
เลือกเวอร์ชันของแพ็กเกจ Swift ของ IMA SDK ที่ต้องการใช้ สำหรับโปรเจ็กต์ใหม่ เราขอแนะนำให้ใช้อัปเดตเป็นเวอร์ชันหลักถัดไป
เมื่อดำเนินการเสร็จแล้ว Xcode จะแก้ไขการขึ้นต่อกันของแพ็กเกจและดาวน์โหลดไว้ในเบื้องหลัง ดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีเพิ่มการอ้างอิงแพ็กเกจได้ที่บทความของ Apple
ดาวน์โหลดและติดตั้ง SDK ด้วยตนเอง
หากไม่ต้องการใช้ Swift Package Manager หรือ CocoaPods คุณสามารถดาวน์โหลด IMA SDK และเพิ่มลงในโปรเจ็กต์ด้วยตนเองได้
3. สร้างวิดีโอเพลเยอร์
ก่อนอื่น ให้ติดตั้งใช้งานวิดีโอเพลเยอร์ ในตอนแรก โปรแกรมเล่นนี้ไม่ได้ใช้ IMA SDK และไม่มีวิธีการใดๆ ในการเรียกใช้การเล่น
Objective-C
นำเข้าทรัพยากร Dependency ของเพลเยอร์
#import "ViewController.h" @import AVFoundation;
ตั้งค่าตัวแปรของเพลเยอร์
@interface ViewController () <IMAAdsLoaderDelegate, IMAAdsManagerDelegate> /// Content video player. @property(nonatomic, strong) AVPlayer *contentPlayer; /// Play button. @property(nonatomic, weak) IBOutlet UIButton *playButton; /// UIView in which we will render our AVPlayer for content. @property(nonatomic, weak) IBOutlet UIView *videoView;
เริ่มต้นโปรแกรมเล่นวิดีโอเมื่อโหลดมุมมอง
@implementation ViewController // The content URL to play. NSString *const kTestAppContentUrl_MP4 = @"https://storage.googleapis.com/gvabox/media/samples/stock.mp4"; // Ad tag NSString *const kTestAppAdTagUrl = @"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="; - (void)viewDidLoad { [super viewDidLoad]; self.playButton.layer.zPosition = MAXFLOAT; [self setupAdsLoader]; [self setUpContentPlayer]; } #pragma mark Content Player Setup - (void)setUpContentPlayer { // Load AVPlayer with path to our content. NSURL *contentURL = [NSURL URLWithString:kTestAppContentUrl_MP4]; self.contentPlayer = [AVPlayer playerWithURL:contentURL]; // Create a player layer for the player. AVPlayerLayer *playerLayer = [AVPlayerLayer playerLayerWithPlayer:self.contentPlayer]; // Size, position, and display the AVPlayer. playerLayer.frame = self.videoView.layer.bounds; [self.videoView.layer addSublayer:playerLayer]; // Set up our content playhead and contentComplete callback. self.contentPlayhead = [[IMAAVPlayerContentPlayhead alloc] initWithAVPlayer:self.contentPlayer]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(contentDidFinishPlaying:) name:AVPlayerItemDidPlayToEndTimeNotification object:self.contentPlayer.currentItem]; } - (IBAction)onPlayButtonTouch:(id)sender { [self requestAds]; self.playButton.hidden = YES; }
Swift
นำเข้าทรัพยากร Dependency ของเพลเยอร์
import AVFoundation
ตั้งค่าตัวแปรของเพลเยอร์
class PlayerContainerViewController: UIViewController, IMAAdsLoaderDelegate, IMAAdsManagerDelegate { static let contentURL = URL( string: "https://storage.googleapis.com/gvabox/media/samples/stock.mp4")! private var contentPlayer = AVPlayer(url: PlayerContainerViewController.contentURL) private lazy var playerLayer: AVPlayerLayer = { AVPlayerLayer(player: contentPlayer) }()
เริ่มต้นโปรแกรมเล่นวิดีโอเมื่อโหลดมุมมอง
private lazy var videoView: UIView = { let videoView = UIView() videoView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(videoView) NSLayoutConstraint.activate([ videoView.bottomAnchor.constraint( equalTo: view.safeAreaLayoutGuide.bottomAnchor), videoView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor), videoView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor), videoView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor), ]) return videoView }() // MARK: - View controller lifecycle methods override func viewDidLoad() { super.viewDidLoad() videoView.layer.addSublayer(playerLayer) adsLoader.delegate = self NotificationCenter.default.addObserver( self, selector: #selector(contentDidFinishPlaying(_:)), name: .AVPlayerItemDidPlayToEndTime, object: contentPlayer.currentItem) } override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) playerLayer.frame = videoView.layer.bounds } override func viewWillTransition( to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator ) { coordinator.animate { _ in // do nothing } completion: { _ in self.playerLayer.frame = self.videoView.layer.bounds } } // MARK: - Public methods func playButtonPressed() { requestAds() }
4. นำเข้า IMA SDK
หากต้องการนำเข้า IMA SDK ให้ทำดังนี้
Objective-C
นำเข้า IMA SDK โดยทำดังนี้
@import GoogleInteractiveMediaAds;
สร้างตัวแปรสำหรับคลาส
IMAAdsLoader
,IMAAVPlayerContentPlayhead
และIMAAdsManager
ที่ใช้ในแอป// SDK /// Entry point for the SDK. Used to make ad requests. @property(nonatomic, strong) IMAAdsLoader *adsLoader; /// Playhead used by the SDK to track content video progress and insert mid-rolls. @property(nonatomic, strong) IMAAVPlayerContentPlayhead *contentPlayhead; /// Main point of interaction with the SDK. Created by the SDK as the result of an ad request. @property(nonatomic, strong) IMAAdsManager *adsManager;
Swift
นำเข้า IMA SDK โดยทำดังนี้
import GoogleInteractiveMediaAds
สร้างตัวแปรสำหรับคลาส
IMAAdsLoader
,IMAAVPlayerContentPlayhead
และIMAAdsManager
ที่ใช้ในแอป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=" private let adsLoader = IMAAdsLoader() private var adsManager: IMAAdsManager? private lazy var contentPlayhead: IMAAVPlayerContentPlayhead = { IMAAVPlayerContentPlayhead(avPlayer: contentPlayer) }()
5. ใช้เครื่องมือติดตามหัวอ่านเนื้อหาและเครื่องมือสังเกตการณ์ตอนท้ายของสตรีม
IMA SDK ต้องติดตามตำแหน่งปัจจุบัน ของเนื้อหาวิดีโอเพื่อเล่นโฆษณาตอนกลาง โดยสร้างคลาสที่ใช้ IMAContentPlayhead
หากคุณใช้ AVPlayer
ดังที่แสดงในตัวอย่างนี้ SDK จะมีคลาส IMAAVPlayerContentPlayhead
ที่ทำสิ่งนี้ให้คุณ หากไม่ได้ใช้ AVPlayer
คุณจะต้องใช้ IMAContentPlayhead
ใน คลาสของคุณเอง
นอกจากนี้ คุณยังต้องแจ้งให้ SDK ทราบเมื่อเนื้อหาเล่นจบแล้วเพื่อให้ SDK แสดงโฆษณาหลังม้วนฟิล์มได้ โดยทำได้ด้วยการเรียกใช้เมธอด contentComplete
ใน IMAAdsLoader โดยใช้ AVPlayerItemDidPlayToEndTimeNotification
Objective-C
สร้างอินสแตนซ์ IMAAVPlayerContentPlayhead
ในการตั้งค่าเพลเยอร์
// Set up our content playhead and contentComplete callback. self.contentPlayhead = [[IMAAVPlayerContentPlayhead alloc] initWithAVPlayer:self.contentPlayer]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(contentDidFinishPlaying:) name:AVPlayerItemDidPlayToEndTimeNotification object:self.contentPlayer.currentItem];
สร้างเมธอด contentDidFinishPlaying()
เพื่อเรียกใช้ IMAAdsLoader.contentComplete()
เมื่อเนื้อหาเล่นจบ
- (void)contentDidFinishPlaying:(NSNotification *)notification { // Make sure we don't call contentComplete as a result of an ad completing. if (notification.object == self.contentPlayer.currentItem) { [self.adsLoader contentComplete]; } }
Swift
สร้างผู้สังเกตการณ์เมื่อเนื้อหาจบลงในการตั้งค่าเพลเยอร์
NotificationCenter.default.addObserver( self, selector: #selector(contentDidFinishPlaying(_:)), name: .AVPlayerItemDidPlayToEndTime, object: contentPlayer.currentItem)
สร้างเมธอด contentDidFinishPlaying()
เพื่อเรียกใช้ IMAAdsLoader.contentComplete()
เมื่อเนื้อหาเล่นจบ
@objc func contentDidFinishPlaying(_ notification: Notification) { // Make sure we don't call contentComplete as a result of an ad completing. if notification.object as? AVPlayerItem == contentPlayer.currentItem { adsLoader.contentComplete() } }
6. เริ่มต้นเครื่องมือโหลดโฆษณาและส่งคำขอโฆษณา
หากต้องการขอชุดโฆษณา คุณต้องสร้างอินสแตนซ์ IMAAdsLoader
คุณสามารถใช้โปรแกรมโหลดนี้เพื่อประมวลผลออบเจ็กต์ IMAAdsRequest
ที่เชื่อมโยงกับ URL แท็กโฆษณาที่ระบุได้
แนวทางปฏิบัติแนะนำคือให้คงอินสแตนซ์ของ IMAAdsLoader
ไว้เพียงอินสแตนซ์เดียวตลอดวงจร ของแอป หากต้องการส่งคำขอโฆษณาเพิ่มเติม ให้สร้างออบเจ็กต์ IMAAdsRequest
ใหม่ แต่ให้ใช้ IMAAdsLoader
เดิมซ้ำ ดูข้อมูลเพิ่มเติมได้ที่คำถามที่พบบ่อยเกี่ยวกับ IMA SDK
Objective-C
- (void)setupAdsLoader { self.adsLoader = [[IMAAdsLoader alloc] initWithSettings:nil]; self.adsLoader.delegate = self; } - (void)requestAds { // Create an ad display container for ad rendering. IMAAdDisplayContainer *adDisplayContainer = [[IMAAdDisplayContainer alloc] initWithAdContainer:self.videoView viewController:self companionSlots:nil]; // Create an ad request with our ad tag, display container, and optional user context. IMAAdsRequest *request = [[IMAAdsRequest alloc] initWithAdTagUrl:kTestAppAdTagUrl adDisplayContainer:adDisplayContainer contentPlayhead:self.contentPlayhead userContext:nil]; [self.adsLoader requestAdsWithRequest:request]; }
Swift
private func requestAds() { // Create ad display container for ad rendering. let adDisplayContainer = IMAAdDisplayContainer( adContainer: videoView, viewController: self, companionSlots: nil) // Create an ad request with our ad tag, display container, and optional user context. let request = IMAAdsRequest( adTagUrl: PlayerContainerViewController.adTagURLString, adDisplayContainer: adDisplayContainer, contentPlayhead: contentPlayhead, userContext: nil) adsLoader.requestAds(with: request) }
7. ตั้งค่าผู้มอบสิทธิ์ให้โหลดโฆษณา
เมื่อโหลดเหตุการณ์สำเร็จ IMAAdsLoader
จะเรียกใช้เมธอด adsLoadedWithData
ของผู้รับมอบสิทธิ์ที่กำหนด โดยส่งอินสแตนซ์ของ IMAAdsManager
ไปให้ จากนั้นคุณ จะเริ่มต้นใช้งานเครื่องมือจัดการโฆษณา ซึ่งจะโหลดโฆษณาแต่ละรายการตามที่กำหนด โดยการตอบกลับ URL ของแท็กโฆษณา
นอกจากนี้ อย่าลืมจัดการข้อผิดพลาดที่อาจเกิดขึ้นระหว่างกระบวนการโหลด หากโฆษณาไม่โหลด ให้ตรวจสอบว่าการเล่นสื่อยังคงดำเนินต่อไปโดยไม่มีโฆษณา เพื่อไม่ให้รบกวนประสบการณ์ของผู้ใช้
Objective-C
- (void)adsLoader:(IMAAdsLoader *)loader adsLoadedWithData:(IMAAdsLoadedData *)adsLoadedData { // Grab the instance of the IMAAdsManager and set ourselves as the delegate. self.adsManager = adsLoadedData.adsManager; self.adsManager.delegate = self; // Create ads rendering settings to tell the SDK to use the in-app browser. IMAAdsRenderingSettings *adsRenderingSettings = [[IMAAdsRenderingSettings alloc] init]; adsRenderingSettings.linkOpenerPresentingController = self; // Initialize the ads manager. [self.adsManager initializeWithAdsRenderingSettings:adsRenderingSettings]; } - (void)adsLoader:(IMAAdsLoader *)loader failedWithErrorData:(IMAAdLoadingErrorData *)adErrorData { // Something went wrong loading ads. Log the error and play the content. NSLog(@"Error loading ads: %@", adErrorData.adError.message); [self.contentPlayer 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 // Create ads rendering settings and tell the SDK to use the in-app browser. let adsRenderingSettings = IMAAdsRenderingSettings() adsRenderingSettings.linkOpenerPresentingController = self // Initialize the ads manager. adsManager?.initialize(with: adsRenderingSettings) } func adsLoader(_ loader: IMAAdsLoader, failedWith adErrorData: IMAAdLoadingErrorData) { if let message = adErrorData.adError.message { print("Error loading ads: \(message)") } contentPlayer.play() }
8. ตั้งค่าผู้รับมอบสิทธิ์ของ Ads Manager
สุดท้ายนี้ หากต้องการจัดการเหตุการณ์และการเปลี่ยนแปลงสถานะ ผู้จัดการโฆษณาต้องมีผู้มอบสิทธิ์ของตนเอง IMAAdManagerDelegate
มีเมธอดในการจัดการเหตุการณ์และข้อผิดพลาดเกี่ยวกับโฆษณา รวมถึงเมธอดในการทริกเกอร์การเล่นและการหยุดชั่วคราวในเนื้อหาวิดีโอ
เริ่มเล่น
ฟังเหตุการณ์ LOADED
เพื่อเริ่มเล่นเนื้อหาและโฆษณา ดูรายละเอียดเพิ่มเติมได้ที่ didReceiveAdEvent
Objective-C
- (void)adsManager:(IMAAdsManager *)adsManager didReceiveAdEvent:(IMAAdEvent *)event { // When the SDK notified us that ads have been loaded, play them. if (event.type == kIMAAdEvent_LOADED) { [adsManager start]; } }
Swift
func adsManager(_ adsManager: IMAAdsManager, didReceive event: IMAAdEvent) { // When the SDK notifies us the ads have been loaded, play them. if event.type == IMAAdEventType.LOADED { adsManager.start() } }
จัดการข้อผิดพลาด
เพิ่มตัวแฮนเดิลสำหรับข้อผิดพลาดของโฆษณาด้วย หากเกิดข้อผิดพลาด เช่น ในขั้นตอนก่อนหน้า ให้เล่นเนื้อหาต่อ
Objective-C
- (void)adsManager:(IMAAdsManager *)adsManager didReceiveAdError:(IMAAdError *)error { // Something went wrong with the ads manager after ads were loaded. Log the error and play the // content. NSLog(@"AdsManager error: %@", error.message); [self.contentPlayer play]; }
Swift
func adsManager(_ adsManager: IMAAdsManager, didReceive error: IMAAdError) { // Something went wrong with the ads manager after ads were loaded. // Log the error and play the content. if let message = error.message { print("AdsManager error: \(message)") } contentPlayer.play() }
รอรับเหตุการณ์เล่นและหยุดชั่วคราว
เมธอดตัวแทน 2 รายการสุดท้ายที่คุณต้องติดตั้งใช้งานใช้เพื่อทริกเกอร์เหตุการณ์เล่นและหยุดชั่วคราวในเนื้อหาวิดีโอพื้นฐาน เมื่อ IMA SDK ร้องขอ การทริกเกอร์การหยุดชั่วคราวและการเล่นเมื่อมีการร้องขอจะช่วยให้ผู้ใช้ไม่พลาดเนื้อหาวิดีโอบางส่วน เมื่อมีการแสดงโฆษณา
Objective-C
- (void)adsManagerDidRequestContentPause:(IMAAdsManager *)adsManager { // The SDK is going to play ads, so pause the content. [self.contentPlayer pause]; } - (void)adsManagerDidRequestContentResume:(IMAAdsManager *)adsManager { // The SDK is done playing ads (at least for now), so resume the content. [self.contentPlayer play]; }
Swift
func adsManagerDidRequestContentPause(_ adsManager: IMAAdsManager) { // The SDK is going to play ads, so pause the content. contentPlayer.pause() } func adsManagerDidRequestContentResume(_ adsManager: IMAAdsManager) { // The SDK is done playing ads (at least for now), so resume the content. contentPlayer.play() }
เท่านี้ก็เรียบร้อย ตอนนี้คุณขอและแสดงโฆษณาด้วย IMA SDK แล้ว ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์อื่นๆ ของ SDK ได้ในคำแนะนำอื่นๆ หรือตัวอย่างใน GitHub
ขั้นตอนถัดไป
หากต้องการเพิ่มรายได้จากโฆษณาในแพลตฟอร์ม iOS ให้ได้สูงสุด โปรดขอสิทธิ์ความโปร่งใสและการติดตามของแอปเพื่อใช้ IDFA