إعداد حزمة تطوير البرامج (SDK) لإعلانات الوسائط التفاعلية

اختيار النظام الأساسي: HTML5 Android iOS tvOS

تسهّل حِزم تطوير البرامج لإعلانات الوسائط التفاعلية (IMA SDK) دمج الإعلانات المتعددة الوسائط في مواقعك الإلكترونية وتطبيقاتك. يمكن لحِزم IMA SDK طلب الإعلانات من أي خادم إعلانات متوافق مع نموذج عرض إعلانات الفيديو (VAST) وإدارة تشغيل الإعلانات في تطبيقاتك. باستخدام حِزم IMA SDK من جهة العميل، يمكنك التحكّم في تشغيل محتوى الفيديو، بينما تتولّى حزمة SDK تشغيل الإعلانات. تظهر الإعلانات في مشغّل فيديو منفصل موضوع أعلى مشغّل فيديو محتوى التطبيق.

يوضّح هذا الدليل كيفية دمج حزمة IMA SDK في تطبيق مشغّل فيديو. لعرض نموذج تكامل مكتمل أو اتّباعه، نزِّل BasicExample من GitHub.

نظرة عامة على حزمة IMA SDK من جهة العميل

يتضمّن تنفيذ حزمة IMA SDK من جهة العميل أربعة مكوّنات رئيسية لحزمة SDK، يوضّحها هذا الدليل:

  • IMAAdDisplayContainer: هو كائن حاوية يحدّد المكان الذي تعرض فيه IMA عناصر واجهة مستخدِم الإعلان وتقيس إمكانية العرض، بما في ذلك العرض النشط و Open Measurement.
  • IMAAdsLoader: هو كائن يطلب الإعلانات ويتعامل مع الأحداث من ردود طلبات الإعلانات. يجب إنشاء مثيل واحد فقط لأداة تحميل الإعلانات، يمكن إعادة استخدامه طوال فترة استخدام التطبيق.
  • IMAAdsRequest: هو كائن يحدّد طلب إعلان. تحدّد طلبات الإعلانات عنوان URL لعلامة إعلان VAST، بالإضافة إلى مَعلمات إضافية، مثل أبعاد الإعلان.
  • IMAAdsManager: كائن يحتوي على الردّ على طلب الإعلان، ويتحكّم في تشغيل الإعلان، ويستمع إلى أحداث الإعلانات التي يتم إطلاقها من قِبل حزمة SDK.

المتطلبات الأساسية

قبل البدء، ستحتاج إلى ما يلي:

1- إنشاء مشروع جديد على Xcode

في Xcode، أنشئ مشروعًا جديدًا على iOS باستخدام Objective-C أو Swift. استخدِم BasicExample كاسم للمشروع.

‫2- إضافة حزمة IMA SDK إلى مشروع Xcode

لتثبيت حزمة IMA SDK، اختَر طريقة مفضّلة.

الإجراء المقترَح: تثبيت حزمة SDK باستخدام Swift Package Manager

تتوافق حزمة تطوير البرامج لإعلانات الوسائط التفاعلية مع Swift Package Manager بدءًا من الإصدار 3.18.4. لاستيراد حزمة Swift، أكمل الخطوات التالية:

  1. في Xcode، ثبِّت حزمة IMA SDK Swift Package من خلال الانتقال إلى ملف > إضافة موارد الاعتمادية للحزمة (File > Add Package Dependencies)....

  2. في الرسالة المنبثقة، ابحث عن مستودع GitHub لحزمة IMA iOS SDK Swift Package: ‏swift-package-manager-google-interactive-media-ads-ios.

  3. اختَر إصدار حزمة IMA SDK Swift Package الذي تريد استخدامه. بالنسبة إلى المشاريع الجديدة، ننصحك باستخدام الإصدار الرئيسي التالي أو إصدار أقدم.

بعد الانتهاء، يحلّ Xcode التبعيات المرتبطة بحِزمك وينزِّلها في الخلفية. لمزيد من التفاصيل حول كيفية إضافة تبعيات الحزمة ، يُرجى الاطّلاع على مقالة Apple.

تثبيت حزمة SDK باستخدام CocoaPods

‫CocoaPods هو مدير تبعيات لمشاريع Xcode، وهو الطريقة المقترَحة لتثبيت حزمة IMA SDK. لمزيد من المعلومات عن تثبيت CocoaPods أو استخدامه ، يُرجى الاطّلاع على مستندات CocoaPods. بعد تثبيت CocoaPods، استخدِم التعليمات التالية لتثبيت حزمة IMA SDK:

  1. في الدليل نفسه الذي يحتوي على ملف BasicExample.xcodeproj ، أنشئ ملفًا نصيًا باسم Podfile وأضِف الإعدادات التالية:

    Objective-C

    platform :ios, '15'
    
    target "BasicExample" do
      pod 'GoogleAds-IMA-iOS-SDK', '~> 3.31.0'
    end
    
    

    Swift

    platform :ios, '15'
    
    target "BasicExample" do
      pod 'GoogleAds-IMA-iOS-SDK', '~> 3.31.0'
    end
    
    
  2. من الدليل الذي يحتوي على ملف Podfile، شغِّل pod install --repo-update.

  3. تأكَّد من نجاح عملية التثبيت من خلال فتح ملف BasicExample.xcworkspace والتأكّد من أنّه يحتوي على مشروعَين: BasicExample وPods (التبعيات التي ثبَّتها CocoaPods).

تنزيل حزمة SDK وتثبيتها يدويًا

إذا كنت لا تريد استخدام Swift Package Manager، نزِّل حزمة IMA SDK وأضِفها يدويًا إلى مشروعك.

‫3- إنشاء مشغّل فيديو

أولاً، نفِّذ مشغّل فيديو. في البداية، لا يستخدم هذا المشغّل حزمة IMA SDK ولا يحتوي على أي طريقة لتشغيل المحتوى.

Objective-C

استورِد تبعيات المشغّل:

#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

استورِد تبعيات المشغّل:

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

  1. استورِد حزمة IMA SDK:

    @import GoogleInteractiveMediaAds;
    
  2. أنشئ متغيّرات لفئات 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

  1. استورِد حزمة IMA SDK:

    import GoogleInteractiveMediaAds
    
    
  2. أنشئ متغيّرات لفئات 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 عند انتهاء تشغيل المحتوى لكي تتمكّن من عرض الإعلانات بعد عرض الفيديو. يمكنك إجراء ذلك من خلال استدعاء طريقة 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- إعداد مفوَّض لمدير الإعلانات

أخيرًا، لإدارة الأحداث والتغييرات في الحالة، يحتاج مدير الإعلانات إلى مفوَّض خاص به. يحتوي 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()
}

الاستماع إلى أحداث التشغيل والإيقاف المؤقت

تؤدي آخر طريقتَين للمفوَّض اللتين عليك تنفيذهما إلى إطلاق أحداث التشغيل والإيقاف المؤقت على محتوى الفيديو الأساسي عندما تطلبها حزمة 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).