React Native AEP Media Extension

Notice of deprecation

Since April 25, 2023, Apple has required apps submitted to the App Store to be built with Xcode 14.1 or later. The Experience Platform Mobile SDKs and extensions outlined below were built with prior versions of Xcode and are no longer compatible with iOS and iPadOS given Apple’s current App Store requirements. Consequently, on August 31, 2023, Adobe will be deprecating support for the following Experience Platform Mobile SDKs and wrapper extensions:

• ACP iOS SDK
• Cordova
• Flutter for ACP
• React Native for ACP
• Xamarin

After August 31, 2023, applications already submitted to the App Store that contain these SDKs and wrapper extensions will continue to operate, however, Adobe will not be providing security updates or bug fixes, and these SDKs and wrapper extensions will be provided as-is exclusive of any warranty, due to the App Store policy outlined above.

We encourage all customers to migrate to the latest Adobe Experience Platform versions of the Mobile SDK to ensure continued compatibility and support. Documentation for the latest versions of the Adobe Experience Platform Mobile SDKs can be found here. The iOS migration guide can be found here.

---

@adobe/react-native-acpmedia is a wrapper around the iOS, tvOS and Android AEP Media SDK to allow for integration with React Native applications. Functionality to enable Adobe Media Analytics is provided entirely through JavaScript documented below.

Installation

You need to install the SDK with npm and configure the native Android/iOS project in your react native project. Before installing the Media extension it is recommended to begin by installing the Core extension and the Analytics extension.

Note: If you are new to React Native we suggest you follow the React Native Getting Started page before continuing.

1. Create React Native project

First create a React Native project:

react-native init MyReactApp

Note: Follow React Native tvos support to create app with tvos target.

2. Install JavaScript packages

Install and link the @adobe/react-native-acpmedia package:

cd MyReactApp
npm install @adobe/react-native-acpmedia

2.1 Link

• React Native 0.60+

CLI autolink feature links the module while building the app.

• React Native <= 0.59

react-native link @adobe/react-native-acpmedia

Note For iOS using cocoapods, run:

cd ios/ && pod install

Tests

This project contains jest unit tests which are contained in the __tests__ directory, to run the tests locally:

make run-tests-locally

Usage

Media

Importing the extension:

import {ACPMedia} from '@adobe/react-native-acpmedia';

Getting the extension version:

ACPMedia.extensionVersion().then(version => console.log("AdobeExperienceSDK: ACPMedia version: " + version));

Registering the extension with ACPCore:

Note: It is recommended to initialize the SDK via native code inside your AppDelegate and MainApplication in iOS and Android respectively.

iOS

#import <RCTACPMedia/ACPMedia.h>

[ACPMedia registerExtension];

Android:

import com.adobe.marketing.mobile.Media;

Media.registerExtension();

Media API:

Create a media tracker:

ACPMedia.createTracker().then(tracker =>
  this.setState({currentTracker: tracker})
);

Create a media tracker with optional configuration:

var config = new Object();
config[ACPMediaConstants.ACPMediaKeyConfigChannel] = "customer-channel";
config[ACPMediaConstants.ACPMediaKeyConfigDownloadedContent] = true;
ACPMedia.createTrackerWithConfig(config).then(tracker =>
  this.setState({currentTracker: tracker})
);

Create a Media object:

let mediaObject = ACPMedia.createMediaObject("media-name", "media-id", 60, ACPMediaConstants.ACPMediaStreamTypeVod, ACPMediaType.Video);

Create an AdBreak object:

let adBreakObject = ACPMedia.createAdBreakObject("adbreak-name", 1, 0);

Create an Ad object:

let adObject = ACPMedia.createAdObject("media-name", "ad-id", 1, 30);

Create a chapter object:

let chapterObject = ACPMedia.createChapterObject('chapter-name', 2, 30, 1);

Create a QoE object:

let qoeObject = ACPMedia.createQoEObject(1000000, 2, 25, 10);

Create a State object:

let stateObject = ACPMedia.createStateObject(ACPMediaConstants.ACPMediaPlayerStateFullScreen);

Media Tracker API:

trackSessionStart:

