Update Adsense to place ads on all devices
The current adsense implementation only places ads on desktop-sized screens. This change allows ads of the appropriate size to be displayed on any device. fixes #224
This commit is contained in:
Andrew Miner
@@ -6,20 +6,64 @@
|
||||
//
|
||||
|
||||
.view__adsense {
|
||||
.skyscraper {
|
||||
height : $size-skyscraper-height;
|
||||
width : $size-skyscraper-width;
|
||||
position : relative;
|
||||
left : 50%;
|
||||
margin : $size-margin-large 0;
|
||||
position : relative;
|
||||
transform : translate(-50%);
|
||||
|
||||
border : 0.1em solid $color-gray-faint;
|
||||
margin : $size-margin-large 0;
|
||||
ins {
|
||||
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
|
||||
}
|
||||
|
||||
&.large-mobile-banner {
|
||||
height : $size-ad-large-mobile-banner-height;
|
||||
width : $size-ad-large-mobile-banner-width;
|
||||
|
||||
&.placeholder:before {
|
||||
font-size : $font-size-large;
|
||||
}
|
||||
}
|
||||
|
||||
&.leaderboard {
|
||||
height : $size-ad-leaderboard-height;
|
||||
width : $size-ad-leaderboard-width;
|
||||
|
||||
&.placeholder:before {
|
||||
font-size : $font-size-xxlarge;
|
||||
}
|
||||
}
|
||||
|
||||
&.skyscraper {
|
||||
height : $size-ad-skyscraper-height;
|
||||
width : $size-ad-skyscraper-width;
|
||||
|
||||
&.placeholder:before {
|
||||
transform : rotate(90deg);
|
||||
font-size : $font-size-xxlarge;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top : 0;
|
||||
}
|
||||
}
|
||||
|
||||
ins {
|
||||
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
|
||||
&.placeholder {
|
||||
border : $size-border-small solid $color-gray-faint;
|
||||
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content : center;
|
||||
|
||||
&:before {
|
||||
color : $color-gray-faint;
|
||||
content : "GOOGLE ADSENSE";
|
||||
font-family : $font-family-control;
|
||||
letter-spacing : $size-margin-small;
|
||||
white-space : nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view__mod_tile + .view__adsense {
|
||||
margin-top : 0;
|
||||
}
|
||||
|
||||
@@ -5,63 +5,132 @@
|
||||
# All rights reserved.
|
||||
#
|
||||
|
||||
BaseController = require '../../base_controller'
|
||||
|
||||
########################################################################################################################
|
||||
|
||||
module.exports = class AdsenseController extends BaseController
|
||||
|
||||
constructor: (options={})->
|
||||
options.templateName = 'common/adsense'
|
||||
super options
|
||||
module.exports = class AdsenseController
|
||||
|
||||
constructor: ->
|
||||
@_adsEnabled = global.env in c.productionEnvs
|
||||
@_adCount = 0
|
||||
@_adsPlaced = 0
|
||||
@_waiting = false
|
||||
|
||||
# Public Methods ###############################################################################
|
||||
|
||||
fillAdPositions: ->
|
||||
if @_adCount > 0
|
||||
return unless @$sidebar and @$mainBody
|
||||
return unless @_adCount < @_computeMaxAds()
|
||||
return unless @_adCount < c.adsense.slotIds.length
|
||||
adType = @_computeAdType()
|
||||
maxAds = c.adsense[adType].slotIds.length - @_adsPlaced
|
||||
return if maxAds is 0
|
||||
|
||||
$adContainer = $('<div class="skyscraper"></div>')
|
||||
@$el.append $adContainer
|
||||
logger.verbose => "Looking to place #{maxAds} more #{adType} ads..."
|
||||
|
||||
if @_adsEnabled
|
||||
$ad = $('<ins class="adsbygoogle"></ins>')
|
||||
$ad.attr 'data-ad-client', c.adsense.clientId
|
||||
$ad.attr 'data-ad-slot', c.adsense.slotIds[@_adCount]
|
||||
$adContainer.append $ad
|
||||
@_loadAds()
|
||||
if adType is 'skyscraper'
|
||||
placedNewAd = @_createSkyscraperPositions()
|
||||
else
|
||||
placedNewAd = @_createBannerPositions adType
|
||||
|
||||
@_adCount += 1
|
||||
_.defer => @fillAdPositions()
|
||||
if @_adsPlaced < c.adsense[adType].slotIds.length
|
||||
duration = if placedNewAd then 0 else c.adsense.readinessCheckInterval
|
||||
_.delay (=> @fillAdPositions()), duration
|
||||
else
|
||||
logger.verbose => "All #{adType} ad positions filled"
|
||||
|
||||
# BaseController Overrides #####################################################################
|
||||
|
||||
onDidRender: ->
|
||||
@$mainBody = $('.page > .content > .right')
|
||||
@$sidebar = $('.page > .content > .left')
|
||||
super
|
||||
|
||||
refresh: ->
|
||||
reset: ->
|
||||
@_adsPlaced = 0
|
||||
@_waitForPageReadiness()
|
||||
super
|
||||
|
||||
# Private Methods #############################################################################
|
||||
|
||||
_computeMaxAds: ->
|
||||
return null unless @$sidebar
|
||||
result = Math.floor @$sidebar.height() / (c.adsense.skyscraper.height + c.adsense.skyscraper.margin)
|
||||
_computeAdType: ->
|
||||
return c.adsense.adTypeMap[c.screen.type.compute()]
|
||||
|
||||
_computeAdCount: (adType)->
|
||||
result = c.adsense[adType].slotIds.length
|
||||
if c.screen.type.compute() is c.screen.type.desktop
|
||||
$sidebar = $('.page > .content > .left')
|
||||
return 0 unless $sidebar?.length
|
||||
|
||||
available = $sidebar.height() + c.adsense.skyscraper.margin
|
||||
available = Math.floor available / (c.adsense.skyscraper.height + c.adsense.skyscraper.margin)
|
||||
result = Math.min available, result
|
||||
|
||||
return result
|
||||
|
||||
_loadAds: ->
|
||||
_createSkyscraperPositions: ->
|
||||
$sidebar = $('.page > .content > .left')
|
||||
remaining = @_computeAdCount 'skyscraper'
|
||||
remaining -= @_adsPlaced
|
||||
placedNewAd = false
|
||||
|
||||
while remaining > 0
|
||||
$el = $('<div class="view__adsense"></div>')
|
||||
$el.addClass c.adsense.skyscraper.cssClass
|
||||
|
||||
if @_adsEnabled
|
||||
$ad = $('<ins class="adsbygoogle"></ins>')
|
||||
$ad.attr 'data-ad-client', c.adsense.clientId
|
||||
$ad.attr 'data-ad-slot', c.adsense.skyscraper.slotIds[@_adsPlaced]
|
||||
$el.append $ad
|
||||
else
|
||||
$el.addClass 'placeholder'
|
||||
|
||||
$sidebar.append $el
|
||||
placedNewAd = true
|
||||
@_adsPlaced += 1
|
||||
remaining -= 1
|
||||
logger.info => "Placed skyscraper ad ##{@_adsPlaced}"
|
||||
@_loadAd()
|
||||
|
||||
return placedNewAd
|
||||
|
||||
_createBannerPositions: (adType)->
|
||||
$pageContent = $('.page > .content > .right')
|
||||
remaining = @_computeAdCount adType
|
||||
remaining -= @_adsPlaced
|
||||
sectionIndex = 0
|
||||
placedNewAd = false
|
||||
|
||||
for sectionEl in $pageContent.find('section')
|
||||
break unless remaining > 0
|
||||
|
||||
$section = $(sectionEl)
|
||||
continue unless $section.is ':visible'
|
||||
|
||||
sectionIndex += 1
|
||||
continue if sectionIndex % 2 is 0
|
||||
continue if $section.next().hasClass 'view__adsense'
|
||||
|
||||
$el = $('<div class="view__adsense"></div>')
|
||||
$el.addClass c.adsense[adType].cssClass
|
||||
|
||||
if @_adsEnabled
|
||||
$ad = $('<ins class="adsbygoogle"></ins>')
|
||||
$ad.attr 'data-ad-client', c.adsense.clientId
|
||||
$ad.attr 'data-ad-slot', c.adsense[adType].slotIds[@_adsPlaced]
|
||||
$el.append $ad
|
||||
else
|
||||
$el.addClass 'placeholder'
|
||||
|
||||
$section.after $el
|
||||
placedNewAd = true
|
||||
@_adsPlaced += 1
|
||||
remaining -= 1
|
||||
logger.info => "Placed #{adType} ad ##{@_adsPlaced}"
|
||||
@_loadAd()
|
||||
|
||||
return placedNewAd
|
||||
|
||||
_isTooClose: ($priorEl, $el)->
|
||||
return false if c.screen.type.compute() is c.screen.type.desktop
|
||||
return false if not $priorEl?
|
||||
|
||||
priorBottom = $priorEl.position().top + $priorEl.height()
|
||||
currentTop = $el.position().top
|
||||
return priorBottom + c.adsense.minimumDistance > currentTop
|
||||
|
||||
_loadAd: ->
|
||||
return unless @_adsEnabled
|
||||
|
||||
logger.info "Loading #{@_adCount} Google AdSense ads"
|
||||
logger.info "Loading Google AdSense ads"
|
||||
try
|
||||
global.adsbygoogle ||= []
|
||||
global.adsbygoogle.push {}
|
||||
@@ -70,11 +139,12 @@ module.exports = class AdsenseController extends BaseController
|
||||
|
||||
_waitForPageReadiness: ->
|
||||
return if @_waiting
|
||||
adCount = @_computeAdCount @_computeAdType()
|
||||
|
||||
if @$sidebar.height() < c.adsense[@model].height / 2
|
||||
if adCount is 0
|
||||
logger.verbose "Adsense is waiting for room to insert ads"
|
||||
@_waiting = true
|
||||
_.delay (=> @_waiting = false; @_waitForPageReadiness()), c.duration.normal
|
||||
_.delay (=> @_waiting = false; @_waitForPageReadiness()), c.adsense.readinessCheckInterval
|
||||
else
|
||||
logger.verbose "Adsense is ready to fill ads"
|
||||
@fillAdPositions()
|
||||
|
||||
Reference in New Issue
Block a user