Logix Google IMA Ads Manager

Vega Open Beta Knowledge Base
1

Logix Google IMA Ads Manager

Logix Ads Manager enables support for Google IMA Ads (client-side) for VOD content.

Our Logix Ads Manager uses IMA SDK for HTML5 and display Ads using a WebView in a Vega Application.

Features

  1. Pre-roll, Mid-roll, Post-roll & bumper ads on VOD content
  2. Support for the AdsManager methods like pause, updateAdsRenderingSettings, setVolume
  3. Ability to listen to all IMA Ad Events like CONTENT_PAUSE_REQUESTED, CONTENT_RESUME_REQUESTED
  4. Ability to listen to all AdError events

For the complete documentation please visit - LogixAds Manager - Logituit

Requirements

  • Vega SDK v0.16+
  • React Native v0.72.0+
  • WebView v3.1.0

Installation

To use LogixAdsManager, you must import a few required libraries and then use a specific component to display the google IMA ads.

  1. Download Dependencies

    1. LogixAdsManager

      1. To download the LogixAdsManager visit here

      2. Once downloaded place the tarball file i.e. ‘logituit-logix-ads-manager-0.1.9.tgz’ in {root}/lib

    2. WebView

      1. Download WebView from here

      2. Place the tarball in {root}/lib

  2. Install Dependencies

    1. WebView - npm install file:./lib/webview_3.3.0_0.20.tgz

    2. LogixAdsManager - npm install file:./lib/logituit-logix-ads-manager-0.1.9.tgz

  3. Update the app manifest file: Open manifest.toml in your app folder, and add the following services and privileges:

# Web renderer service for rendering web content 
[[wants.service]] 
id = "com.amazon.webview.renderer_service" 
  
# If the app needs video playback 
[[wants.service]] 
id = "com.amazon.media.server" 
[[wants.service]] 
id = "com.amazon.mediametrics.service" 
  
# If the app needs audio playback 
[[wants.service]] 
id = "com.amazon.audio.stream" 
[[wants.service]] 
id = "com.amazon.audio.control" 

[[wants.service]]
id = "com.amazon.mediabuffer.service"
[[wants.service]]
id = "com.amazon.mediatransform.service"
  
# You may add other services as needed (for example, DRM)
  1. Import the required libraries: Open screen / component tsx file where you want to display google IMA ads and import like below:
import {
    AdErrorEventType,
    AdEvent,
    AdEventType,
    AdErrorEvent,
    AdsContainer,
    LogixIMAWrapper,
} from "@logituit/logix-ads-manager";
  1. Define a ref and onManagerLoaded function:
// In React Component 
// Creating a ref to store the instance of the SDK
const logixAdsManager = useRef<LogixIMAWrapper>(null);
const videoRef = useRef<VideoPlayer>(null);


// example code for adding player's eventListeners
useEffect(() => {
  setupPlayerEvents();
  return () => {
    removePlayerEvents();
  };
}, []);


// Sets the player's progress in the Ads Manager to make sure both are in sync.
// It is necessary to set the progress in Ads Manager for it to display midroll and postroll ads.
const updateDuration = () => {
  if (videoRef?.current?.currentTime && videoRef?.current?.duration) {
    logixAdsManager.current?.setProgress(
      videoRef?.current?.currentTime,
      videoRef?.current?.duration
    );
  }
};

// Notifies the Ads Manager that content playback has completed.
// This should be called when the player fires the 'ended' event.
// It is required to trigger post-roll ads and finalize the ad session.
const handleContentEnd = () => {
  logixAdsManager.current?.adsManager.contentComplete();
};
  
const setupPlayerEvents = () => {
  // Updating player's duration and currentTime to the adsManager.
  videoRef?.current?.addEventListener("timeupdate", updateDuration)
  videoRef?.current?.addEventListener("ended", handleContentEnd)
};

const removePlayerEvents = () => {
  videoRef?.current?.removeEventListener("timeupdate", updateDuration)
  videoRef?.current?.removeEventListener("ended", handleContentEnd)
};

