Vega (FireTV) Integration

TrueX Ad Renderer for Amazon Vega (Kepler) OS provides a React Native component library for rendering interactive TrueX ads on FireTV devices.

Reference App

For a complete working example, check out the TrueX Vega Reference App.

info AI Assistance

Integrating with an AI coding assistant? Use our machine-readable documentation context:

• llms.txt: Documentation index and summary.
• llms-full.txt: Full documentation content.

Overview

The @truex/ad-renderer-vega package is a React Native component designed specifically for Amazon's Vega (Kepler) operating system, which powers FireTV devices. It enables publishers to deliver engaging interactive ad experiences that give viewers choice in their ad consumption.

Key Features

• React Native Component: Seamless integration with React Native applications
• TypeScript Support: Full type definitions for type-safe development
• Event-Driven Architecture: Comprehensive event system for ad lifecycle management
• WebView-Based Delivery: Leverages Amazon's WebView capabilities for rich interactive content
• Production Ready: Battle-tested in production environments

Platform Requirements

• Target Platform: Amazon Vega (Kepler) OS (FireTV devices)
• Framework: React Native 0.72.0
• Language: TypeScript/JavaScript
• React Version: 18.2.0

What You'll Need

Before integrating TrueX ads into your Vega application, ensure you have:

1. A React Native application running on Amazon Vega OS
2. Access to Amazon Device SDKs (@amazon-devices/* packages) - see Amazon Vega SDK Documentation
3. A VAST configuration URL or VAST XML from your ad server
4. Basic understanding of React hooks and event handling

Quick Example

Here's a minimal example of integrating TrueX ads:

import React, { useCallback } from 'react';
import {
  TruexAd,
  TruexAdEvent,
  TruexAdEventType,
  TruexAdEventHandler
} from '@truex/ad-renderer-vega';

// truexAdInfo contains the ad data from your VAST response
function TruexAdContainer({ truexAdInfo, onTruexAdFinished, onTruexAdFreePod }) {
  const handleTruexAdEvent = useCallback<TruexAdEventHandler>(
    event: TruexAdEvent) => {
      switch (event.type) {
        case TruexAdEventType.AD_COMPLETED:
        case TruexAdEventType.AD_ERROR:
        case TruexAdEventType.NO_ADS_AVAILABLE:
        case TruexAdEventType.USER_CANCEL_STREAM:
          // Ad finished, resume content
          onTruexAdFinished();
          break;

        case TruexAdEventType.AD_FREE_POD:
          // User earned ad credit
          onTruexAdFreePod()
          break;
      }
    },
    [ onTruexAdFinished, onTruexAdFreePod ]
  );

  // Parse the ad parameters from the VAST <AdParameters> node
  const adParameters = JSON.parse(truexAdInfo.adParameters);

  return (
    <TruexAd
      adParameters={adParameters}
      onAdEvent={handleTruexAdEvent}
    />
  );
}