Skip to content

Instantly share code, notes, and snippets.

@hamishhossack
Created July 27, 2015 14:42
Show Gist options
  • Save hamishhossack/d76749717a702c9cde13 to your computer and use it in GitHub Desktop.
Save hamishhossack/d76749717a702c9cde13 to your computer and use it in GitHub Desktop.
Backbone Integration for googleAdSense
window.adsbygoogle = window.adsbygoogle || [];
var async = ( typeof c != "undefined" && !_.isUndefined(c.script) ) ? c.sript : $.getScript;
async("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js");
var GoogleAS = new Backbone.Model({
id: 'GoogleAS',
client: 'pub-9565436045946419',
currentCount: 0,
maxSlots: 3,
increment: function () {
return this.currentCount++;
}
});
GoogleAS.Slots = {};
var Banner = Backbone.View.extend({
el: '.banner',
active: false,
template: _.template('<ins class="adsbygoogle" style="display:inline-block;width:<%= width %>px;height:<%= height %>px" data-ad-client="ca-<%= pubID %>"></ins>'),
options: {
id: 0,
width: 0,
height: 0
},
initialize: function (options) {
this.options.pubID = GoogleAS.get("client");
this.el = options.el || this.el;
if (this.validResolution()) {
GoogleAS.set({'currentCount': ( GoogleAS.get('currentCount') + 1 ) });
this.render();
this.active = true;
}
},
render: function () {
var html = this.template(this.options);
$(this.el).html(html);
window.adsbygoogle.push({});
},
validResolution: function () {
return window.innerWidth > this.options.minWidth;
}
});
GoogleAS.Slots.Banner = Banner;
GoogleAS.Slots.MediumRect = Banner.extend({
el: '.banner.MediumRect',
options: {
id: 5642970087,
width: 300,
height: 250,
minWidth: 320,
alt: 'Mobile'
}
});
GoogleAS.Slots.Leaderboard = Banner.extend({
el: '.banner.Leaderboard',
options: {
id: 8515711286,
width: 728,
height: 90,
minWidth: 786
}
});
GoogleAS.Slots.LargeLeaderboard = Banner.extend({
el: '.banner.LargeLeaderboard',
options: {
id: 4069688485,
width: 728,
height: 300,
minWidth: 786,
alt: 'Leaderboard'
}
});
GoogleAS.Slots.WideSkyscraper = Banner.extend({
el: '.banner.WideSkyscraper',
options: {
id: 2469177685,
width: 160,
height: 600,
minWidth: 1200
}
});
GoogleAS.Slots.LargeSkyscraper = Banner.extend({
el: '.banner.LargeSkyscraper',
options: {
id: 5546421683,
width: 300,
height: 600,
minWidth: 1600,
alt: 'WideSkyscraper'
}
});
GoogleAS.Slots.Mobile = Banner.extend({
el: '.banner.Mobile',
options: {
id: 0,
width: 320,
height: 50,
minWidth: 0
}
});
return GoogleAS;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment