بدء استخدام إضافة إعلانات الوسائط التفاعلية في Exoplayer

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

يوضّح هذا الدليل كيفية دمج "حزمة تطوير البرامج لإعلانات الوسائط التفاعلية" في مشروع فارغ في "استوديو Android" باستخدام إضافة ExoPlayer لإعلانات الوسائط التفاعلية. إذا أردت الاطّلاع على نموذج تكامل مكتمل أو اتّباعه، نزِّل BasicExample من GitHub.

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

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

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

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

قبل البدء، يجب أن يتوفّر لديك الإصدار 3.0 من Android Studio أو إصدار أحدث.

‫1. إنشاء مشروع جديد في "استوديو Android"

لإنشاء مشروع Android Studio، أكمِل الخطوات التالية:

  1. ابدأ تشغيل "استوديو Android".
  2. اختَر بدء مشروع جديد في "استوديو Android".
  3. في صفحة اختيار مشروعك، اختَر نموذج نشاط فارغ.
  4. انقر على التالي.
  5. في صفحة إعداد مشروعك، حدِّد اسمًا لمشروعك واختَر Java كلغة.
  6. انقر على إنهاء.

2. إضافة إضافة ExoPlayer IMA إلى مشروعك

أولاً، في ملف build.gradle على مستوى التطبيق، أضِف عمليات استيراد للإضافة إلى قسم التبعيات. نظرًا لحجم إضافة ExoPlayer IMA، يجب تنفيذ ميزة multidex وتفعيلها هنا. ويكون ذلك ضروريًا للتطبيقات التي تم ضبط قيمة minSdkVersion فيها على 20 أو أقل. أضِف أيضًا compileOptions جديدة لتحديد معلومات التوافق مع إصدار Java.

apply plugin: 'com.android.application'

android {
    namespace 'com.google.ads.interactivemedia.v3.samples.exoplayerexample'
    compileSdk 36

    // Java 17 required by Gradle 8+
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_17
        targetCompatibility JavaVersion.VERSION_17
    }

    defaultConfig {
        applicationId "com.google.ads.interactivemedia.v3.samples.exoplayerexample"
        minSdkVersion 21
        targetSdkVersion 36
        multiDexEnabled true
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

repositories {
    google()
    mavenCentral()
}

dependencies {
    def media3_version = "1.8.0"
    implementation "androidx.media3:media3-ui:$media3_version"
    implementation "androidx.media3:media3-exoplayer:$media3_version"

    // The library adds the IMA ExoPlayer integration for ads.
    implementation "androidx.media3:media3-exoplayer-ima:$media3_version"

    implementation 'androidx.multidex:multidex:2.0.1'
}

3- إنشاء حاوية واجهة مستخدم الإعلان

أنشئ العرض الذي سيتم استخدامه كـ ExoPlayer PlayerView من خلال إنشاء androidx.media3.ui.PlayerView. غيِّر أيضًا androidx.constraintlayout.widget.ConstraintLayout إلى LinearLayout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MyActivity"
    tools:ignore="MergeRootFrame">

    <androidx.media3.ui.PlayerView
        android:id="@+id/player_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!-- UI element for viewing SDK event log -->
    <TextView
        android:id="@+id/logText"
        android:gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="100"
        android:scrollbars="vertical"
        android:textSize="@dimen/font_size">
    </TextView>

</LinearLayout>

‫4. استيراد إضافة ExoPlayer IMA

أضِف عبارات الاستيراد الخاصة بإضافة ExoPlayer:

import static android.os.Build.VERSION.SDK_INT;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
import android.text.method.ScrollingMovementMethod;
import android.util.Log;
import android.widget.TextView;
import androidx.media3.common.MediaItem;
import androidx.media3.datasource.DataSource;
import androidx.media3.datasource.DefaultDataSource;
import androidx.media3.exoplayer.ExoPlayer;
import androidx.media3.exoplayer.ima.ImaAdsLoader;
import androidx.media3.exoplayer.source.DefaultMediaSourceFactory;
import androidx.media3.exoplayer.source.MediaSource;
import androidx.media3.ui.PlayerView;
import androidx.multidex.MultiDex;
import com.google.ads.interactivemedia.v3.api.AdEvent;
import com.google.ads.interactivemedia.v3.api.ImaSdkFactory;
import com.google.ads.interactivemedia.v3.api.ImaSdkSettings;

بعد ذلك، عدِّل فئة MainActivity لتوسيع Activity من خلال إضافة متغيرات خاصة لكل من PlayerView وExoPlayer وImaAdsLoader وImaSdkSettings:

/** Main Activity. */
@SuppressLint("UnsafeOptInUsageError")
/* @SuppressLint is needed for new media3 APIs. */
public class MyActivity extends Activity {

  private static final String SAMPLE_VIDEO_URL =
      "https://storage.googleapis.com/gvabox/media/samples/stock.mp4";
  private static final String SAMPLE_VAST_TAG_URL =
      "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 static final String LOG_TAG = "ImaExoPlayerExample";

  private PlayerView playerView;
  private TextView logText;
  private ExoPlayer player;
  private ImaAdsLoader adsLoader;
  private ImaSdkSettings imaSdkSettings;

5- إنشاء مثيل adsLoader

استبدِل طريقة onCreate وأضِف عمليات تعيين المتغيرات المطلوبة لإنشاء عنصر adsLoader جديد باستخدام عنوان URL لعلامة الإعلان.

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_my);
  MultiDex.install(this);

  // Initialize the IMA SDK as early as possible when the app starts. If your app already
  // overrides Application.onCreate(), call this method inside the onCreate() method.
  // https://developer.android.com/topic/performance/vitals/launch-time#app-creation
  ImaSdkFactory.getInstance().initialize(this, getImaSdkSettings());

  playerView = findViewById(R.id.player_view);

  // Create an AdsLoader.
  adsLoader =
      new ImaAdsLoader.Builder(/* context= */ this)
          .setAdEventListener(buildAdEventListener())
          .setImaSdkSettings(getImaSdkSettings())
          .build();
}

