AdTech Coding Challenge

You will be implementing a simple header bidding client in JavaScript which contains a tiny subset of functionality from our live script.

Resources

GPT Documentation
A9 Display Example
A9 Display Deep Example
A9 Integration Verification
A9 API Reference
Validation code
Validation visual

Setup

Prerequisites

cd /path/to/app/
npm install

Compile

cd /path/to/app/
node_modules/.bin/webpack -p

Start Server

cd /path/to/app/
npm start

You can access app at localhost:8080

Dev Mode (Runs server and live reloads JS)

cd /path/to/app/
npm run dev

You can access app at localhost:8080

Tips

Get started by running dev move and visit localhost:8080

cd app; npm install; npm run dev

Use the following for debugging

googletag.openConsole(); //to debug gpt
apstag.debug('enable'); //activates aps debug mode and always returns test creative
googletag.pubads().refresh(); //forces an ad load/refresh

When requesting bids from amazon, this is the config you're expected to use

[{
  slotID: 'SetRectangleHeader',
  slotName: 'SetRectangleHeader',
  sizes: [[300, 250]],
}, 
{
  slotID: 'SetPageFooter',
  slotName: 'SetPageFooter',
  sizes: [[728, 90]],
}]

To validate that your code works,

• On page (localhost:8080), activate aps debug mode by running apstag.debug('enable'); in console
• Refresh your page
• Validate that you see orange creatives as shown in this screenshot. It's okay if this doesn't happen 100% of times as long as the next steps happen 100% of times.
• Open network tab in dev tools and filter for google ads requests (use ads?)
• Refresh your page
• Inspect the payload sent to google and ensure that amazon key values are set in the request as shown in this screenshot

To test that it works, enable apstag debug mode and confirm that you are seeing a test orange creative.

Submission

Please zip up your code and send to the Ads engineering manager.