let mediaObject = ACPMedia.createMediaObject("media-name", "media-id", 60, ACPMediaConstants.ACPMediaStreamTypeVod, ACPMediaType.Video);
var mediaMetadata = new Object();
mediaMetadata[ACPMediaConstants.ACPVideoMetadataKeyShow] = "Sample Show";
mediaMetadata[ACPMediaConstants.ACPVideoMetadataKeySeason] = "Sample Season";

// Custom metadata keys
mediaMetadata["isUserLoggedIn"] = "false";
mediaMetadata["tvStation"] = "Sample TV station";

tracker.trackSessionStart(mediaObject, mediaMetadata);

trackPlay:

tracker.trackPlay();

trackPause:

tracker.trackPause();

trackComplete:

tracker.trackComplete();

trackSessionEnd:

tracker.trackSessionEnd();

trackError:

tracker.trackError("errorId");

trackEvent APIs

Tracking AdBreaks

trackEvent(AdBreakStart):

let adBreakObject = ACPMedia.createAdBreakObject("adbreakName", 1, 0);
tracker.trackEvent(ACPMediaEvent.EventAdBreakStart, adBreakObject, null);

trackEvent(AdBreakComplete):

tracker.trackEvent(ACPMediaEvent.EventAdBreakComplete, null, null);

Tracking ads

trackEvent(AdStart):

let adObject = ACPMedia.createAdObject("adName", "adId", 1.0, 20.0);
var adMetadata = new Object();
adMetadata[ACPMediaConstants.ACPAdMetadataKeyAdvertiser] = "SampleAdvertiser";

tracker.trackEvent(ACPMediaEvent.EventAdStart, adObject, adMetadata);

trackEvent(AdSkip):

tracker.trackEvent(ACPMediaEvent.EventAdSkip, null, null);

trackEvent(AdComplete):

tracker.trackEvent(ACPMediaEvent.EventAdComplete, null, null);

Tracking chapters

trackEvent(ChapterStart):

let chapterObject = ACPMedia.createChapterObject("chapterName", 1.0, 30.0, 1.0);
var chapterMetadata = new Object();
chapterMetadata["segmentType"] = "Sample segment type";

tracker.trackEvent(ACPMediaEvent.EventChapterStart, chapterObject, chapterMetadata);

trackEvent(ChapterSkip):

tracker.trackEvent(ACPMediaEvent.EventChapterSkip, null, null);

trackEvent(ChapterComplete):

tracker.trackEvent(ACPMediaEvent.EventChapterComplete, null, null);

Tracking Player States

trackEvent(StateStart):

let stateObject = ACPMedia.createStateObject(ACPMediaConstants.ACPMediaPlayerStateFullScreen);

tracker.trackEvent(ACPMediaEvent.EventStateStart, stateObject, null);

trackEvent(StateEnd):

let stateObject = ACPMedia.createStateObject(ACPMediaConstants.ACPMediaPlayerStateFullScreen);

tracker.trackEvent(ACPMediaEvent.EventStateEnd, stateObject, null);

Tracking Playback events

trackEvent(BufferStart):

tracker.trackEvent(ACPMediaEvent.EventBufferStart, null, null);

trackEvent(BufferComplete):

tracker.trackEvent(ACPMediaEvent.EventBufferComplete, null, null);

trackEvent(SeekStart):

tracker.trackEvent(ACPMediaEvent.EventSeekStart, null, null);

trackEvent(SeekComplete):

tracker.trackEvent(ACPMediaEvent.EventSeekComplete, null, null);

Tracking bitrate changes

trackEvent(BitrateChange):

// If the new bitrate value is available provide it to the tracker.
let qoeObject = ACPMedia.createQoEObject(2000000, 4, 23, 11);
tracker.updateQoEObject(qoeObject);

tracker.trackEvent(ACPMediaEvent.EventBitrateChange, null, null);

updateCurrentPlayhead:

tracker.updateCurrentPlayhead(1);

updateQoEObject:

let qoeObject = ACPMedia.createQoEObject(1000000, 2, 25, 10);
tracker.updateQoEObject(qoeObject);

Media Constants:

MediaType:

This defines the type of a media that is currently tracked.

import {ACPMediaType} from '@adobe/react-native-acpmedia';

ACPMediaType.Video
ACPMediaType.Audio

StreamType:

This defines the stream type of the content that is currently tracked.

import {ACPMediaConstants} from '@adobe/react-native-acpmedia';

