Support for AdSense responsive ad size

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

@@ -1,11 +1,7 @@
-import { withPluginApi } from 'discourse/lib/plugin-api';
-import PageTracker from 'discourse/lib/page-tracker';
 import loadScript from 'discourse/lib/load-script';
 
 var _loaded = false,
     _promise = null,
-    ad_width = '',
-    ad_height = '',
     ad_mobile_width = 320,
     ad_mobile_height = 50,
     currentUser = Discourse.User.current(),
@@ -15,14 +11,14 @@ var _loaded = false,
 
 const mobileView = Discourse.Site.currentProp('mobileView');
 
-function splitWidthInt(value) {
-  var str = value.substring(0, 3);
-  return str.trim();
+function parseAdWidth(value) {
+  if (value === 'responsive') { return 'auto'; }
+  return `${parseInt( value.substring(0, 3).trim() )}px`;
 }
 
-function splitHeightInt(value) {
-  var str = value.substring(4, 7);
-  return str.trim();
+function parseAdHeight(value) {
+  if (value === 'responsive') { return 'auto'; }
+  return `${parseInt( value.substring(4, 7).trim() )}px`;
 }
 
 function loadAdsense() {
@@ -52,32 +48,32 @@ var data = {
 if (Discourse.SiteSettings.adsense_publisher_code) {
   if (!mobileView && Discourse.SiteSettings.adsense_topic_list_top_code) {
     data["topic-list-top"]["ad_code"] = Discourse.SiteSettings.adsense_topic_list_top_code;
-    data["topic-list-top"]["ad_width"] = parseInt(splitWidthInt(Discourse.SiteSettings.adsense_topic_list_top_ad_sizes));
-    data["topic-list-top"]["ad_height"] = parseInt(splitHeightInt(Discourse.SiteSettings.adsense_topic_list_top_ad_sizes));
+    data["topic-list-top"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_topic_list_top_ad_sizes);
+    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;
   }
   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;
-    data["topic-above-post-stream"]["ad_width"] = parseInt(splitWidthInt(Discourse.SiteSettings.adsense_topic_above_post_stream_ad_sizes));
-    data["topic-above-post-stream"]["ad_height"] = parseInt(splitHeightInt(Discourse.SiteSettings.adsense_topic_above_post_stream_ad_sizes));
+    data["topic-above-post-stream"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_topic_above_post_stream_ad_sizes);
+    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;
   }
   if (!mobileView && Discourse.SiteSettings.adsense_topic_above_suggested_code) {
     data["topic-above-suggested"]["ad_code"] = Discourse.SiteSettings.adsense_topic_above_suggested_code;
-    data["topic-above-suggested"]["ad_width"] = parseInt(splitWidthInt(Discourse.SiteSettings.adsense_topic_above_suggested_ad_sizes));
-    data["topic-above-suggested"]["ad_height"] = parseInt(splitHeightInt(Discourse.SiteSettings.adsense_topic_above_suggested_ad_sizes));
+    data["topic-above-suggested"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_topic_above_suggested_ad_sizes);
+    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;
   }
   if (!mobileView && Discourse.SiteSettings.adsense_post_bottom_code) {
     data["post-bottom"]["ad_code"] = Discourse.SiteSettings.adsense_post_bottom_code;
-    data["post-bottom"]["ad_width"] = parseInt(splitWidthInt(Discourse.SiteSettings.adsense_post_bottom_ad_sizes));
-    data["post-bottom"]["ad_height"] = parseInt(splitHeightInt(Discourse.SiteSettings.adsense_post_bottom_ad_sizes));
+    data["post-bottom"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_post_bottom_ad_sizes);
+    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;
@@ -85,18 +81,20 @@ if (Discourse.SiteSettings.adsense_publisher_code) {
 }
 
 export default Ember.Component.extend({
-  classNames: ['google-adsense'],
+  classNameBindings: [':google-adsense', 'classForSlot', 'isResponsive:adsense-responsive'],
   loadedGoogletag: false,
 
   publisher_id: publisher_id,
-  ad_width: ad_width,
-  ad_height: ad_height,
+  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,
+
   init() {
     this.set('ad_width', data[this.placement]["ad_width"] );
     this.set('ad_height', data[this.placement]["ad_height"] );
@@ -106,6 +104,7 @@ export default Ember.Component.extend({
   },
 
   _triggerAds() {
+    this.set('adRequested', true);
     loadAdsense().then(function() {
       const adsbygoogle = window.adsbygoogle || [];
 
@@ -120,27 +119,48 @@ export default Ember.Component.extend({
 
     if (!this.get('showAd')) { return; }
 
+    if (this.get('listLoading')) { return; }
+
     Ember.run.scheduleOnce('afterRender', this, this._triggerAds);
   },
 
+  waitForLoad: function() {
+    if (this.get('adRequested')) { return; } // already requested that this ad unit be populated
+    if (!this.get('listLoading')) {
+      Ember.run.scheduleOnce('afterRender', this, this._triggerAds);
+    }
+  }.observes('listLoading'),
+
+  isResponsive: function() {
+    return this.get('ad_width') === 'auto';
+  }.property('ad_width'),
+
+  classForSlot: function() {
+    return `adsense-${this.get('placement')}`.htmlSafe();
+  }.property('placement'),
+
+  autoAdFormat: function() {
+    return this.get('isResponsive') ? 'auto'.htmlSafe() : false;
+  }.property('isResponsive'),
+
   adWrapperStyle: function() {
-    return `width: ${this.get('ad_width')}px; height: ${this.get('ad_height')}px;`.htmlSafe();
+    return (this.get('isResponsive') ? '' : `width: ${this.get('ad_width')}; height: ${this.get('ad_height')};`).htmlSafe();
   }.property('ad_width', 'ad_height'),
 
   adInsStyle: function() {
-    return `display: inline-block; ${this.get('adWrapperStyle')}`.htmlSafe();
-  }.property('adWrapperStyle'),
+    return `display: ${this.get('isResponsive') ? 'block' : 'inline-block'}; ${this.get('adWrapperStyle')}`.htmlSafe();
+  }.property('adWrapperStyle', 'isResponsive'),
 
   adWrapperStyleMobile: function() {
-    return `width: ${this.get('ad_mobile_width')}px; height: ${this.get('ad_mobile_height')}px;`.htmlSafe();
+    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')}px;`.htmlSafe();
+    return `width: ${this.get('ad_mobile_width')};`.htmlSafe();
   }.property('ad_mobile_width'),
 
   adInsStyleMobile: function() {
-    return `display: inline-block; ${this.get('adWrapperStyleMobile')}`.htmlSafe();
+    return `display: ${this.get('isResponsive') ? 'block' : 'inline-block'}; ${this.get('adWrapperStyleMobile')}`.htmlSafe();
   }.property('adWrapperStyleMobile'),
 
   checkTrustLevels: function() {

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

@@ -5,7 +5,8 @@
       <ins class="adsbygoogle"
         style={{adInsStyleMobile}}
         data-ad-client="ca-pub-{{publisher_id}}"
-        data-ad-slot={{ad_mobile_code}}>
+        data-ad-slot={{ad_mobile_code}}
+        data-ad-format={{autoAdFormat}}>
       </ins>
     </div>
   {{else}}
@@ -14,7 +15,8 @@
       <ins class="adsbygoogle"
         style={{adInsStyle}}
         data-ad-client="ca-pub-{{publisher_id}}"
-        data-ad-slot={{ad_code}}>
+        data-ad-slot={{ad_code}}
+        data-ad-format={{autoAdFormat}}>
       </ins>
     </div>
   {{/if}}

assets/javascripts/discourse/templates/connectors/discovery-list-container-top/discourse-adplugin.hbs

@@ -1,21 +1,21 @@
 {{#if site.mobileView}}
   {{#if siteSettings.adsense_mobile_topic_list_top_code}}
-    {{google-adsense placement="topic-list-top"}}
+    {{google-adsense placement="topic-list-top" listLoading=listLoading}}
   {{/if}}
   {{#if siteSettings.dfp_mobile_topic_list_top_code}}
-    {{google-dfp-ad placement="topic-list-top" refreshOnChange=loading category=category.slug}}
+    {{google-dfp-ad placement="topic-list-top" refreshOnChange=loading category=category.slug listLoading=listLoading}}
   {{/if}}
   {{#if siteSettings.amazon_mobile_topic_list_top_src_code}}
-    {{amazon-product-links placement="topic-list-top"}}
+    {{amazon-product-links placement="topic-list-top" listLoading=listLoading}}
   {{/if}}
 {{else}}
   {{#if siteSettings.adsense_topic_list_top_code}}
-    {{google-adsense placement="topic-list-top"}}
+    {{google-adsense placement="topic-list-top" listLoading=listLoading}}
   {{/if}}
   {{#if siteSettings.dfp_topic_list_top_code}}
-    {{google-dfp-ad placement="topic-list-top" refreshOnChange=loading category=category.slug}}
+    {{google-dfp-ad placement="topic-list-top" refreshOnChange=loading category=category.slug listLoading=listLoading}}
   {{/if}}
   {{#if siteSettings.amazon_topic_list_top_src_code}}
-    {{amazon-product-links placement="topic-list-top"}}
+    {{amazon-product-links placement="topic-list-top" listLoading=listLoading}}
   {{/if}}
 {{/if}}

config/settings.yml

@@ -22,6 +22,7 @@ adsense_plugin:
     default: '728*90 - leaderboard'
     type: enum
     choices:
+      - responsive
       - 728*90 - leaderboard
       - 336*280 - large rectangle
       - 300*250 - medium rectangle
@@ -53,6 +54,7 @@ adsense_plugin:
     default: '728*90 - leaderboard'
     type: enum
     choices:
+      - responsive
       - 728*90 - leaderboard
       - 336*280 - large rectangle
       - 300*250 - medium rectangle
@@ -84,6 +86,7 @@ adsense_plugin:
     default: '728*90 - leaderboard'
     type: enum
     choices:
+      - responsive
       - 728*90 - leaderboard
       - 336*280 - large rectangle
       - 300*250 - medium rectangle
@@ -115,6 +118,7 @@ adsense_plugin:
     default: '728*90 - leaderboard'
     type: enum
     choices:
+      - responsive
       - 728*90 - leaderboard
       - 336*280 - large rectangle
       - 300*250 - medium rectangle

plugin.rb

@@ -21,7 +21,34 @@ register_css <<CSS
   clear: both;
 }
 
-.google-adsense  .adsense-unit {
+.google-adsense.adsense-responsive {
+  width: 100%;
+}
+
+.google-adsense .google-adsense-label {
+  width: 728px;
+  margin: 0 auto;
+}
+
+.google-adsense.adsense-responsive .google-adsense-label {
+  width: 100%;
+  text-align: center;
+}
+
+.google-adsense .adsense-unit {
+  margin: 0 auto;
+}
+
+.google-adsense .google-adsense-label h2 {
+  margin: 4px 0 !important;
+  color: #858a8c;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: normal;
+}
+
+.google-adsense .google-adsense-content {
   margin: 0 auto;
 }
 
@@ -49,24 +76,6 @@ register_css <<CSS
   font-weight: normal;
 }
 
-.google-adsense .google-adsense-label {
-  width: 728px;
-  margin: 0 auto;
-}
-
-.google-adsense .google-adsense-label h2 {
-  margin: 4px 0 !important;
-  color: #858a8c;
-  text-transform: uppercase;
-  font-size: 12px;
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: normal;
-}
-
-.google-adsense .google-adsense-content {
-  margin: 0 auto;
-}
-
 .google-dfp-ad .google-dfp-ad-label {
   width: 728px;
   margin: 0 auto;