From 13b5d21565bc7d60178b18ada128b453fbd5762d Mon Sep 17 00:00:00 2001 From: Neil Lalonde Date: Thu, 21 Apr 2016 13:01:15 -0400 Subject: [PATCH] Fix dfp ad dimensioned undefined. Refactor dfp ad component to remove unnecessary variables and rewrite copy-pasted code. --- .../discourse/components/google-dfp-ad.js.es6 | 156 ++++++++---------- .../templates/components/google-dfp-ad.hbs | 5 +- 2 files changed, 70 insertions(+), 91 deletions(-) diff --git a/assets/javascripts/discourse/components/google-dfp-ad.js.es6 b/assets/javascripts/discourse/components/google-dfp-ad.js.es6 index 111b406..52476b1 100755 --- a/assets/javascripts/discourse/components/google-dfp-ad.js.es6 +++ b/assets/javascripts/discourse/components/google-dfp-ad.js.es6 @@ -1,12 +1,7 @@ import loadScript from 'discourse/lib/load-script'; -var const_width = ''; -var const_height = ''; -var const_mobile_width = 320; -var const_mobile_height = 50; -var currentUser = Discourse.User.current(); - -var _loaded = false, +var currentUser = Discourse.User.current(), + _loaded = false, _promise = null, ads = {}; @@ -60,77 +55,66 @@ function custom_targeting(key_array, value_array, location) { } } -function defineSlot(placement, settings) { +function defineSlot(placement, settings, isMobile) { + var ad, width, height, divId; if (ads[placement]) { return ads[placement]; } + divId = "div-gpt-ad-" + placement; + + if (isMobile) { + // There are no settings for customizing the mobile ad sizes. + width = 320; + height = 50; + } + if (placement === "topic-list-top" && settings.dfp_topic_list_top_code && settings.dfp_topic_list_top_ad_sizes) { - const_width = parseInt(splitWidthInt(settings.dfp_topic_list_top_ad_sizes)); - const_height = parseInt(splitHeightInt(settings.dfp_topic_list_top_ad_sizes)); - if (Discourse.Mobile.mobileView) { - var topic_list_top_mobile = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_list_top_code, [320,50], 'div-gpt-ad-topic-list-top').addService(window.googletag.pubads()); - ads['topic-list-top'] = topic_list_top_mobile; - custom_targeting((keyParse(Discourse.SiteSettings.dfp_target_topic_list_top_key_code)), (keyParse(settings.dfp_target_topic_list_top_value_code)), topic_list_top_mobile); + if (isMobile) { + ad = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_list_top_code, [width,height], divId).addService(window.googletag.pubads()); + custom_targeting((keyParse(Discourse.SiteSettings.dfp_target_topic_list_top_key_code)), (keyParse(settings.dfp_target_topic_list_top_value_code)), ad); } else { - var topic_list_top = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_topic_list_top_code, [parseInt(splitWidthInt(settings.dfp_topic_list_top_ad_sizes)), parseInt(splitHeightInt(settings.dfp_topic_list_top_ad_sizes))], 'div-gpt-ad-topic-list-top').addService(window.googletag.pubads()); - ads['topic-list-top'] = topic_list_top; - custom_targeting((keyParse(settings.dfp_target_topic_list_top_key_code)), (keyParse(settings.dfp_target_topic_list_top_value_code)), topic_list_top); + width = parseInt(splitWidthInt(settings.dfp_topic_list_top_ad_sizes)); + height = parseInt(splitHeightInt(settings.dfp_topic_list_top_ad_sizes)); + ad = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_topic_list_top_code, [width, height], divId).addService(window.googletag.pubads()); + custom_targeting((keyParse(settings.dfp_target_topic_list_top_key_code)), (keyParse(settings.dfp_target_topic_list_top_value_code)), ad); + } + } else if (placement === "topic-above-post-stream" && settings.dfp_topic_above_post_stream_code && settings.dfp_topic_above_post_stream_ad_sizes) { + if (isMobile) { + ad = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_above_post_stream_code, [width,height], divId).addService(window.googletag.pubads()); + custom_targeting((keyParse(settings.dfp_target_topic_above_post_stream_key_code)), (keyParse(settings.dfp_target_topic_above_post_stream_value_code)), ad); + } else { + width = parseInt(splitWidthInt(settings.dfp_topic_above_post_stream_ad_sizes)); + height = parseInt(splitHeightInt(settings.dfp_topic_above_post_stream_ad_sizes)); + ad = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_topic_above_post_stream_code, [width, height], divId).addService(window.googletag.pubads()); + custom_targeting((keyParse(settings.dfp_target_topic_above_post_stream_key_code)), (keyParse(settings.dfp_target_topic_above_post_stream_value_code)), ad); + } + } else if (placement === "topic-above-suggested" && settings.dfp_topic_above_suggested_code && settings.dfp_topic_above_suggested_ad_sizes) { + if (isMobile) { + ad = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_above_suggested_code, [width,height], divId).addService(window.googletag.pubads()); + custom_targeting((keyParse(settings.dfp_target_topic_above_suggested_key_code)), (keyParse(settings.dfp_target_topic_above_suggested_value_code)), ad); + } else { + width = parseInt(splitWidthInt(settings.dfp_topic_above_suggested_ad_sizes)); + height = parseInt(splitHeightInt(settings.dfp_topic_above_suggested_ad_sizes)); + ad = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_topic_above_suggested_code, [width, height], divId).addService(window.googletag.pubads()); + custom_targeting((keyParse(settings.dfp_target_topic_above_suggested_key_code)), (keyParse(settings.dfp_target_topic_above_suggested_value_code)), ad); + } + } else if (placement === "post-bottom" && settings.dfp_post_bottom_code && settings.dfp_post_bottom_ad_sizes) { + if (isMobile) { + ad = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_post_bottom_code, [width,height], divId).addService(window.googletag.pubads()); + custom_targeting((keyParse(settings.dfp_target_post_bottom_key_code)), (keyParse(settings.dfp_target_post_bottom_value_code)), ad); + } else { + width = parseInt(splitWidthInt(settings.dfp_post_bottom_ad_sizes)); + height = parseInt(splitHeightInt(settings.dfp_post_bottom_ad_sizes)); + ad = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_post_bottom_code, [width, height], divId).addService(window.googletag.pubads()); + custom_targeting((keyParse(settings.dfp_target_post_bottom_key_code)), (keyParse(settings.dfp_target_post_bottom_value_code)), ad); } - - return ads['topic-list-top']; } - if (placement === "topic-above-post-stream" && settings.dfp_topic_above_post_stream_code && settings.dfp_topic_above_post_stream_ad_sizes) { - const_width = parseInt(splitWidthInt(settings.dfp_topic_above_post_stream_ad_sizes)); - const_height = parseInt(splitHeightInt(settings.dfp_topic_above_post_stream_ad_sizes)); - if (Discourse.Mobile.mobileView) { - var topic_above_post_stream_mobile = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_above_post_stream_code, [320,50], 'div-gpt-ad-topic-above-post-stream').addService(window.googletag.pubads()); - ads['topic-above-post-stream'] = topic_above_post_stream_mobile; - custom_targeting((keyParse(settings.dfp_target_topic_above_post_stream_key_code)), (keyParse(settings.dfp_target_topic_above_post_stream_value_code)), topic_above_post_stream_mobile); - } - else { - var topic_above_post_stream = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_topic_above_post_stream_code, [parseInt(splitWidthInt(settings.dfp_topic_above_post_stream_ad_sizes)), parseInt(splitHeightInt(settings.dfp_topic_above_post_stream_ad_sizes))], 'div-gpt-ad-topic-above-post-stream').addService(window.googletag.pubads()); - ads['topic-above-post-stream'] = topic_above_post_stream; - custom_targeting((keyParse(settings.dfp_target_topic_above_post_stream_key_code)), (keyParse(settings.dfp_target_topic_above_post_stream_value_code)), topic_above_post_stream); - } - - return ads['topic-above-post-stream']; - } - - if (placement === "topic-above-suggested" && settings.dfp_topic_above_suggested_code && settings.dfp_topic_above_suggested_ad_sizes) { - const_width = parseInt(splitWidthInt(settings.dfp_topic_above_suggested_ad_sizes)); - const_height = parseInt(splitHeightInt(settings.dfp_topic_above_suggested_ad_sizes)); - if (Discourse.Mobile.mobileView) { - var topic_above_suggested_mobile = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_above_suggested_code, [320,50], 'div-gpt-ad-topic-above-suggested').addService(window.googletag.pubads()); - ads['topic-above-suggested'] = topic_above_suggested_mobile; - custom_targeting((keyParse(settings.dfp_target_topic_above_suggested_key_code)), (keyParse(settings.dfp_target_topic_above_suggested_value_code)), topic_above_suggested_mobile); - } - else { - var topic_above_suggested = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_topic_above_suggested_code, [parseInt(splitWidthInt(settings.dfp_topic_above_suggested_ad_sizes)), parseInt(splitHeightInt(settings.dfp_topic_above_suggested_ad_sizes))], 'div-gpt-ad-topic-above-suggested').addService(window.googletag.pubads()); - ads['topic-above-suggested'] = topic_above_suggested; - custom_targeting((keyParse(settings.dfp_target_topic_above_suggested_key_code)), (keyParse(settings.dfp_target_topic_above_suggested_value_code)), topic_above_suggested); - } - - return ads['topic-above-suggested']; - } - - if (placement === "post-bottom" && settings.dfp_post_bottom_code && settings.dfp_post_bottom_ad_sizes) { - const_width = parseInt(splitWidthInt(settings.dfp_post_bottom_ad_sizes)); - const_height = parseInt(splitHeightInt(settings.dfp_post_bottom_ad_sizes)); - if (Discourse.Mobile.mobileView) { - var post_bottom_mobile = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_post_bottom_code, [320,50], 'div-gpt-ad-post-bottom').addService(window.googletag.pubads()); - ads['post-bottom'] = post_bottom_mobile; - custom_targeting((keyParse(settings.dfp_target_post_bottom_key_code)), (keyParse(settings.dfp_target_post_bottom_value_code)), post_bottom_mobile); - } - else { - var post_bottom = window.googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_post_bottom_code, [parseInt(splitWidthInt(settings.dfp_post_bottom_ad_sizes)), parseInt(splitHeightInt(settings.dfp_post_bottom_ad_sizes))], 'div-gpt-ad-post-bottom').addService(window.googletag.pubads()); - ads['post-bottom'] = post_bottom; - custom_targeting((keyParse(settings.dfp_target_post_bottom_key_code)), (keyParse(settings.dfp_target_post_bottom_value_code)), post_bottom); - } - - return ads['post-bottom']; + if (ad) { + ads[placement] = {ad: ad, width: width, height: height}; + return ads[placement]; } } @@ -164,41 +148,35 @@ function loadGoogle() { // Ember component - the class is the adblock and css export default Ember.Component.extend({ - const_width: const_width, - const_height: const_height, - const_mobile_width: const_mobile_width, - const_mobile_height: const_mobile_height, + width: 728, + height: 90, classNames: ['google-dfp-ad'], loadedGoogletag: false, refreshOnChange: null, - // Part of the divID of the div part of the GPT divId: function() { return "div-gpt-ad-" + this.get('placement'); }.property('placement'), adWrapperStyle: function() { - return `width: ${this.get('const_width')}px; height: ${this.get('const_height')}px;`.htmlSafe(); - }.property('const_width', 'const_height'), - - adWrapperStyleMobile: function() { - return `width: ${this.get('const_mobile_width')}px; height: ${this.get('const_mobile_height')}px;`.htmlSafe(); - }.property('const_mobile_width', 'const_mobile_height'), + return `width: ${this.get('width')}px; height: ${this.get('height')}px;`.htmlSafe(); + }.property('width', 'height'), adTitleStyleMobile: function() { - return `width: ${this.get('const_mobile_width')}px;`.htmlSafe(); - }.property('const_mobile_width'), + return `width: ${this.get('width')}px;`.htmlSafe(); + }.property('width'), checkTrustLevels: function() { return !((currentUser) && (currentUser.get('trust_level') > Discourse.SiteSettings.dfp_through_trust_level)); }.property('trust_level'), refreshAd: function() { - var ad = ads[this.get('placement')]; - if (!ad) { return; } + var slot = ads[this.get('placement')]; + if (!(slot && slot.ad)) { return; } - var self = this; + var self = this, + ad = slot.ad; if (this.get('loadedGoogletag') && this.get('refreshOnChange')) { window.googletag.cmd.push(function() { @@ -213,11 +191,13 @@ export default Ember.Component.extend({ loadGoogle(this.siteSettings).then(function() { self.set('loadedGoogletag', true); window.googletag.cmd.push(function() { - var ad = defineSlot(self.get('placement'), self.siteSettings); - if (ad) { - ad.setTargeting('discourse-category', self.get('category') ? self.get('category') : '0'); + let slot = defineSlot(self.get('placement'), self.siteSettings, self.site.mobileView); + if (slot && slot.ad) { + slot.ad.setTargeting('discourse-category', self.get('category') ? self.get('category') : '0'); + self.set('width', slot.width); + self.set('height', slot.height); window.googletag.display(self.get('divId')); - window.googletag.pubads().refresh([ad]); + window.googletag.pubads().refresh([slot.ad]); } }); }); diff --git a/assets/javascripts/discourse/templates/components/google-dfp-ad.hbs b/assets/javascripts/discourse/templates/components/google-dfp-ad.hbs index 90ae491..cb3fb17 100755 --- a/assets/javascripts/discourse/templates/components/google-dfp-ad.hbs +++ b/assets/javascripts/discourse/templates/components/google-dfp-ad.hbs @@ -1,10 +1,9 @@ {{#if checkTrustLevels}} - {{#if site.mobileView}}

ADVERTISEMENT

-
+
{{else}}

ADVERTISEMENT

{{/if}} -{{/if}} \ No newline at end of file +{{/if}}