@truex/truex-html5-tar v1.0.0

TruexAdRenderer-HTML5 (HTML5 TAR)

Here is the full documentation on how to get up and running with the HTML5 TruexAdRenderer (TAR).

HTML5 TAR Workflow

Dependencies

Yarn: npm install -g yarn

After installing Yarn:

yarn install

HTML5 TAR Development

npm start

This will launch the Webpack Dev Server @ localhost:8080 that you will be using to develop against.

HTML5 TAR Production Build

npm run prod

This will create the production build. The difference between the dev build and the production build is that the production build uses additional plugins for optimization such as UglifyJS as well as stripping out unneeded webpack specific code.

For more information, look at webpack.prod.js.

HTML5 TAR Testing

We use Jest for our unit testing. Jest gives us BDD style syntax for writing tests as well as a tooling to support continuous testing and coverage reports.

Running Tests

npm test

Continuous Testing

To have tests run automatically while you develop:

npm run watch

Container 3 Development Workflow for HTML5 CTV

Setup

1. Clone the container_core repo.
2. Complete the Setup as documented in its README.md file (yarn install, basically).
3. Get the ad_vars from a working Container 3 ad, as an example, here's how to get the ad_vars from the Kung Fu Panda Container 3 ad:
   • Get the window_url for the ad by navigating to http://qa-get.truex.com/81551ffa2b851abc5372ab9ed9f1f58adabe5203/vast/config?network_user_id=test_html5_00002. The window_url can be found in the top level ads object that's returned.
   • Navigate to that window_url in Chrome (note). Ensure your ad blocker is disabled. You should see the ad render at this point.
   • Open up the Chrome Dev Tools, and click on the Network tab.
   • Refresh the page so that all transactions are visible.
   • Still from the Network tab, filter transactions by typing json in the search field at the top. This should filter down the list to the engage.json call.
   • Click on that call. The ad_vars is the displayed JSON blob.
4. Copy the ad_vars into the src/pwamp/src/txm_params/_desktop_ad_vars.js file, replacing the existing desktopAdVars payload.
5. Run npm start to build Container 3 and run the local web server.

Development and Testing

1. Navigate to localhost:8080/desktop.html, the Kung Fu Panda ad configured in Setup should render, but this time based on your local Container 3 code base.
2. You're now able to make changes to the code base, which are reloaded on the fly.

Choice Card Development Workflow

Setup

1. Clone the integration_core repo.
2. Complete the Setup as documented in its README.md file (brew install grunt, npm install).
3. Start the integration_core dev server: grunt server.
4. Verify that the dev server is up and can serve up the Choice Card JS by browsing to: http://localhost:8001/fw_renderers/choicecard-tv-tar.js.
5. Back in the current repo (TruexAdRenderer-HTML5), edit src/desktop/desktop.js to load your local version of the Choice Card by changing the URL loaded by getScript to http://localhost:8001/fw_renderers/choicecard-tv-tar.js.
6. Run npm start to build the TruexAdRenderer-HTML5 repo and run the local web server.

Development and Testing

1. Navigate to localhost:8080/desktop.html, the Choice Card should render, but this time based on your local integration_core code base.
2. You're now able to make changes to the choicecard-tv-tar.js code base, which are reloaded on the fly.
3. The TruexAdRenderer-HTML5 includes a hard coded vast_config which includes the Choice Card configuration. This can be found in src/hulu_ctv/tx_initialize_hulu_ctv.js. Edit this file to test changes to the card configuration.