diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index a96533bd19f..9c138433582 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -4,12 +4,12 @@ module.exports = {
resolve: {
// Maps the 'react-native' import to 'react-native-web'.
alias: {
- 'react-native': 'react-native-web',
- '@storybook/react-native': '@storybook/react',
+ "react-native": "react-native-web",
+ "@storybook/react-native": "@storybook/react"
},
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// `.web.js`.
- extensions: ['.web.js', '.js', '.ios.js', '.android.js']
+ extensions: [".web.js", ".js", ".ios.js", ".android.js"]
}
};
diff --git a/package.json b/package.json
index d944805d5dd..7e7a1434bef 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
"url": "0.11.0"
},
"dependencies": {
+ "babel-plugin-transform-class": "^0.3.0",
"dashify": "0.2.2",
"global": "4.3.2",
"handlebars": "4.0.10",
diff --git a/packages/gpt/LICENSE b/packages/gpt/LICENSE
new file mode 100644
index 00000000000..cfd2b26cb49
--- /dev/null
+++ b/packages/gpt/LICENSE
@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2017, News UK & Ireland Ltd
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+ list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+ contributors may be used to endorse or promote products derived from
+ this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/packages/gpt/__tests__/.eslintrc.json b/packages/gpt/__tests__/.eslintrc.json
new file mode 100644
index 00000000000..6736fa4c713
--- /dev/null
+++ b/packages/gpt/__tests__/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+ "env": {
+ "jest": true,
+ "browser": true
+ }
+}
diff --git a/packages/gpt/__tests__/__snapshots__/ad-composer.test.js.snap b/packages/gpt/__tests__/__snapshots__/ad-composer.test.js.snap
new file mode 100644
index 00000000000..94c4d87d143
--- /dev/null
+++ b/packages/gpt/__tests__/__snapshots__/ad-composer.test.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdComposer renders no ad slots 1`] = ``;
+
+exports[`AdComposer renders with more than one ad slot 1`] = `
+
+`;
+
+exports[`AdComposer renders with one ad slot 1`] = `
+
+
+
+`;
diff --git a/packages/gpt/__tests__/__snapshots__/gpt.test.js.snap b/packages/gpt/__tests__/__snapshots__/gpt.test.js.snap
new file mode 100644
index 00000000000..a4f7c7a56d0
--- /dev/null
+++ b/packages/gpt/__tests__/__snapshots__/gpt.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Gpt test renders an ad-header ad slot 1`] = `
+
+`;
+
+exports[`Gpt test renders an ad-pixel ad slot 1`] = `
+
+`;
diff --git a/packages/gpt/__tests__/ad-composer.test.js b/packages/gpt/__tests__/ad-composer.test.js
new file mode 100644
index 00000000000..772188efc47
--- /dev/null
+++ b/packages/gpt/__tests__/ad-composer.test.js
@@ -0,0 +1,38 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import AdComposer from "../ad-composer";
+import Ad from "../ad";
+
+describe("AdComposer", () => {
+ it("renders no ad slots", () => {
+ const tree = renderer.create().toJSON();
+
+ expect(tree).toMatchSnapshot();
+ });
+
+ it("renders with one ad slot", () => {
+ const tree = renderer
+ .create(
+
+
+
+ )
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+ });
+
+ it("renders with more than one ad slot", () => {
+ const tree = renderer
+ .create(
+
+
+
+
+ )
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+ });
+});
diff --git a/packages/gpt/__tests__/ad-manager.test.js b/packages/gpt/__tests__/ad-manager.test.js
new file mode 100644
index 00000000000..5cc7c15ec09
--- /dev/null
+++ b/packages/gpt/__tests__/ad-manager.test.js
@@ -0,0 +1,252 @@
+import AdManager from "../ad-manager";
+import { getSlotConfig } from "../generate-config";
+import gptManager from "../gpt-manager";
+import pbjs from "../pbjs-manager";
+import { pbjs as pbjsConfig } from "../config";
+
+const pbjsManager = pbjs(pbjsConfig);
+
+describe("AdManager", () => {
+ const managerOptions = {
+ adUnit: "mock-ad-unit",
+ networkId: "mock-network-id",
+ section: "mock-section",
+ gptManager,
+ pbjsManager,
+ getSlotConfig
+ };
+ let adManager;
+
+ beforeEach(() => {
+ adManager = new AdManager(managerOptions);
+ });
+
+ it("constructor returns an AdManager instance with correct props", () => {
+ expect(adManager).toBeInstanceOf(AdManager);
+ expect(adManager.initialised).toBeFalsy();
+ expect(adManager.adQueue).toHaveLength(0);
+ });
+
+ it("constructor returns an AdManager instance with adUnit", () => {
+ expect(adManager.adUnit).toBe(managerOptions.adUnit);
+ });
+
+ it("constructor returns an AdManager instance with networkId", () => {
+ expect(adManager.networkId).toBe(managerOptions.networkId);
+ });
+
+ it("constructor returns an AdManager instance with section", () => {
+ expect(adManager.section).toBe(managerOptions.section);
+ });
+
+ it("init function sets the required scripts", () => {
+ const newPbjsManager = adManager.pbjsManager;
+ const newGptManager = adManager.gptManager;
+
+ const pbjsLoadScript = jest.fn();
+ const gptLoadScript = jest.fn();
+
+ newPbjsManager.loadScript = pbjsLoadScript;
+ newGptManager.loadScript = gptLoadScript;
+
+ newPbjsManager.setConfig = () => Promise.resolve();
+ newGptManager.setConfig = () => Promise.resolve();
+ newPbjsManager.init = () => Promise.resolve();
+ newGptManager.init = () => Promise.resolve();
+ return adManager.init().then(() => {
+ expect(pbjsLoadScript).toHaveBeenCalled();
+ expect(gptLoadScript).toHaveBeenCalled();
+ expect(adManager.initialised).toBeTruthy();
+ });
+ });
+
+ it("registerAd inserts configured ad in the queue and push it to gpt on it", () => {
+ const newPbjsManager = adManager.pbjsManager;
+ const newGptManager = adManager.gptManager;
+
+ const windowWidth = 100;
+ const mockAd = {
+ code: "mock-code",
+ mappings: [100, 200],
+ options: { foo: "bar" }
+ };
+
+ adManager.getSlotConfig = jest
+ .fn()
+ .mockImplementation((section, code, width) => {
+ expect(section).toEqual(adManager.section);
+ expect(code).toEqual(mockAd.code);
+ expect(width).toEqual(windowWidth);
+ return mockAd;
+ });
+ adManager.pushAdToGPT = jest.fn();
+
+ adManager.registerAd(mockAd.code, { width: windowWidth });
+ expect(adManager.getSlotConfig).toHaveBeenCalled();
+ expect(adManager.adQueue).toHaveLength(1);
+ expect(adManager.adQueue[0]).toEqual(mockAd);
+
+ newPbjsManager.setConfig = () => Promise.resolve();
+ newGptManager.setConfig = () => Promise.resolve();
+ newPbjsManager.init = () => Promise.resolve();
+ newGptManager.init = () => Promise.resolve();
+ return adManager.init().then(() => {
+ expect(adManager.pushAdToGPT).toHaveBeenCalled();
+ });
+ });
+
+ it("unregister one ad", () => {
+ adManager.adQueue = [
+ {
+ id: "id-0"
+ },
+ {
+ id: "id-1"
+ }
+ ];
+ const itemId = "id-1";
+ expect(adManager.adQueue.length).toEqual(2);
+ adManager.unregisterAd(itemId);
+ expect(adManager.adQueue.length).toEqual(1);
+ });
+
+ it("remove one item from the queue", () => {
+ const queue = [
+ {
+ id: "id-0"
+ },
+ {
+ id: "id-1"
+ }
+ ];
+ const itemId = "id-1";
+ const newQueue = AdManager.removeItemFromQueue(queue, itemId);
+ expect(queue.length).toEqual(2);
+ expect(newQueue.length).toEqual(queue.length - 1);
+ });
+
+ it("display should tell pbjs to handle targeting and gpt to refresh", () => {
+ const newPbjsManager = adManager.pbjsManager;
+ const newGptManager = adManager.gptManager;
+ adManager.initialised = true;
+
+ const refresh = jest.fn();
+ const pubads = jest.fn().mockImplementation(() => ({
+ refresh
+ }));
+ newGptManager.googletag = {
+ cmd: [],
+ pubads
+ };
+
+ const setTargetingForGPTAsync = jest.fn();
+ newPbjsManager.pbjs = {
+ que: [],
+ setTargetingForGPTAsync
+ };
+
+ expect(() => {
+ adManager.display();
+ }).not.toThrowError();
+
+ newGptManager.googletag.cmd[0]();
+ newPbjsManager.pbjs.que[0]();
+ expect(pubads).toHaveBeenCalled();
+ expect(refresh).toHaveBeenCalled();
+ expect(setTargetingForGPTAsync).toHaveBeenCalled();
+ });
+
+ it("pushAdToGPT gives an error if ad manager is not initialised", () => {
+ expect(adManager.initialised).toEqual(false);
+ expect(adManager.pushAdToGPT).toThrowError();
+ });
+
+ it("pushAdToGPT creates and sets slot and asks gpt to display", () => {
+ const newGptManager = adManager.gptManager;
+
+ const addService = jest.fn();
+ const defineSizeMapping = jest.fn();
+ adManager.createSlot = jest.fn().mockImplementation(() => ({
+ addService,
+ defineSizeMapping
+ }));
+
+ const display = jest.fn();
+ const pubads = jest.fn();
+ newGptManager.googletag = {
+ cmd: [],
+ display,
+ pubads
+ };
+
+ const slotId = "mock-slot-id";
+ const sizingMap = [
+ {
+ width: 300,
+ height: 100,
+ sizes: [[320, 50], [320, 48]]
+ }
+ ];
+
+ adManager.initialised = true;
+ adManager.generateSizings = jest.fn();
+ adManager.pushAdToGPT(slotId, sizingMap);
+ newGptManager.googletag.cmd[0]();
+ expect(addService).toHaveBeenCalled();
+ expect(defineSizeMapping).toHaveBeenCalled();
+ expect(display).toHaveBeenCalled();
+ expect(display).toHaveBeenCalledWith(slotId);
+ });
+
+ it("pushAdToGPT gives an error if slot does not exist", () => {
+ adManager.createSlot = jest.fn().mockImplementation(() => null);
+ const display = jest.fn();
+ adManager.gptManager.googletag = {
+ cmd: [],
+ display
+ };
+ adManager.pushAdToGPT();
+ adManager.gptManager.googletag.cmd[0]();
+ expect(display).not.toHaveBeenCalled();
+ });
+
+ it("generateSizings calls gpt googletag to set sizings", () => {
+ const newGptManager = adManager.gptManager;
+ adManager.initialised = true;
+
+ const addSize = jest.fn();
+ const build = jest.fn();
+ newGptManager.googletag = {
+ sizeMapping: jest.fn().mockImplementation(() => ({
+ addSize,
+ build
+ }))
+ };
+
+ const sizingMap = [
+ {
+ width: 300,
+ height: 100,
+ sizes: [[320, 50], [320, 48]]
+ }
+ ];
+
+ adManager.generateSizings(sizingMap);
+ expect(newGptManager.googletag.sizeMapping).toHaveBeenCalled();
+ expect(addSize).toHaveBeenCalled();
+ expect(build).toHaveBeenCalled();
+ });
+
+ it("createSlot calls gpt googletag to set slots", () => {
+ const newGptManager = adManager.gptManager;
+ adManager.initialised = true;
+
+ newGptManager.googletag = {
+ defineSlot: jest.fn()
+ };
+
+ const slotId = "mock-slot-id";
+ adManager.createSlot(slotId, managerOptions.section);
+ expect(newGptManager.googletag.defineSlot).toHaveBeenCalled();
+ });
+});
diff --git a/packages/gpt/__tests__/gpt-manager.test.js b/packages/gpt/__tests__/gpt-manager.test.js
new file mode 100644
index 00000000000..bcd2f319a89
--- /dev/null
+++ b/packages/gpt/__tests__/gpt-manager.test.js
@@ -0,0 +1,74 @@
+import gptManager from "../gpt-manager";
+
+describe("GptManager", () => {
+ it("gptManager singleton is initialised with correct props", () => {
+ expect(gptManager.scriptSet).toBeFalsy();
+ expect(gptManager.initialised).toBeFalsy();
+ expect(gptManager.googletag).toBeNull();
+ expect(gptManager.isReady).toBeFalsy();
+ });
+
+ it("loadScript function sets the required scripts", () => {
+ expect(document.getElementsByTagName("script")).toHaveLength(0);
+ gptManager.loadScript();
+ expect(document.getElementsByTagName("script")).toHaveLength(1);
+ expect(gptManager.scriptSet).toBeTruthy();
+ expect(gptManager.googletag).toBeTruthy();
+ expect(gptManager.googletag).toBe(window.googletag);
+ });
+
+ it("setConfig function sets the required configurations in the queue", () => {
+ const enableSingleRequest = jest.fn();
+ const enableAsyncRendering = jest.fn();
+ const collapseEmptyDivs = jest.fn();
+ const disableInitialLoad = jest.fn();
+
+ gptManager.loadScript();
+ const googletag = gptManager.googletag;
+ googletag.pubads = () => ({
+ enableSingleRequest,
+ enableAsyncRendering,
+ collapseEmptyDivs,
+ disableInitialLoad
+ });
+
+ gptManager.setConfig();
+ expect(googletag.cmd).toHaveLength(1);
+ googletag.cmd[0]();
+ expect(enableSingleRequest).toHaveBeenCalled();
+ expect(enableAsyncRendering).toHaveBeenCalled();
+ expect(collapseEmptyDivs).toHaveBeenCalled();
+ expect(disableInitialLoad).toHaveBeenCalled();
+ });
+
+ it("init function calls enableServices and sets the initialised fields", () => {
+ const enableServices = jest.fn();
+
+ gptManager.loadScript();
+ const googletag = gptManager.googletag;
+ googletag.enableServices = enableServices;
+
+ gptManager.init();
+ expect(googletag.cmd).toHaveLength(2);
+ googletag.cmd[1]();
+ expect(enableServices).toHaveBeenCalled();
+ expect(gptManager.initialised).toBeTruthy();
+ expect(gptManager.isReady).toBeTruthy();
+ });
+
+ it("setConfig resolves if script was set and gpt is initialised", () => {
+ const googletag = gptManager.googletag;
+ googletag.cmd = jest.fn();
+ gptManager.isReady = jest.fn().mockImplementation(() => true);
+ gptManager.setConfig();
+ expect(googletag.cmd).not.toHaveBeenCalled();
+ });
+
+ it("init resolves if script was set and gpt is initialised", () => {
+ const googletag = gptManager.googletag;
+ googletag.cmd = jest.fn();
+ gptManager.isReady = jest.fn().mockImplementation(() => true);
+ gptManager.init();
+ expect(googletag.cmd).not.toHaveBeenCalled();
+ });
+});
diff --git a/packages/gpt/__tests__/gpt.test.js b/packages/gpt/__tests__/gpt.test.js
new file mode 100644
index 00000000000..44ffbd2b88d
--- /dev/null
+++ b/packages/gpt/__tests__/gpt.test.js
@@ -0,0 +1,51 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import GPT from "../gpt.web";
+import AdManager from "../ad-manager";
+import { getSlotConfig } from "../generate-config";
+import gptManager from "../gpt-manager";
+import pbjs from "../pbjs-manager";
+import { pbjs as pbjsConfig } from "../config";
+
+const pbjsManager = pbjs(pbjsConfig);
+
+describe("Gpt test", () => {
+ let adManager;
+
+ beforeEach(() => {
+ adManager = new AdManager({
+ networkId: "25436805",
+ adUnit: "d.thetimes.co.uk",
+ section: "article",
+ gptManager,
+ pbjsManager,
+ getSlotConfig
+ });
+ });
+
+ it("renders an ad-header ad slot", () => {
+ const tree = renderer
+ .create()
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+ });
+
+ it("renders an ad-pixel ad slot", () => {
+ const tree = renderer
+ .create()
+ .toJSON();
+
+ expect(tree).toMatchSnapshot();
+ });
+
+ it("calls unregisterAd when component unmounts", () => {
+ const code = "ad-header";
+ const tree = renderer.create();
+
+ adManager.unregisterAd = jest.fn();
+ tree.unmount();
+ expect(adManager.unregisterAd).toHaveBeenCalledWith(code);
+ });
+});
diff --git a/packages/gpt/__tests__/pbjs-manager.test.js b/packages/gpt/__tests__/pbjs-manager.test.js
new file mode 100644
index 00000000000..9ff626f86eb
--- /dev/null
+++ b/packages/gpt/__tests__/pbjs-manager.test.js
@@ -0,0 +1,97 @@
+import pbjs from "../pbjs-manager";
+import { pbjs as pbjsConfig } from "../config";
+
+describe("PrebidManager", () => {
+ let pbjsManager;
+
+ beforeEach(() => {
+ pbjsManager = pbjs(pbjsConfig);
+ });
+
+ it("pbjsManager singleton is initialised with correct props", () => {
+ expect(pbjsManager.scriptSet).toBeFalsy();
+ expect(pbjsManager.initialised).toBeFalsy();
+ expect(pbjsManager.pbjs).toBeNull();
+ expect(pbjsManager.isReady).toBeFalsy();
+ });
+
+ it("loadScript function sets the required scripts", () => {
+ expect(document.getElementsByTagName("script")).toHaveLength(0);
+ pbjsManager.loadScript();
+ expect(document.getElementsByTagName("script")).toHaveLength(1);
+ expect(pbjsManager.scriptSet).toBeTruthy();
+ expect(pbjsManager.pbjs).toBeTruthy();
+ expect(pbjsManager.pbjs).toBe(window.pbjs);
+ });
+
+ it("setConfig function sets the required configurations in the pbjs object", () => {
+ pbjsManager.loadScript();
+ const prebid = pbjsManager.pbjs;
+
+ expect(prebid.bidderSettings).not.toBeDefined();
+ pbjsManager.setConfig();
+ expect(typeof prebid.bidderTimeout).toEqual("number");
+ expect(prebid.bidderSettings).toBeDefined();
+ });
+
+ it("init function adds the ad units and makes the bid requests", () => {
+ const addAdUnits = jest.fn();
+ const requestBids = ({ bidsBackHandler }) => bidsBackHandler();
+
+ pbjsManager.loadScript();
+ const prebid = pbjsManager.pbjs;
+ prebid.requestBids = requestBids;
+ prebid.addAdUnits = addAdUnits;
+
+ pbjsManager.init({});
+ expect(prebid.que).toHaveLength(1);
+ prebid.que[0]();
+ expect(addAdUnits).toHaveBeenCalled();
+ expect(pbjsManager.initialised).toBeTruthy();
+ expect(pbjsManager.isReady).toBeTruthy();
+ });
+
+ describe("bidderSettings", () => {
+ let bidResponse;
+ let adserverTargeting;
+ beforeEach(() => {
+ pbjsManager.loadScript();
+ const prebid = pbjsManager.pbjs;
+ pbjsManager.setConfig();
+ adserverTargeting = prebid.bidderSettings.standard.adserverTargeting;
+
+ bidResponse = {
+ bidder: "appnexus",
+ adId: "1712a75ae776bfb",
+ size: [300, 250]
+ };
+ });
+
+ it("prebid response has bidder value", () => {
+ expect(adserverTargeting[0].val(bidResponse)).toEqual(bidResponse.bidder);
+ });
+
+ it("prebid response has adId value", () => {
+ expect(adserverTargeting[1].val(bidResponse)).toEqual(bidResponse.adId);
+ });
+
+ it("prebid response cpm value is higher than maxBid", () => {
+ bidResponse.cpm = 20;
+ expect(adserverTargeting[2].val(bidResponse)).toEqual("15.00");
+ });
+
+ it("prebid response cpm value is lower than bucketSize", () => {
+ bidResponse.cpm = 0;
+ expect(adserverTargeting[2].val(bidResponse)).toEqual("0.01");
+ });
+
+ it("prebid response cpm value is lower than maxBid and higher than bucketSize", () => {
+ bidResponse.cpm = 10;
+ expect(adserverTargeting[2].val(bidResponse)).toEqual("10.00");
+ });
+
+ it("prebid response has size value", () => {
+ expect(adserverTargeting[3].val(bidResponse)).toEqual(bidResponse.size);
+ });
+ });
+});
diff --git a/packages/gpt/ad-composer.js b/packages/gpt/ad-composer.js
new file mode 100644
index 00000000000..da0dae8454d
--- /dev/null
+++ b/packages/gpt/ad-composer.js
@@ -0,0 +1,59 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Broadcast } from "react-broadcast";
+
+import AdManager from "./ad-manager";
+import { getSlotConfig } from "./generate-config";
+import gptManager from "./gpt-manager";
+import pbjs from "./pbjs-manager";
+import { pbjs as pbjsConfig } from "./config";
+
+const pbjsManager = pbjs(pbjsConfig);
+
+class AdComposer extends Component {
+ constructor(props) {
+ super(props);
+
+ this.adManager = new AdManager({
+ networkId: props.networkId,
+ adUnit: props.adUnit,
+ section: props.section,
+ gptManager,
+ pbjsManager,
+ getSlotConfig
+ });
+ }
+
+ componentDidMount() {
+ this.adManager
+ .init()
+ .then(this.adManager.display.bind(this.adManager))
+ .catch(err => {
+ throw new Error(err);
+ });
+ }
+
+ render() {
+ return (
+
+
+ {this.props.children}
+
+
+ );
+ }
+}
+
+AdComposer.propTypes = {
+ networkId: PropTypes.string.isRequired,
+ adUnit: PropTypes.string.isRequired,
+ section: PropTypes.string.isRequired,
+ children: PropTypes.arrayOf(PropTypes.element).isRequired
+};
+
+AdComposer.defaultProps = {
+ networkId: "25436805",
+ adUnit: "d.thetimes.co.uk"
+};
+
+export default AdComposer;
diff --git a/packages/gpt/ad-manager.js b/packages/gpt/ad-manager.js
new file mode 100644
index 00000000000..68cacb6b295
--- /dev/null
+++ b/packages/gpt/ad-manager.js
@@ -0,0 +1,93 @@
+export default class AdManager {
+ constructor(options = {}) {
+ this.adQueue = [];
+ this.adUnit = options.adUnit;
+ this.networkId = options.networkId;
+ this.section = options.section;
+ this.gptManager = options.gptManager;
+ this.pbjsManager = options.pbjsManager;
+ this.getSlotConfig = options.getSlotConfig;
+ this.initialised = false;
+ }
+
+ static removeItemFromQueue(queue, itemId) {
+ const obj = Object.assign([], queue);
+ const objIds = obj.map(item => item.id);
+ const idx = objIds.indexOf(itemId);
+ return idx > -1 ? obj.filter((item, index) => idx !== index) : obj;
+ }
+
+ init() {
+ // Load scripts if needed be
+ this.gptManager.loadScript();
+ this.pbjsManager.loadScript();
+
+ return this.gptManager
+ .setConfig()
+ .then(this.pbjsManager.setConfig.bind(this.pbjsManager))
+ .then(this.gptManager.init.bind(this.gptManager))
+ .then(this.pbjsManager.init.bind(this.pbjsManager, this.adQueue))
+ .then(() => {
+ this.initialised = true;
+ // Actually push the ads to GPT
+ this.adQueue.forEach(ad => {
+ this.pushAdToGPT(ad.code, ad.mappings);
+ });
+ });
+ }
+
+ registerAd(code, { width = 1024 } = {}) {
+ this.adQueue.push(this.getSlotConfig(this.section, code, width));
+ }
+
+ unregisterAd(code) {
+ this.adQueue = AdManager.removeItemFromQueue(this.adQueue, code);
+ }
+
+ display() {
+ return new Promise(resolve => {
+ this.gptManager.googletag.cmd.push(() => {
+ this.pbjsManager.pbjs.que.push(() => {
+ this.pbjsManager.pbjs.setTargetingForGPTAsync();
+ this.gptManager.googletag.pubads().refresh();
+ return resolve();
+ });
+ });
+ });
+ }
+
+ pushAdToGPT(adSlotId, sizingMap) {
+ this.gptManager.googletag.cmd.push(() => {
+ const slot = this.createSlot(adSlotId, this.section);
+ if (!slot) {
+ return;
+ }
+ slot.addService(this.gptManager.googletag.pubads());
+ slot.defineSizeMapping(this.generateSizings(sizingMap));
+
+ slot.id = adSlotId;
+
+ // Display the ad
+ this.gptManager.googletag.display(adSlotId);
+ });
+ }
+
+ generateSizings(sizingMap) {
+ const mapping = this.gptManager.googletag.sizeMapping();
+
+ for (let i = 0; i < sizingMap.length; i += 1) {
+ const size = sizingMap[i];
+ mapping.addSize([size.width, size.height], size.sizes);
+ }
+
+ return mapping.build();
+ }
+
+ createSlot(adSlotId, section) {
+ return this.gptManager.googletag.defineSlot(
+ `/${this.networkId}/${this.adUnit}/${section}`,
+ [],
+ adSlotId
+ );
+ }
+}
diff --git a/packages/gpt/ad.js b/packages/gpt/ad.js
new file mode 100644
index 00000000000..c44828bad22
--- /dev/null
+++ b/packages/gpt/ad.js
@@ -0,0 +1,26 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { Subscriber } from "react-broadcast";
+
+import GPT from "./gpt.web";
+
+class Ad extends Component {
+ renderGpt(adManager) {
+ return ;
+ }
+
+ render() {
+ return (
+
+ {adManager => this.renderGpt(adManager)}
+
+ );
+ }
+}
+
+Ad.propTypes = {
+ code: PropTypes.string.isRequired
+};
+
+export default Ad;
diff --git a/packages/gpt/config.js b/packages/gpt/config.js
new file mode 100644
index 00000000000..69b48ea038e
--- /dev/null
+++ b/packages/gpt/config.js
@@ -0,0 +1,104 @@
+// Sizes
+const leaderboard = [728, 90];
+const wideLeaderboard = [970, 90];
+const billboard = [970, 250];
+const mobileStandard = [300, 50];
+
+const sizes = {
+ header: [
+ {
+ width: 0,
+ height: 0,
+ sizes: []
+ },
+ {
+ width: 300,
+ height: 100,
+ sizes: [[320, 50], [320, 48], mobileStandard]
+ },
+ {
+ width: 768,
+ height: 90,
+ sizes: [leaderboard]
+ },
+ {
+ width: 1024,
+ height: 250,
+ sizes: [billboard, wideLeaderboard, leaderboard]
+ }
+ ],
+ intervention: [
+ {
+ width: 0,
+ height: 0,
+ sizes: []
+ },
+ {
+ width: 300,
+ height: 100,
+ sizes: [[300, 250], [320, 50], [320, 48], mobileStandard]
+ },
+ {
+ width: 768,
+ height: 90,
+ sizes: [leaderboard]
+ },
+ {
+ width: 1024,
+ height: 250,
+ sizes: [billboard, wideLeaderboard, leaderboard]
+ }
+ ],
+ pixel: [
+ {
+ width: 0,
+ height: 0,
+ sizes: [[1, 1]]
+ }
+ ]
+};
+
+const bidders = {
+ appnexus: {
+ placementId: "5823281"
+ },
+ rubicon: {
+ accountId: "14062",
+ siteId: "70608",
+ zoneId: "335918"
+ },
+ amazon: {
+ accountId: "3360"
+ },
+ criteo: {
+ zoneMap: {
+ "120x600": "764877",
+ "160x600": "764878",
+ "300x100": "764885",
+ "300x250": "764879",
+ "300x600": "764880",
+ "320x50": "764882",
+ "728x90": "764881",
+ "970x250": "764883",
+ "970x90": "764884"
+ }
+ },
+ pubmatic: {
+ accountId: "01234",
+ adSlotPrefix: "TheTimes"
+ },
+ indexExchange: {
+ siteId: "1234"
+ }
+};
+
+// Prebid JS config
+const pbjs = {
+ timeout: 1000,
+ minPrice: 0.01,
+ maxBid: 15,
+ bucketSize: 0.25,
+ bidders
+};
+
+export { pbjs, sizes, bidders };
diff --git a/packages/gpt/generate-config.js b/packages/gpt/generate-config.js
new file mode 100644
index 00000000000..e193ee6796b
--- /dev/null
+++ b/packages/gpt/generate-config.js
@@ -0,0 +1,86 @@
+import { bidders, sizes } from "./config";
+
+const getSizeMaps = code => {
+ switch (code) {
+ case "ad-header":
+ return sizes.header;
+ case "ad-pixel":
+ case "ad-pixelskin":
+ case "ad-pixelteads":
+ case "ad-article-sponsored":
+ return sizes.pixel;
+ default:
+ return sizes.intervention;
+ }
+};
+
+const getAdSizes = (code, width) => {
+ const sizeMap = getSizeMaps(code);
+ for (let i = sizeMap.length - 1; i > 0; i -= 1) {
+ if (width > sizeMap[i].width) {
+ return sizeMap[i].sizes;
+ }
+ }
+ return [];
+};
+
+const getSlotConfig = (section, code, width) => {
+ const adSizes = getAdSizes(code, width);
+ const mappings = getSizeMaps(code);
+ const bids = [
+ {
+ bidder: "appnexus",
+ params: {
+ placementId: bidders.appnexus.placementId,
+ section
+ }
+ },
+ {
+ bidder: "rubicon",
+ params: {
+ accountId: bidders.rubicon.accountId,
+ siteId: bidders.rubicon.siteId,
+ zoneId: bidders.rubicon.zoneId,
+ inventory: { section }
+ }
+ },
+ {
+ bidder: "indexExchange",
+ params: {
+ id: code,
+ siteID: bidders.indexExchange.siteId
+ }
+ }
+ ];
+
+ adSizes.forEach(size => {
+ bids.push({
+ bidder: "pubmatic",
+ params: {
+ publisherId: bidders.pubmatic.accountId,
+ adSlot: `${bidders.pubmatic.adSlotPrefix}@${size.join("x")}`,
+ section
+ }
+ });
+
+ // Criteo
+ const zoneId = bidders.criteo.zoneMap[size.join("x")] || "";
+ if (zoneId) {
+ bids.push({
+ bidder: "criteo",
+ params: {
+ zoneId
+ }
+ });
+ }
+ });
+
+ return {
+ code,
+ sizes: adSizes,
+ mappings,
+ bids
+ };
+};
+
+export { getAdSizes, getSizeMaps, getSlotConfig };
diff --git a/packages/gpt/gpt-manager.js b/packages/gpt/gpt-manager.js
new file mode 100644
index 00000000000..1b0422d8f74
--- /dev/null
+++ b/packages/gpt/gpt-manager.js
@@ -0,0 +1,72 @@
+/* eslint-env browser */
+
+const GptManager = class GptManager {
+ constructor() {
+ this.scriptSet = false;
+ this.initialised = false;
+ this.googletag = null;
+ }
+
+ get isReady() {
+ return this.scriptSet && this.initialised;
+ }
+
+ loadScript() {
+ // Check if script tag is already set
+ if (this.scriptSet) return;
+
+ // Set the googletag var
+ window.googletag = window.googletag || {};
+ window.googletag.cmd = window.googletag.cmd || [];
+ this.googletag = window.googletag;
+
+ const gads = document.createElement("script");
+ gads.async = true;
+ gads.type = "text/javascript";
+ gads.src = "//www.googletagservices.com/tag/js/gpt.js";
+
+ const head = document.getElementsByTagName("head")[0];
+ head.appendChild(gads);
+
+ this.scriptSet = true;
+ }
+
+ setConfig() {
+ const googletag = this.googletag;
+
+ // See https://developers.google.com/doubleclick-gpt/reference#googletagpubadsservice
+ return new Promise(resolve => {
+ if (this.isReady) return resolve();
+
+ return googletag.cmd.push(() => {
+ // fetch multiple ads at once
+ googletag.pubads().enableSingleRequest();
+
+ // add support for async loading
+ googletag.pubads().enableAsyncRendering();
+
+ // collapse div without ad
+ googletag.pubads().collapseEmptyDivs();
+
+ // load ad with slot refresh
+ googletag.pubads().disableInitialLoad();
+
+ return resolve();
+ });
+ });
+ }
+
+ init() {
+ return new Promise(resolve => {
+ if (this.isReady) return resolve();
+ return this.googletag.cmd.push(() => {
+ // enable google publisher tag
+ this.googletag.enableServices();
+ this.initialised = true;
+ return resolve();
+ });
+ });
+ }
+};
+
+export default new GptManager();
diff --git a/packages/gpt/gpt.stories.js b/packages/gpt/gpt.stories.js
new file mode 100644
index 00000000000..e0c0c64888d
--- /dev/null
+++ b/packages/gpt/gpt.stories.js
@@ -0,0 +1,22 @@
+/* eslint-env browser */
+
+import React from "react";
+import { storiesOf } from "@storybook/react-native";
+
+import AdComposer from "./ad-composer";
+import Ad from "./ad";
+
+// Hack, gpt map sizes don't seem to work inside iframes as such this is a
+// temporary fix, while waiting for https://github.com/storybooks/storybook/issues/862
+storiesOf("GPT", module).add("render two ads in article page", () =>
+
+
+ Render ads
+
+
(Please remember to turn off your ad blocker.)
+
+
+
+
+