Ad

Ads use GPT
(Google Publisher Tag) to
select and serve targeted ads. GPT is an ad tagging
library for DFP
(Doubleclick For Publishers) that can dynamically build ad requests. GPT takes
key details (targeting parameters) such as ad unit name, ad size, and custom
targeting, builds the request, and displays the ad on web pages.

When an advert is still loading or the app is offline, the ad component will show a
placeholder image.

DFP setup

DFP is used by the commercial team to set up the campaigns. They use this to
configure:

- Ad images of various sizes
- Type of ad (display, sponsored, etc)
- Date range of campaign
- Target number of impressions
- Loading pattern (more impression up front or even spread over time)
- Creatives per page (i.e. whether to repeat ads on page)
- Rotation weighting rules (e.g. optimise to place best performing ad more
often)
- Frequency capping
- Targeting

Targeting

Contact the internal commercial team for a list of targeting keys and their
relative descriptions.

$3

These are the parameters which are generic to the page such as the user cookie,
page title etc. To list all current targeting keys in the console:

``
googletag.pubads().getTargetingKeys();
`

To see the value for a specific key:

`
googletag.pubads().getTargeting('example_key');
`

$3

These are the params which are specific to each slot on the page. We can have
more than on the slot on the page.

Advert Brand Protection

This mechanism helps us to determine if a certain Ad should not be shown on a
particular page (e.g. because it contains terror or hate speech related
content).

$3

We use ADmantx as a Times brand safety mechanism. We send a uri to ADmantx, which crawls the page and returns an object of key value pairs they associate with that web page. The object has the follow keys: admants, categories, feelings, entities.

This object is then passed to the DFP code via page targeting, which determines whether to show ads or not.

Ad slots

We have distinct positions on a page where we can display Ads. We refer to them
as ad slots with a unique identifiers so that we can request ads for those
positions uniquely from DFP. Each ad slot allows for certain fixed ad sizes.

- Header - this is the slot on the top of the article page.
- Inline - this is the ad slot after the 5th paragraph of an article body
- Sponsored ads - TBD
- Pixel - TBD
- Pixelskin - TBD
- Pixelteads - TBD

Testing GPT and ADmantx

To test Ads in general, follow below steps:

1. Goto page where you want to test, and open the console.
2. Type googletag.openConsole(); on the console, this will open a DFP console
on the page and will display all the info about the ads on the page.
3. To look for all Ad slots on the page use googletag.pubads().getSlots();.
4. On the network panel, filter for ads?, this is the ad request that gpt makes
to DFP with all the relevant config.
5. In the ads request, the config is sent as query params, the cust_params key
has the page level config values and prev_scp has the slot level config
values.
6. On the network panel, filter for euasync01.admantx.com to see the key
values that we get from ADmantx.

Header bidding

This is an advanced programmatic technique, wherein publishers request for bids
from some ad-exchanges simultaneously before actually making calls to their ad
servers. The idea is that by letting multiple bidders bid for the same ad slot
at the same time, publishers increase their yield and make more money. The
returned bids are then passed to the ad server.

Prebid is a free open source library that helps publishers
implement header bidding. We load a prebid script which adds a pbjs object
onto the window object. The gpt request waits for prebid request to fulfill.
These are some of the bidders:

- appnexus
- Rubicon
- Criteo
- Pubmatic
- indexExchange
- Amazon - has a separate script that does the bidding for amazon.

Testing

Note: Test with local.thetimes.co.uk (some of the ads look for the domain from
which the request is coming)

1. Go to the page and open the console on the browser
2. Write pbjs.getBidResponses(); on the console, this gets all the bids we
have received for all the slots on the page
3. For Appnexus, to check if it has sent out request for bidding, filter for
adnxs in the network panel
4. For Rubicon, to check if it has sent out request for bidding, filter for
rubicon in the network panel
5. For Criteo, to check if it has sent out request for bidding, filter for
criteo in the network panel
6. For Pubmatic, to check if it has sent out request for bidding, filter for
pubmatic in the network panel
7. For indexExchange, to check if it has sent out request for bidding, filter
for casale in the network panel
8. For Amazon, to check if it has sent out request for bidding, filter for
domain aax.amazon-adsystem in the network panel. On Console, do
apstag.debug('enable'); and refresh page [This forces amazon ads to win]
9. Write googletag.pubads().getSlots().map(s=>s.getTargetingMap()); in the
console, the key hb_bidder is the winner for the slot

Contributing

Please read CONTRIBUTING.md before contributing to this
package

Running the code

Please see our main README.md to get the project running locally

Development

The code can be formatted and linted in accordance with the agreed standards.

`
yarn fmt
yarn lint
`

Testing

This package uses yarn (latest) to run unit tests on each
platform with jest.

`
yarn test:web
``

Visit the official
storybook
to see our available ads templates.

Future

Ads do not responsively resize at the moment, which is something we intend to
rectify in the near future. Also, brand protection leaves a blank advert on the
page at the moment, rather than a placeholder or nothing at all. We intend to
improve on this feature soon.