AdSense: allow choosing ad size for mobile, including responsive

assets/javascripts/discourse/components/google-adsense.js.es6

@@ -2,12 +2,8 @@ import loadScript from 'discourse/lib/load-script';
 
 var _loaded = false,
     _promise = null,
-    ad_mobile_width = 320,
-    ad_mobile_height = 50,
     currentUser = Discourse.User.current(),
-    publisher_id = Discourse.SiteSettings.adsense_publisher_code,
+    publisher_id = Discourse.SiteSettings.adsense_publisher_code;
-    mobile_width = 320,
-    mobile_height = 50;
 
 const mobileView = Discourse.Site.currentProp('mobileView');
 
@@ -52,7 +48,9 @@ if (Discourse.SiteSettings.adsense_publisher_code) {
     data["topic-list-top"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_topic_list_top_ad_sizes);
   }
   if (mobileView && Discourse.SiteSettings.adsense_mobile_topic_list_top_code) {
-    data["topic-list-top"]["ad_mobile_code"] = Discourse.SiteSettings.adsense_mobile_topic_list_top_code;
+    data["topic-list-top"]["ad_code"] = Discourse.SiteSettings.adsense_mobile_topic_list_top_code;
+    data["topic-list-top"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_mobile_topic_list_top_ad_size);
+    data["topic-list-top"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_mobile_topic_list_top_ad_size);
   }
   if (!mobileView && Discourse.SiteSettings.adsense_topic_above_post_stream_code) {
     data["topic-above-post-stream"]["ad_code"] = Discourse.SiteSettings.adsense_topic_above_post_stream_code;
@@ -60,7 +58,9 @@ if (Discourse.SiteSettings.adsense_publisher_code) {
     data["topic-above-post-stream"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_topic_above_post_stream_ad_sizes);
   }
   if (mobileView && Discourse.SiteSettings.adsense_mobile_topic_above_post_stream_code) {
-    data["topic-above-post-stream"]["ad_mobile_code"] = Discourse.SiteSettings.adsense_mobile_topic_above_post_stream_code;
+    data["topic-above-post-stream"]["ad_code"] = Discourse.SiteSettings.adsense_mobile_topic_above_post_stream_code;
+    data["topic-above-post-stream"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_mobile_topic_above_post_stream_ad_size);
+    data["topic-above-post-stream"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_mobile_topic_above_post_stream_ad_size);
   }
   if (!mobileView && Discourse.SiteSettings.adsense_topic_above_suggested_code) {
     data["topic-above-suggested"]["ad_code"] = Discourse.SiteSettings.adsense_topic_above_suggested_code;
@@ -68,7 +68,9 @@ if (Discourse.SiteSettings.adsense_publisher_code) {
     data["topic-above-suggested"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_topic_above_suggested_ad_sizes);
   }
   if (mobileView && Discourse.SiteSettings.adsense_mobile_topic_above_suggested_code) {
-    data["topic-above-suggested"]["ad_mobile_code"] = Discourse.SiteSettings.adsense_mobile_topic_above_suggested_code;
+    data["topic-above-suggested"]["ad_code"] = Discourse.SiteSettings.adsense_mobile_topic_above_suggested_code;
+    data["topic-above-suggested"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_mobile_topic_above_suggested_ad_size);
+    data["topic-above-suggested"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_mobile_topic_above_suggested_ad_size);
   }
   if (!mobileView && Discourse.SiteSettings.adsense_post_bottom_code) {
     data["post-bottom"]["ad_code"] = Discourse.SiteSettings.adsense_post_bottom_code;
@@ -76,7 +78,9 @@ if (Discourse.SiteSettings.adsense_publisher_code) {
     data["post-bottom"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_post_bottom_ad_sizes);
   }
   if (mobileView && Discourse.SiteSettings.adsense_mobile_post_bottom_code) {
-    data["post-bottom"]["ad_mobile_code"] = Discourse.SiteSettings.adsense_mobile_post_bottom_code;
+    data["post-bottom"]["ad_code"] = Discourse.SiteSettings.adsense_mobile_post_bottom_code;
+    data["post-bottom"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_mobile_post_bottom_ad_size);
+    data["post-bottom"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_mobile_post_bottom_ad_size);
   }
 }
 
@@ -87,11 +91,6 @@ export default Ember.Component.extend({
   publisher_id: publisher_id,
   ad_width: null,
   ad_height: null,
-  ad_mobile_width: ad_mobile_width,
-  ad_mobile_height: ad_mobile_height,
-
-  mobile_width: mobile_width,
-  mobile_height: mobile_height,
 
   adRequested: false,
 
@@ -99,7 +98,6 @@ export default Ember.Component.extend({
     this.set('ad_width', data[this.placement]["ad_width"] );
     this.set('ad_height', data[this.placement]["ad_height"] );
     this.set('ad_code', data[this.placement]["ad_code"] );
-    this.set('ad_mobile_code', data[this.placement]["ad_mobile_code"] );
     this._super();
   },
 
@@ -151,18 +149,6 @@ export default Ember.Component.extend({
     return `display: ${this.get('isResponsive') ? 'block' : 'inline-block'}; ${this.get('adWrapperStyle')}`.htmlSafe();
   }.property('adWrapperStyle', 'isResponsive'),
 
-  adWrapperStyleMobile: function() {
-    return (this.get('isResponsive') ? '' : `width: ${this.get('ad_mobile_width')}; height: ${this.get('ad_mobile_height')};`).htmlSafe();
-  }.property('ad_mobile_width', 'ad_mobile_height'),
-
-  adTitleStyleMobile: function() {
-    return `width: ${this.get('ad_mobile_width')};`.htmlSafe();
-  }.property('ad_mobile_width'),
-
-  adInsStyleMobile: function() {
-    return `display: ${this.get('isResponsive') ? 'block' : 'inline-block'}; ${this.get('adWrapperStyleMobile')}`.htmlSafe();
-  }.property('adWrapperStyleMobile'),
-
   checkTrustLevels: function() {
     return !((currentUser) && (currentUser.get('trust_level') > Discourse.SiteSettings.adsense_through_trust_level));
   }.property('trust_level'),

assets/javascripts/discourse/templates/components/google-adsense.hbs

@@ -1,23 +1,11 @@
 {{#if showAd}}
-  {{#if site.mobileView}}
+  <div class="google-adsense-label"><h2>ADVERTISEMENT</h2></div>
-    <div class="google-adsense-label" style={{adTitleStyleMobile}}><h2>ADVERTISEMENT</h2></div>
+  <div class="google-adsense-content" style={{adWrapperStyle}}>
-    <div class="google-adsense-content" style={{adWrapperStyleMobile}}>
+    <ins class="adsbygoogle"
-      <ins class="adsbygoogle"
+      style={{adInsStyle}}
-        style={{adInsStyleMobile}}
+      data-ad-client="ca-pub-{{publisher_id}}"
-        data-ad-client="ca-pub-{{publisher_id}}"
+      data-ad-slot={{ad_code}}
-        data-ad-slot={{ad_mobile_code}}
+      data-ad-format={{autoAdFormat}}>
-        data-ad-format={{autoAdFormat}}>
+    </ins>
-      </ins>
+  </div>
-    </div>
-  {{else}}
-    <div class="google-adsense-label"><h2>ADVERTISEMENT</h2></div>
-    <div class="google-adsense-content" style={{adWrapperStyle}}>
-      <ins class="adsbygoogle"
-        style={{adInsStyle}}
-        data-ad-client="ca-pub-{{publisher_id}}"
-        data-ad-slot={{ad_code}}
-        data-ad-format={{autoAdFormat}}>
-      </ins>
-    </div>
-  {{/if}}
 {{/if}}

config/locales/server.en.yml

@@ -36,16 +36,20 @@ en:
     adsense_through_trust_level: "Show your ads to users based on trust levels. Users with trust level higher than this value will not see ads."
     adsense_topic_list_top_code: "Enter code of the ad unit to display at topic list top location. This is the number assigned to the ad unit, not the JavaScript code."
     adsense_mobile_topic_list_top_code: "Enter code of the ad unit to display mobile ads at topic list top location. This is the number assigned to the ad unit, not the JavaScript code."
-    adsense_topic_list_top_ad_sizes: "Choose your ad sizes"
+    adsense_topic_list_top_ad_sizes: "Choose your ad size"
+    adsense_mobile_topic_list_top_ad_size: "Choose your ad size"
     adsense_topic_above_post_stream_code: "Enter code of the ad unit to display at topic above post stream location. This is the number assigned to the ad unit, not the JavaScript code."
     adsense_mobile_topic_above_post_stream_code: "Enter code of the ad unit to display mobile ads at topic above post stream location. This is the number assigned to the ad unit, not the JavaScript code."
-    adsense_topic_above_post_stream_ad_sizes: "Choose your ad sizes"
+    adsense_topic_above_post_stream_ad_sizes: "Choose your ad size"
+    adsense_mobile_topic_above_post_stream_ad_size: "Choose your ad size"
     adsense_topic_above_suggested_code: "Enter code of the ad unit to display at topic above suggested location. This is the number assigned to the ad unit, not the JavaScript code."
     adsense_mobile_topic_above_suggested_code: "Enter code of the ad unit to display mobile ads at topic above suggested location. This is the number assigned to the ad unit, not the JavaScript code."
-    adsense_topic_above_suggested_ad_sizes: "Choose your ad sizes"
+    adsense_topic_above_suggested_ad_sizes: "Choose your ad size"
+    adsense_mobile_topic_above_suggested_ad_size: "Choose your ad size"
     adsense_post_bottom_code: "Enter code of the ad unit to display ads at post bottom location. This is the number assigned to the ad unit, not the JavaScript code."
     adsense_mobile_post_bottom_code: "Enter code of the ad unit to display mobile ads at post bottom location. This is the number assigned to the ad unit, not the JavaScript code."
-    adsense_post_bottom_ad_sizes: "Choose your ad sizes"
+    adsense_post_bottom_ad_sizes: "Choose your ad size"
+    adsense_mobile_post_bottom_ad_size: "Choose your ad size"
     adsense_nth_post_code: "Show an ad after every N posts, where N is this value."
 
     amazon_through_trust_level: "Show your ads to users based on trust levels. Users with trust level higher than this value will not see ads."

config/settings.yml

@@ -12,16 +12,11 @@ adsense_plugin:
     default: ''
     max: 50
     regex: '^[\d]*$'
-  adsense_mobile_topic_list_top_code:
-    client: true
-    default: ''
-    max: 50
-    regex: '^[\d]*$'
   adsense_topic_list_top_ad_sizes:
     client: true
     default: '728*90 - leaderboard'
     type: enum
-    choices:
+    choices: &adsense_choices
       - responsive
       - 728*90 - leaderboard
       - 336*280 - large rectangle
@@ -39,12 +34,17 @@ adsense_plugin:
       - 300*600 - half page ad
       - 320*100 - large mobile banner
       - 690*250
-  adsense_topic_above_post_stream_code:
+  adsense_mobile_topic_list_top_code:
     client: true
     default: ''
     max: 50
     regex: '^[\d]*$'
-  adsense_mobile_topic_above_post_stream_code:
+  adsense_mobile_topic_list_top_ad_size:
+    client: true
+    default: 'responsive'
+    type: enum
+    choices: *adsense_choices
+  adsense_topic_above_post_stream_code:
     client: true
     default: ''
     max: 50
@@ -53,30 +53,18 @@ adsense_plugin:
     client: true
     default: '728*90 - leaderboard'
     type: enum
-    choices:
+    choices: *adsense_choices
-      - responsive
+  adsense_mobile_topic_above_post_stream_code:
-      - 728*90 - leaderboard
-      - 336*280 - large rectangle
-      - 300*250 - medium rectangle
-      - 970*90 - large leaderboard
-      - 970*250 - billboard
-      - 468*60 - banner
-      - 320*50 - mobile leaderboard
-      - 160*600 - wide skyscraper
-      - 234*60 - half banner
-      - 125*125 - button
-      - 180*150 - small rectangle
-      - 200*200 - small square
-      - 250*250 - square
-      - 300*600 - half page ad
-      - 320*100 - large mobile banner
-      - 690*250
-  adsense_topic_above_suggested_code:
     client: true
     default: ''
     max: 50
     regex: '^[\d]*$'
-  adsense_mobile_topic_above_suggested_code:
+  adsense_mobile_topic_above_post_stream_ad_size:
+    client: true
+    default: 'responsive'
+    type: enum
+    choices: *adsense_choices
+  adsense_topic_above_suggested_code:
     client: true
     default: ''
     max: 50
@@ -85,30 +73,18 @@ adsense_plugin:
     client: true
     default: '728*90 - leaderboard'
     type: enum
-    choices:
+    choices: *adsense_choices
-      - responsive
+  adsense_mobile_topic_above_suggested_code:
-      - 728*90 - leaderboard
-      - 336*280 - large rectangle
-      - 300*250 - medium rectangle
-      - 970*90 - large leaderboard
-      - 970*250 - billboard
-      - 468*60 - banner
-      - 320*50 - mobile leaderboard
-      - 160*600 - wide skyscraper
-      - 234*60 - half banner
-      - 125*125 - button
-      - 180*150 - small rectangle
-      - 200*200 - small square
-      - 250*250 - square
-      - 300*600 - half page ad
-      - 320*100 - large mobile banner
-      - 690*250
-  adsense_post_bottom_code:
     client: true
     default: ''
     max: 50
     regex: '^[\d]*$'
-  adsense_mobile_post_bottom_code:
+  adsense_mobile_topic_above_suggested_ad_size:
+    client: true
+    default: 'responsive'
+    type: enum
+    choices: *adsense_choices
+  adsense_post_bottom_code:
     client: true
     default: ''
     max: 50
@@ -117,24 +93,17 @@ adsense_plugin:
     client: true
     default: '728*90 - leaderboard'
     type: enum
-    choices:
+    choices: *adsense_choices
-      - responsive
+  adsense_mobile_post_bottom_code:
-      - 728*90 - leaderboard
+    client: true
-      - 336*280 - large rectangle
+    default: ''
-      - 300*250 - medium rectangle
+    max: 50
-      - 970*90 - large leaderboard
+    regex: '^[\d]*$'
-      - 970*250 - billboard
+  adsense_mobile_post_bottom_ad_size:
-      - 468*60 - banner
+    client: true
-      - 320*50 - mobile leaderboard
+    default: 'responsive'
-      - 160*600 - wide skyscraper
+    type: enum
-      - 234*60 - half banner
+    choices: *adsense_choices
-      - 125*125 - button
-      - 180*150 - small rectangle
-      - 200*200 - small square
-      - 250*250 - square
-      - 300*600 - half page ad
-      - 320*100 - large mobile banner
-      - 690*250
   adsense_nth_post_code:
     client: true
     default: ''