Skip to content

Commit

Permalink
Adding impression Viewable callback feature (#59)
Browse files Browse the repository at this point in the history 
* Adding impression Viewable callback feature

* Adding new package.json info

* Fix undefined setTargeting call

* Incrementing version

* Updating docs and reverting changes made to package.json
  • Loading branch information
@jeffersonlicet @jaanauati
jeffersonlicet authored and jaanauati committed Apr 5, 2018
1 parent 58c3a52 commit 6d08fb7
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 7 deletions.
1 change: 1 addition & 0 deletions Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ DFPManager.load();
| adSenseAttributes | object | ``` { "site_url": "my.site.com", ... } ``` | Object with adSense attributes to apply to the current ad slot (see: https://developers.google.com/doubleclick-gpt/adsense_attributes). |
| 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). |
onSlotIsViewable | fcn. (optional) | ```function(eventData) { console.log(eventData.size); } ``` | This callback is executed after the impresion becomes viewable. The first argument passes the gpt event data (googletag.events.ImpressionViewableEvent). |
| shouldRefresh | fcn. (optional) (should return a boolean)| ``` function() { /* never refresh this ad */ return false; } ``` | Return a boolean that tells the dfp manager whether the ad slot can be refreshed or not. |
| slotId | string. (optional) | ``` "homepage-leadboard" ``` | Controls the id of the dom element in which the dom is displayed. If this field is not provided a random name is created. |

Expand Down
12 changes: 12 additions & 0 deletions js/adslot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export class AdSlot extends React.Component {
adSenseAttributes: PropTypes.object,
targetingArguments: PropTypes.object,
onSlotRender: PropTypes.func,
onSlotIsViewable: PropTypes.func,
shouldRefresh: PropTypes.func,
slotId: PropTypes.string,
objectId: PropTypes.string,
Expand All @@ -46,6 +47,7 @@ export class AdSlot extends React.Component {
this.mapContextToAdSlotProps = this.mapContextToAdSlotProps.bind(this);
this.slotShouldRefresh = this.slotShouldRefresh.bind(this);
this.slotRenderEnded = this.slotRenderEnded.bind(this);
this.slotIsViewable = this.slotIsViewable.bind(this);
this.state = {
slotId: this.props.slotId || null,
};
Expand Down Expand Up @@ -110,6 +112,7 @@ export class AdSlot extends React.Component {
DFPManager.load(this.getSlotId());
}
DFPManager.attachSlotRenderEnded(this.slotRenderEnded);
DFPManager.attachSlotIsViewable(this.slotIsViewable);
}

registerSlot() {
Expand All @@ -128,6 +131,7 @@ export class AdSlot extends React.Component {
...this.props,
...this.state });
DFPManager.detachSlotRenderEnded(this.slotRenderEnded);
DFPManager.detachSlotIsViewable(this.slotIsViewable);
}

slotRenderEnded(eventData) {
Expand All @@ -138,6 +142,14 @@ export class AdSlot extends React.Component {
}
}

slotIsViewable(eventData) {
if (eventData.slotId === this.getSlotId()) {
if (this.props.onSlotIsViewable !== undefined) {
this.props.onSlotIsViewable(eventData);
}
}
}

slotShouldRefresh() {
let r = true;
if (this.props.shouldRefresh !== undefined) {
Expand Down
24 changes: 21 additions & 3 deletions js/manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@ const DFPManager = Object.assign(new EventEmitter().setMaxListeners(0), {
googletag.cmd.push(() => {
const pubadsService = googletag.pubads();
Object.keys(globalTargetingArguments).forEach((varName) => {
pubadsService.setTargeting(varName, globalTargetingArguments[varName]);
if (pubadsService) {
pubadsService.setTargeting(varName, globalTargetingArguments[varName]);
}
});
});
});
Expand Down Expand Up @@ -87,10 +89,16 @@ const DFPManager = Object.assign(new EventEmitter().setMaxListeners(0), {
const slotId = event.slot.getSlotElementId();
this.emit('slotRenderEnded', { slotId, event });
});
pubadsService.addEventListener('impressionViewable', (event) => {
const slotId = event.slot.getSlotElementId();
this.emit('impressionViewable', { slotId, event });
});
const targetingArguments = this.getTargetingArguments();
// set global targetting arguments
Object.keys(targetingArguments).forEach((varName) => {
pubadsService.setTargeting(varName, targetingArguments[varName]);
if (pubadsService) {
pubadsService.setTargeting(varName, targetingArguments[varName]);
}
});
// set global adSense attributes
const adSenseAttributes = this.getAdSenseAttributes();
Expand Down Expand Up @@ -165,7 +173,9 @@ const DFPManager = Object.assign(new EventEmitter().setMaxListeners(0), {
const slotTargetingArguments = this.getSlotTargetingArguments(currentSlotId);
if (slotTargetingArguments !== null) {
Object.keys(slotTargetingArguments).forEach((varName) => {
slot.gptSlot.setTargeting(varName, slotTargetingArguments[varName]);
if (slot && slot.gptSlot) {
slot.gptSlot.setTargeting(varName, slotTargetingArguments[varName]);
}
});
}
const slotAdSenseAttributes = this.getSlotAdSenseAttributes(currentSlotId);
Expand Down Expand Up @@ -276,6 +286,14 @@ const DFPManager = Object.assign(new EventEmitter().setMaxListeners(0), {
this.removeListener('slotRenderEnded', cb);
},

attachSlotIsViewable(cb) {
this.on('impressionViewable', cb);
},

detachSlotIsViewable(cb) {
this.removeListener('impressionViewable', cb);
},

});

export default DFPManager;
14 changes: 14 additions & 0 deletions lib/adslot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ var AdSlot = exports.AdSlot = function (_React$Component) {
_this.mapContextToAdSlotProps = _this.mapContextToAdSlotProps.bind(_this);
_this.slotShouldRefresh = _this.slotShouldRefresh.bind(_this);
_this.slotRenderEnded = _this.slotRenderEnded.bind(_this);
_this.slotIsViewable = _this.slotIsViewable.bind(_this);
_this.state = {
slotId: _this.props.slotId || null
};
Expand Down Expand Up @@ -117,6 +118,7 @@ var AdSlot = exports.AdSlot = function (_React$Component) {
_manager2.default.load(this.getSlotId());
}
_manager2.default.attachSlotRenderEnded(this.slotRenderEnded);
_manager2.default.attachSlotIsViewable(this.slotIsViewable);
}
}, {
key: 'registerSlot',
Expand All @@ -134,6 +136,7 @@ var AdSlot = exports.AdSlot = function (_React$Component) {
value: function unregisterSlot() {
_manager2.default.unregisterSlot(_extends({}, this.mapContextToAdSlotProps(), this.props, this.state));
_manager2.default.detachSlotRenderEnded(this.slotRenderEnded);
_manager2.default.detachSlotIsViewable(this.slotIsViewable);
}
}, {
key: 'slotRenderEnded',
Expand All @@ -145,6 +148,16 @@ var AdSlot = exports.AdSlot = function (_React$Component) {
}
}
}, {
key: 'slotIsViewable',
value: function slotIsViewable(eventData) {
if (eventData.slotId === this.getSlotId()) {
if (this.props.onSlotIsViewable !== undefined) {
this.props.onSlotIsViewable(eventData);
}
}
}
},
{
key: 'slotShouldRefresh',
value: function slotShouldRefresh() {
var r = true;
Expand Down Expand Up @@ -182,6 +195,7 @@ AdSlot.propTypes = {
adSenseAttributes: _propTypes2.default.object,
targetingArguments: _propTypes2.default.object,
onSlotRender: _propTypes2.default.func,
onSlotIsViewable: _propTypes2.default.func,
shouldRefresh: _propTypes2.default.func,
slotId: _propTypes2.default.string,
objectId: _propTypes2.default.string
Expand Down
24 changes: 20 additions & 4 deletions lib/manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@ var DFPManager = _extends(new _events.EventEmitter().setMaxListeners(0), {
googletag.cmd.push(function () {
var pubadsService = googletag.pubads();
Object.keys(globalTargetingArguments).forEach(function (varName) {
pubadsService.setTargeting(varName, globalTargetingArguments[varName]);
if (pubadsService) {
pubadsService.setTargeting(varName, globalTargetingArguments[varName]);
}
});
});
});
Expand Down Expand Up @@ -92,10 +94,16 @@ var DFPManager = _extends(new _events.EventEmitter().setMaxListeners(0), {
var slotId = event.slot.getSlotElementId();
_this.emit('slotRenderEnded', { slotId: slotId, event: event });
});
pubadsService.addEventListener('impressionViewable', function (event) {
var slotId = event.slot.getSlotElementId();
_this.emit('impressionViewable', { slotId: slotId, event: event });
});
var targetingArguments = _this.getTargetingArguments();
// set global targetting arguments
Object.keys(targetingArguments).forEach(function (varName) {
pubadsService.setTargeting(varName, targetingArguments[varName]);
if (pubadsService) {
pubadsService.setTargeting(varName, targetingArguments[varName]);
}
});
// set global adSense attributes
var adSenseAttributes = _this.getAdSenseAttributes();
Expand Down Expand Up @@ -166,7 +174,9 @@ var DFPManager = _extends(new _events.EventEmitter().setMaxListeners(0), {
var slotTargetingArguments = _this3.getSlotTargetingArguments(currentSlotId);
if (slotTargetingArguments !== null) {
Object.keys(slotTargetingArguments).forEach(function (varName) {
slot.gptSlot.setTargeting(varName, slotTargetingArguments[varName]);
if (slot && slot.gptSlot) {
slot.gptSlot.setTargeting(varName, slotTargetingArguments[varName]);
}
});
}
var slotAdSenseAttributes = _this3.getSlotAdSenseAttributes(currentSlotId);
Expand Down Expand Up @@ -274,7 +284,13 @@ var DFPManager = _extends(new _events.EventEmitter().setMaxListeners(0), {
},
detachSlotRenderEnded: function detachSlotRenderEnded(cb) {
this.removeListener('slotRenderEnded', cb);
}
},
attachSlotIsViewable: function attachSlotIsViewable(cb) {
this.on('impressionViewable', cb);
},
detachSlotIsViewable: function detachSlotIsViewable(cb) {
this.removeListener('impressionViewable', cb);
},
});

exports.default = DFPManager;

0 comments on commit 6d08fb7

Please sign in to comment.