// onManagerLoaded callback for LogixIMAWrapper
const onLoad = () => {
    //This function will be passed as prop(onManagerLoaded) to the AdsContainer
    // and will be called once the logix ads manager is loaded
    // We can write all ads related business logic in this function

    // Event listener for AD_ERROR event
    logixAdsManager.current?.adsManager.addEventListener(
        AdErrorEventType.AD_ERROR,
        (data: AdErrorEvent) => {
            console.log(
                "IMA error received",
                data.getError().getMessage(),
                data.getError().name,
            );
            // Play the content
            (global as any).gmedia?.play();
        }
    );

    

    logixAdsManager.current?.adsManager.addEventListener(
        AdEventType.CONTENT_PAUSE_REQUESTED,
        (event: AdEvent) => {
            console.log("LogixAdsManager: CONTENT_PAUSE_REQUESTED");

            // to get cue points
            logixAdsManager.current?.adsManager.getCuePoints().then((cuePoints) => {
                console.log("LogixAdsManager: cuepoints", cuePoints);
            });

            const ad = event.getAd();
            console.log("LogixAdsManager: AdId:", ad?.getAdId());

            // Pause the content
            (global as any).gmedia?.pause();
        }
    );

    logixAdsManager.current?.adsManager.addEventListener(
        AdEventType.CONTENT_RESUME_REQUESTED, () => {
            console.log("LogixAdsManager: CONTENT_RESUME_REQUESTED");

            // Play the content
            (global as any).gmedia?.play();
        }
    );

    logixAdsManager.current?.adsManager.addEventListener(
        AdEventType.FIRST_QUARTILE, () => {
            console.log("LogixAdsManager: FIRST_QUARTILE");
        }
    );

    logixAdsManager.current?.adsManager.addEventListener(
        AdEventType.MIDPOINT, () => {
            console.log("LogixAdsManager: MIDPOINT");
        }
    );

    logixAdsManager.current?.adsManager.addEventListener(
        AdEventType.THIRD_QUARTILE, () => {
            console.log("LogixAdsManager: THIRD_QUARTILE");
        }
    );

    // example: how to remove event listeners
    const eventId = logixAdsManager.current?.adsManager.addEventListener(
        AdEventType.CONTENT_PAUSE_REQUESTED, () => {
            console.log("LogixAdsManager: CONTENT_PAUSE_REQUESTED 2");
        }
    );

    // It is just an example; the events should be unsubscribed on unmount.
    // this removes the event listener after 2 seconds
    // but we can remove the event listeners according to the business logic
    // for eg remove all event listeners when player screen is unmounted
    setTimeout(() => {
        if (eventId) {
          logixAdsManager.current?.adsManager.removeEventListener(eventId);
        }
    }, 2000);

}
..
..
..
// APP CODE
  1. Render AdsContainer:
<View>
    <View>
        {/* Player Component */}
        <VideoPlayer ref={videoRef} />

    </View>

    {/* LOGIX IMA - begins */}
  <AdsContainer
    ref={logixAdsManager}
    adTagUrl={YOUR_AD_TAG_URL}
    onManagerLoaded={onLoad}
    onError={err => {
     console.log('ima onError', err.getError().getMessage());
      // Play the content
     (global as any).gmedia?.play();
   }}
  />
  {/* LOGIX IMA - ends */}
</View>
  1. updateAdsRenderingSettings
import { AdsRenderingSettings } from '@logituit/logix-ads-manager/dist/interface';

const adsRenderingSettings: AdsRenderingSettings = {
  enablePreloading: true,
  uiElements: ['countdown', 'adAttribution'],
  autoAlign: true,
  bitrate: -1,
  loadVideoTimeout: -1,
  mimeTypes: [],
  playAdsAfterTime: 0,
  restoreCustomPlaybackStateOnAdBreakComplete: false,
};

const onLoad = () => {
  ...

  logixAdsManager.current?.adsManager.updateAdsRenderingSettings(adsRenderingSettings);

  ...
}
  1. Destroying the adsManager
useEffect(() => {
    return () => {
      logixAdsManager.current?.destroy();
    };
  }, []);

Support

For general help and support or to file an issue / feature request, please contact keplersupport@logituit.com