أنشئ الطريقة buildAdEventListener() لعرض كائن AdEventListener لتسجيل أحداث IMA لأغراض تصحيح الأخطاء. تتعامل إضافة ExoPlayer IMA مع أحداث IMA، ولا تحتاج إلى أي شيء إضافي هنا لتعمل.

public AdEvent.AdEventListener buildAdEventListener() {
  logText = findViewById(R.id.logText);
  logText.setMovementMethod(new ScrollingMovementMethod());

  return event -> {
    AdEvent.AdEventType eventType = event.getType();
    if (eventType == AdEvent.AdEventType.AD_PROGRESS) {
      return;
    }
    String log = "IMA event: " + eventType;
    if (logText != null) {
      logText.append(log + "\n");
    }
    Log.i(LOG_TAG, log);
  };
}

أنشئ طريقة المساعد getImaSdkSettings() لعرض عنصر ImaSdkSettings من أجل ضبط أي إعدادات لحزمة تطوير البرامج لإعلانات الوسائط التفاعلية:

private ImaSdkSettings getImaSdkSettings() {
  if (imaSdkSettings == null) {
    imaSdkSettings = ImaSdkFactory.getInstance().createImaSdkSettings();
    // Set any IMA SDK settings here.
  }
  return imaSdkSettings;
}

6. تهيئة المشغّل وإصداره

أضِف طرقًا لإصدار المشغّل وإعداده. في طريقة initializePlayer()، أنشئ ExoPlayer. بعد ذلك، أنشئ AdsMediaSource واضبطه على المشغّل:

private void releasePlayer() {
  adsLoader.setPlayer(null);
  playerView.setPlayer(null);
  player.release();
  player = null;
}

private void initializePlayer() {
  // Set up the factory for media sources, passing the ads loader and ad view providers.
  DataSource.Factory dataSourceFactory = new DefaultDataSource.Factory(this);

  MediaSource.Factory mediaSourceFactory =
      new DefaultMediaSourceFactory(dataSourceFactory)
          .setLocalAdInsertionComponents(unusedAdTagUri -> adsLoader, playerView);

  // Create an ExoPlayer and set it as the player for content and ads.
  player = new ExoPlayer.Builder(this).setMediaSourceFactory(mediaSourceFactory).build();
  playerView.setPlayer(player);
  adsLoader.setPlayer(player);

  // Create the MediaItem to play, specifying the content URI and ad tag URI.
  Uri contentUri = Uri.parse(SAMPLE_VIDEO_URL);
  Uri adTagUri = Uri.parse(SAMPLE_VAST_TAG_URL);
  MediaItem mediaItem =
      new MediaItem.Builder()
          .setUri(contentUri)
          .setAdsConfiguration(new MediaItem.AdsConfiguration.Builder(adTagUri).build())
          .build();

  // Prepare the content and ad to be played with the SimpleExoPlayer.
  player.setMediaItem(mediaItem);
  player.prepare();

  // Set PlayWhenReady. If true, content and ads will autoplay.
  player.setPlayWhenReady(false);
}

7. التعامل مع أحداث اللاعب

أخيرًا، أنشئ استدعاءات لأحداث مراحل نشاط المشغّل:

  • onStart
  • onResume
  • onStop
  • onPause
  • onDestroy
@Override
public void onStart() {
  super.onStart();
  if (SDK_INT > 23) {
    initializePlayer();
    if (playerView != null) {
      playerView.onResume();
    }
  }
}

@Override
public void onResume() {
  super.onResume();
  if (SDK_INT <= 23 || player == null) {
    initializePlayer();
    if (playerView != null) {
      playerView.onResume();
    }
  }
}

@Override
public void onPause() {
  super.onPause();
  if (SDK_INT <= 23) {
    if (playerView != null) {
      playerView.onPause();
    }
    releasePlayer();
  }
}

@Override
public void onStop() {
  super.onStop();
  if (SDK_INT > 23) {
    if (playerView != null) {
      playerView.onPause();
    }
    releasePlayer();
  }
}

@Override
protected void onDestroy() {
  adsLoader.release();

  super.onDestroy();
}

يمكنك الآن طلب الإعلانات وعرضها بنجاح باستخدام "حزمة تطوير البرامج للإعلانات التفاعلية". للاطّلاع على المزيد من الميزات المتقدّمة، يمكنك استكشاف الأدلة الأخرى أو الأمثلة على GitHub.