THEOplayer React-Native Adobe Connector

An Adobe analytics connector for @theoplayer/react-native.

Installation

The @theoplayer/react-native package has a peer dependency on react-native-device-info, which has to be installed as well:

``sh npm install \ react-native-device-info \ @theoplayer/react-native-analytics-adobe`

[//]: # (npm install @theoplayer/react-native-analytics-adobe)

`Usage`

`$3`

Create the connector by providing the THEOplayerinstance, the Media Collection API's end point, Visitor Experience Cloud Org ID, Analytics Report Suite ID and the Analytics Tracking Server URL.

`tsx import { useAdobe } from '@theoplayer/react-native-analytics-adobe';

const uri = ""; const ecid = ""; const sid = ""; const trackingUrl = ""; const metadata = {}; // Optionally provide initial metadata const userAgent = ""; // Optionally provide a custom user-agent header value. const debug = true; // Optionally provide a debug flag for extra logging. const useNative = true; // Use a native connector on iOS & Android;false by default.

const App = () => { const [adobe, initAdobe] = useAdobe(uri, ecid, sid, trackingUrl, metadata, userAgent, debug, useNative);

const onPlayerReady = (player: THEOplayer) => { // Initialize Adobe connector initAdobe(player); }

return (); }`

The Adobe connector will dispatch player events to Adobe with standard metadata the player has access to, such as duration or whether it is a live or vod.

`$3`

The connector allows passing or updating the current asset's metadata at any time:

`typescript import { AdobeMetaData } from "./Types";

const onUpdateMetadata = () => { const metadata: AdobeMetaData = { "params": { "media.channelName": "channelName", "media.id": "mediaId" }, "customMetadata": { "customTag1": "customValue1", "customTag2": "customValue2" } }; adobe.current?.updateMetadata(metadata); };``

Usage

$3

Create the connector by providing the THEOplayer

 instance, the Media Collection API's end point,
Visitor Experience Cloud Org ID, Analytics Report Suite ID and the Analytics Tracking Server URL.

tsx
import { useAdobe } from '@theoplayer/react-native-analytics-adobe';

const uri = "";
const ecid = "";
const sid = "";
const trackingUrl = "";
const metadata = {}; // Optionally provide initial metadata
const userAgent = ""; // Optionally provide a custom user-agent header value.
const debug = true; // Optionally provide a debug flag for extra logging.
const useNative = true; // Use a native connector on iOS & Android;

false by default.

const App = () => {
  const [adobe, initAdobe] = useAdobe(uri, ecid, sid, trackingUrl, metadata, userAgent, debug, useNative);

  const onPlayerReady = (player: THEOplayer) => {
    // Initialize Adobe connector
    initAdobe(player);
  }

  return ();
}

The Adobe connector will dispatch player events to Adobe with standard metadata the player has access to,
such as duration or whether it is a live or vod.

$3

The connector allows passing or updating the current asset's metadata at any time:

typescript
import { AdobeMetaData } from "./Types";

const onUpdateMetadata = () => {
  const metadata: AdobeMetaData = {
    "params": {
      "media.channelName": "channelName",
      "media.id": "mediaId"
    },
    "customMetadata": {
      "customTag1": "customValue1",
      "customTag2": "customValue2"
    }
  };
  adobe.current?.updateMetadata(metadata);
};