ACPMediaConstants.ACPMediaStreamTypeVod
ACPMediaConstants.ACPMediaStreamTypeLive
ACPMediaConstants.ACPMediaConstantsACPMediaStreamTypeLinear
ACPMediaConstants.ACPMediaStreamTypePodcast
ACPMediaConstants.ACPMediaStreamTypeAudiobook
ACPMediaConstants.ACPMediaStreamTypeAod

Standard video constants

This defines the standard metadata keys for video streams.

import {ACPMediaConstants} from '@adobe/react-native-acpmedia';

ACPMediaConstants.ACPVideoMetadataKeyShow
ACPMediaConstants.ACPVideoMetadataKeySeason
ACPMediaConstants.ACPVideoMetadataKeyEpisode
ACPMediaConstants.ACPVideoMetadataKeyAssetId
ACPMediaConstants.ACPVideoMetadataKeyGenre
ACPMediaConstants.ACPVideoMetadataKeyFirstAirDate
ACPMediaConstants.ACPVideoMetadataKeyFirstDigitalDate
ACPMediaConstants.ACPVideoMetadataKeyRating
ACPMediaConstants.ACPVideoMetadataKeyOriginator
ACPMediaConstants.ACPVideoMetadataKeyNetwork
ACPMediaConstants.ACPVideoMetadataKeyShowType
ACPMediaConstants.ACPVideoMetadataKeyAdLoad
ACPMediaConstants.ACPVideoMetadataKeyMvpd
ACPMediaConstants.ACPVideoMetadataKeyAuthorized
ACPMediaConstants.ACPVideoMetadataKeyDayPart
ACPMediaConstants.ACPVideoMetadataKeyFeed
ACPMediaConstants.ACPVideoMetadataKeyStreamFormat

Standard audio constants

This defines the standard metadata keys for audio streams.

import {ACPMediaConstants} from '@adobe/react-native-acpmedia';

ACPMediaConstants.ACPAudioMetadataKeyArtist
ACPMediaConstants.ACPAudioMetadataKeyAlbum
ACPMediaConstants.ACPAudioMetadataKeyLabel
ACPMediaConstants.ACPAudioMetadataKeyAuthor
ACPMediaConstants.ACPAudioMetadataKeyStation
ACPMediaConstants.ACPAudioMetadataKeyPublisher

Standard ad constants

This defines the standard metadata keys for ads.

import {ACPMediaConstants} from '@adobe/react-native-acpmedia';

ACPMediaConstants.ACPAdMetadataKeyAdvertiser
ACPMediaConstants.ACPAdMetadataKeyCampaignId
ACPMediaConstants.ACPAdMetadataKeyCreativeId
ACPMediaConstants.ACPAdMetadataKeyPlacementId
ACPMediaConstants.ACPAdMetadataKeySiteId
ACPMediaConstants.ACPAdMetadataKeyCreativeUrl

Player state constants

import {ACPMediaConstants} from '@adobe/react-native-acpmedia';

ACPMediaConstants.ACPMediaPlayerStateFullScreen
ACPMediaConstants.ACPMediaPlayerStatePictureInPicture
ACPMediaConstants.ACPMediaPlayerStateClosedCaption
ACPMediaConstants.ACPMediaPlayerStateInFocus
ACPMediaConstants.ACPMediaPlayerStateMute

Media events

This defines the type of a tracking event.

import {ACPMediaEvent} from '@adobe/react-native-acpmedia';

ACPMediaEvent.EventAdBreakStart
ACPMediaEvent.EventAdBreakComplete
ACPMediaEvent.EventAdStart
ACPMediaEvent.EventAdComplete
ACPMediaEvent.EventAdSkip
ACPMediaEvent.EventChapterStart
ACPMediaEvent.EventChapterComplete
ACPMediaEvent.EventChapterSkip
ACPMediaEvent.EventSeekStart
ACPMediaEvent.EventSeekComplete
ACPMediaEvent.EventBufferStart
ACPMediaEvent.EventBufferComplete
ACPMediaEvent.EventBitrateChange

Media resume

Constant to denote that the current tracking session is resuming a previously closed session. This information must be provided when starting a tracking session.

import {ACPMediaConstants} from '@adobe/react-native-acpmedia';

ACPMediaConstants.ACPMediaKeyMediaResumed

Contributing

See CONTRIBUTING

License

See LICENSE