From 80b95aa5d36385f6cbbfd1256078cb2749624a45 Mon Sep 17 00:00:00 2001 From: Jonatan Alexis Anauati Date: Tue, 29 Nov 2016 17:20:10 -0300 Subject: [PATCH] Named slot sizes (#9) * make props optional; fixes unittests; * support for named sizes * update docs! --- Readme.md | 2 +- js/adslot.js | 10 ++++++---- lib/adslot.js | 6 +++--- spec/test-adslot.js | 28 ++++++++++++++-------------- spec/test-dfpslotsprovider.js | 10 +++++----- 5 files changed, 29 insertions(+), 27 deletions(-) diff --git a/Readme.md b/Readme.md index 49ae71c..c6ad16b 100644 --- a/Readme.md +++ b/Readme.md @@ -109,7 +109,7 @@ DFPManager.load(); | ------------------ | ------------- | ----------- | ------- | | dfpNetworkId | string (required) | ``` "1122" ``` | DFP Account id. | | adUnit | string (required) | ``` "homepage" ``` | The adunit you want to target to this box. | -| sizes | array (required) | ```[ [300, 250], [300, 600] ] ``` | list of sizes that this box support ([width, height]). You can configure 1 or more sizes.| +| sizes | array (required) | ```[ [300, 250], [300, 600], 'fluid' ] ``` | list of sizes that this box support. Sizes can be specified by eigther and array like [width, height] or with strings ("dfp named sizes") like 'fluid'. You can configure 1 or more sizes.| | sizeMapping | array of objects. | ```{ [ {viewport: [1024, 768], sizes:[[728, 90], [300, 250]]}, {viewport: [900, 768], sizes:[[300, 250]] }] } | Set the size mappings to be applied to the adSlot. | | targetingArguments | object (optional) | ``` { "keywords": "family", "content": "test" } ``` | Object with attributes you want to add to this box (you can use for custom targeting) | | onSlotRender | fcn. (optional) | ``` function(eventData) { console.log(eventData.size); } ``` | This callback is executed after the adSlot is rendered. The first argument passes the gpt event data (googletag.events.SlotRenderEndedEvent). | diff --git a/js/adslot.js b/js/adslot.js index bf73da5..9765042 100644 --- a/js/adslot.js +++ b/js/adslot.js @@ -7,10 +7,13 @@ export const AdSlot = React.createClass({ displayName: 'AdSlot', propTypes: { - dfpNetworkId: React.PropTypes.string.isRequired, - adUnit: React.PropTypes.string.isRequired, + dfpNetworkId: React.PropTypes.string, + adUnit: React.PropTypes.string, sizes: React.PropTypes.arrayOf( - React.PropTypes.arrayOf(React.PropTypes.number) + React.PropTypes.oneOfType([ + React.PropTypes.arrayOf(React.PropTypes.number), + React.PropTypes.string, + ]) ), renderOutOfThePage: React.PropTypes.bool, sizeMapping: React.PropTypes.arrayOf(React.PropTypes.object), @@ -51,7 +54,6 @@ export const AdSlot = React.createClass({ this.registerSlot(); } }, - componentWillUnmount() { this.unregisterSlot(); }, diff --git a/lib/adslot.js b/lib/adslot.js index 16cb854..646680c 100644 --- a/lib/adslot.js +++ b/lib/adslot.js @@ -21,9 +21,9 @@ var AdSlot = exports.AdSlot = _react2.default.createClass({ displayName: 'AdSlot', propTypes: { - dfpNetworkId: _react2.default.PropTypes.string.isRequired, - adUnit: _react2.default.PropTypes.string.isRequired, - sizes: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)), + dfpNetworkId: _react2.default.PropTypes.string, + adUnit: _react2.default.PropTypes.string, + sizes: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number), _react2.default.PropTypes.string])), renderOutOfThePage: _react2.default.PropTypes.bool, sizeMapping: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.object), fetchNow: _react2.default.PropTypes.bool, diff --git a/spec/test-adslot.js b/spec/test-adslot.js index 775e0ef..3e64525 100644 --- a/spec/test-adslot.js +++ b/spec/test-adslot.js @@ -10,16 +10,16 @@ import { AdSlot, DFPManager } from '../lib'; describe('AdSlot', () => { describe('Component markup', () => { + const compProps = { + dfpNetworkId: '1000', + adUnit: 'foo/bar/baz', + slotId: 'testElement', + sizes: [[728, 90], 'fluid'], + }; + let component; beforeEach(() => { - component = TestUtils.renderIntoDocument( - - ); + component = TestUtils.renderIntoDocument(); }); it('renders an adBox with the given elementId', () => { @@ -37,7 +37,7 @@ describe('AdSlot', () => { it('Registers an AdSlot', () => { const compProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', slotId: 'testElement1', sizes: [[728, 90]], @@ -53,7 +53,7 @@ describe('AdSlot', () => { it('Registers a refreshable AdSlot', () => { const compProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', slotId: 'testElement2', sizes: [[728, 90]], @@ -69,7 +69,7 @@ describe('AdSlot', () => { it('Registers a non refreshable AdSlot', () => { const compProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', slotId: 'testElement3', sizes: [[728, 90]], @@ -84,7 +84,7 @@ describe('AdSlot', () => { it('Registers an AdSlot with custom targeting arguments', () => { const compProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', slotId: 'testElement4', sizes: [[728, 90]], @@ -100,7 +100,7 @@ describe('AdSlot', () => { it('Registers an AdSlot without custom targeting arguments', () => { const compProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', slotId: 'testElement5', sizes: [[728, 90]], @@ -115,7 +115,7 @@ describe('AdSlot', () => { it('Unregisters an AdSlot', () => { const compProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', slotId: 'testElement6', sizes: [[728, 90]], diff --git a/spec/test-dfpslotsprovider.js b/spec/test-dfpslotsprovider.js index 7a1ca84..cd75f8d 100644 --- a/spec/test-dfpslotsprovider.js +++ b/spec/test-dfpslotsprovider.js @@ -60,7 +60,7 @@ describe('DFPSlotsProvider', () => { it('Registers a refreshable AdSlot', () => { const providerProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', }; @@ -83,7 +83,7 @@ describe('DFPSlotsProvider', () => { it('Registers a non refreshable AdSlot', () => { const providerProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', }; @@ -103,7 +103,7 @@ describe('DFPSlotsProvider', () => { it('Registers an AdSlot with custom targeting arguments', () => { const providerProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', targetingArguments: { team: 'river plate', player: 'pisculichi' }, }; @@ -122,7 +122,7 @@ describe('DFPSlotsProvider', () => { it('Registers an AdSlot without custom targeting arguments', () => { const providerProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', }; const compProps = { @@ -141,7 +141,7 @@ describe('DFPSlotsProvider', () => { it('Unregisters an AdSlot', () => { const providerProps = { - dfpNetworkId: 1000, + dfpNetworkId: '1000', adUnit: 'foo/bar/baz', }; const compProps = {