HTML5 Integration

The TrueX Ad Renderer (TAR) for HTML5 renders Infillion interactive ads - TrueX and IDVx - inside web sites and web apps that play long-form video with ad breaks, known as FEP (Full Episode Player) apps. It leverages your app's existing ad server and content delivery mechanism, for example SSAI.

TAR is the npm package @truex/ad-renderer. Your app creates, initializes, and displays a TruexAdRenderer instance. The renderer requests the ad from Infillion, builds the UI (the TrueX choice card and the interactive ad unit), and emits events when your app needs to act.

Your app still parses the ad response, detects when an Infillion ad is due, pauses the stream, creates the renderer, and handles its events. It is also responsible for skipping the ads in the current pod when the renderer says so.

This is also the base renderer for the native SDKs: the Android, iOS, and Vega SDKs wrap it. See Choose Your Integration.

Reference Apps

For complete working examples, see the Examples page.

Supported Devices

The renderer has a class for each device type - see Choosing the Renderer Class:

• Connected TV: HTML5-based CTV apps, web-enabled smart TVs, and game consoles - TruexAdRendererCTV
• Desktop browsers - TruexAdRendererDesktop
• Mobile browsers and webviews - TruexAdRendererMobile

TrueX and IDVx

Both ad products are requested with a VAST tag in one of two formats, generic or companion - see VAST Tag Types. The same renderer renders both, and your app tells them apart by the VAST <AdSystem> value:

	TrueX	IDVx
<AdSystem>	trueX	IDVx
Entry	Opt-in through a choice card	Starts automatically
Pod position	First ad in the pod only	Any slot
Reward	adFreePod - the remaining ads in the pod are skipped	None - the pod continues

What You'll Need

• A web app with a video player and an ad integration (Google IMA CSAI, Google IMA DAI, another SSAI vendor, or your own ad layer)
• The @truex/ad-renderer package - see SDK Integration
• A way to show a full-screen element above your video player where the renderer can show the interactive ad
• A test VAST tag from your Infillion contact - see Integration Flow

Next Steps

• Integration Flow - what Infillion provides, and what your app has to build
• SDK Integration - adding the package, choosing the renderer class, and calling init and start
• Events - every event the renderer emits
• Examples - reference apps for CSAI, Google IMA CSAI, and Google IMA SSAI