Socket
Socket
Sign inDemoInstall

@financial-times/ads-branded-content

Package Overview
Dependencies
1
Maintainers
18
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@financial-times/ads-branded-content

Fetch native ads for FT.com sites and FT app


Version published
Weekly downloads
1
Maintainers
18
Created
Weekly downloads
 

Readme

Source

ads-branded-content

This is a client side library to get Native Ads from DFP as JSON, you're responsible for rendering and loading the tracking pixel after the ad has been rendered.

Installation

npm install --S @financial-times/ads-branded-content

get(oAds, options)

Returns a promise that resolves the ad's data for display in an x-teaser compatible format

  • oAds: Initialised oAds instance

Options

  • skipSmartmatch [ Optional ]: for creating DFP url, the default is false. When Promoted Contents (Smartmatches) don't include as a your page's ads, set this true.
  • pageUrl: Current page's url for targeting purpose with smartmatch, needs to be set when smartmatch is on
  • pos [ Optional ]: defaults to 'native'. Sets the pos targeting parameter for targeting the ad. Added to the scp parameter in the ad request
  • allowableFormats [ Optional ]: sets the type of ads allowed on your page, the default is [], all ads are allowed. Options can be combined between paid-post special-report smartmatch promoted-content
  • useNewPaidPostDesign [Optional]: defaults to false. Affects only Paid Posts. It replaces the value of promotedPrefixText with Partner Content and also adds ppost-twenty-twenty-design to modifiers.

It is important to note that due to a current limitation with targeting, we can't filter the type of ads on server side. Hence it acts like a frontend filter, rejecting when the ad is not within the allowed formats and returning an empty reponse instead, without attempting another ad call.

Response properties:
AttributeDescriptionType
typeType of native ad, possible values: paid-post promoted content special-reportstring
idAd creative's IDInteger
impressionURLList of impression urls that will need to be dropped into the page to confirm to ad network that the native ad was loadedarray
lineItemIdAn ID representing a targeting groupinginteger
urlUrl for where the ad should link tostring
titleMain title for the native Adstring
standfirstSubheading for native ad contentstring
advertiserName of the advertiserString
imagecontains a url property, with the image's sourceobject { url: String }
modifierscontains a list of descriptors that can be useful as classNames to style the adstring[]
Special report only
AttributeDescriptionType
metaPrefixText"Special Report" text used to identify a special reportString
firstPublishedDateDate when the content was first publishedDate
publishedDatewhen content was most recently publishedDate
Paid post / Promoted content only
AttributeDescriptionType
promotedPrefixTextText containing the name of the native ad type either "Promoted Content" or "Paid Post"string
promotedSuffixTextsuffix text for promoted-content and paid-posts above the headline. typically "by {advertisername}".String

After getting the response back, you will need to make tracking pixel requests as follows;

[].concat(response.impressionURL).forEach(url => {
	//trigger all the impression tracking pixels
	const trackingPixelImage = document.createElement('IMG');
	trackingPixelImage.src = url;
});

track(adElement, callback(viewState))

Tracks a rendered element and trigger a callback according to google's viewability rules for ads When the element is within the viewport after a certain time

The callback is invoked with a viewState arguemnt:

viewState
ArgumentDescriptionType
'full'100% of the ad's content is visible on the viewport for at least 1secstring
'partial'50% of the ad's content is visible on the viewport for at least 1secString

NB: Once the ad has been viewed fully, track will stop observing changes and invoking further callbacks, 'partial' callbacks can be invoked multiple times if the ad gets in and out of view quickly

Example of use

Simple example on a page where you would request an ad and append it to the document

const { get, track } = require('@financial-times/ads-branded-content');
const { h, render } = require('preact');
const { Teaser, presets } = require('@financial-times/x-teaser');

const pageUrl = `ft.com/stream/${dataTaxonomy}Id/${dataContentId}`;
const skipSmartmatch = true;
allowableFormats = ['paid-post', 'special-report'];


get(window.oAds, {
	pageUrl,
	allowableFormats,
	skipSmartmatch
})
	.then(response => {
		const props = {
			...response,
			...presets.SmallHeavy,
			modifiers: response.type,
		};
		// render a teaser
		const teaserHTML = render(<Teaser { ...props } />);

		// append it to the dom
		document.querySelector("#native-ad-slot")
			.appendChild(teaserHTML);

		// trigger all the impression tracking pixels
		[].concat(response.impressionURL).forEach(url => {
			const trackingPixelImage = document.createElement('IMG');
			trackingPixelImage.src = url;
		});

		// track viewability and send events to spoor
		track(nativeAdHTML, (viewstate) => {
			broadcast('oTracking.event', {
				action: `native-viewed-${viewstate}`,
				category: 'ads',
				native_ad_type: response.type,
			});
		});
	})

Example of use on FT sites

next-front-page

next-stream-page

next-article-page

ft-app

FAQs

Package last updated on 01 Oct 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc