FEATURE: support multiple ad sizes in AdSense and Ad Manager

Each ad placement in the AdSense and Ad Manager settings takes a list
of ad sizes instead of only one size. If given multiple sizes, the sizes
will alternate in order for each ad that's rendered.

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

@@ -7,6 +7,7 @@ import loadScript from "discourse/lib/load-script";
 
 let _loaded = false,
   _promise = null,
+  renderCounts = {},
   publisher_id = Discourse.SiteSettings.adsense_publisher_code;
 
 const mobileView = Discourse.Site.currentProp("mobileView");
@@ -44,107 +45,43 @@ function loadAdsense() {
   return _promise;
 }
 
-let data = {
+const DESKTOP_SETTINGS = {
-  "topic-list-top": {},
+  "topic-list-top": {
-  "topic-above-post-stream": {},
+    code: "adsense_topic_list_top_code",
-  "topic-above-suggested": {},
+    sizes: "adsense_topic_list_top_ad_sizes"
-  "post-bottom": {}
+  },
+  "topic-above-post-stream": {
+    code: "adsense_topic_above_post_stream_code",
+    sizes: "adsense_topic_above_post_stream_ad_sizes"
+  },
+  "topic-above-suggested": {
+    code: "adsense_topic_above_suggested_code",
+    sizes: "adsense_topic_above_suggested_ad_sizes"
+  },
+  "post-bottom": {
+    code: "adsense_post_bottom_code",
+    sizes: "adsense_post_bottom_ad_sizes"
+  }
 };
 
-if (Discourse.SiteSettings.adsense_publisher_code) {
+const MOBILE_SETTINGS = {
-  if (!mobileView && Discourse.SiteSettings.adsense_topic_list_top_code) {
+  "topic-list-top": {
-    data["topic-list-top"]["ad_code"] =
+    code: "adsense_mobile_topic_list_top_code",
-      Discourse.SiteSettings.adsense_topic_list_top_code;
+    sizes: "adsense_mobile_topic_list_top_ad_size"
-    data["topic-list-top"]["ad_width"] = parseAdWidth(
+  },
-      Discourse.SiteSettings.adsense_topic_list_top_ad_sizes
+  "topic-above-post-stream": {
-    );
+    code: "adsense_mobile_topic_above_post_stream_code",
-    data["topic-list-top"]["ad_height"] = parseAdHeight(
+    sizes: "adsense_mobile_topic_above_post_stream_ad_size"
-      Discourse.SiteSettings.adsense_topic_list_top_ad_sizes
+  },
-    );
+  "topic-above-suggested": {
+    code: "adsense_mobile_topic_above_suggested_code",
+    sizes: "adsense_mobile_topic_above_suggested_ad_size"
+  },
+  "post-bottom": {
+    code: "adsense_mobile_post_bottom_code",
+    sizes: "adsense_mobile_post_bottom_ad_size"
   }
-  if (mobileView && 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;
-    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_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;
-    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_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;
-    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_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
-    );
-  }
-}
 
 export default AdComponent.extend({
   classNameBindings: [
@@ -161,9 +98,31 @@ export default AdComponent.extend({
   adRequested: false,
 
   init() {
-    this.set("ad_width", data[this.placement]["ad_width"]);
+    let config, size;
-    this.set("ad_height", data[this.placement]["ad_height"]);
+    const placement = this.get("placement");
-    this.set("ad_code", data[this.placement]["ad_code"]);
+
+    if (this.site.mobileView) {
+      config = MOBILE_SETTINGS[placement];
+    } else {
+      config = DESKTOP_SETTINGS[placement];
+    }
+
+    if (!renderCounts[placement]) {
+      renderCounts[placement] = 0;
+    }
+
+    const sizes = (this.siteSettings[config.sizes] || "").split("|");
+
+    if (sizes.length == 1) {
+      size = sizes[0];
+    } else {
+      size = sizes[renderCounts[placement] % sizes.length];
+      renderCounts[placement] += 1;
+    }
+
+    this.set("ad_width", parseAdWidth(size));
+    this.set("ad_height", parseAdHeight(size));
+    this.set("ad_code", this.siteSettings[config.code]);
     this._super();
   },
 

assets/javascripts/discourse/components/google-dfp-ad.js.es6

@@ -8,7 +8,8 @@ import loadScript from "discourse/lib/load-script";
 let _loaded = false,
   _promise = null,
   ads = {},
-  nextSlotNum = 1;
+  nextSlotNum = 1,
+  renderCounts = {};
 
 function getNextSlotNum() {
   return nextSlotNum++;
@@ -104,7 +105,7 @@ const MOBILE_SETTINGS = {
 };
 
 function getWidthAndHeight(placement, settings, isMobile) {
-  let config;
+  let config, size;
 
   if (isMobile) {
     config = MOBILE_SETTINGS[placement];
@@ -112,9 +113,22 @@ function getWidthAndHeight(placement, settings, isMobile) {
     config = DESKTOP_SETTINGS[placement];
   }
 
+  if (!renderCounts[placement]) {
+    renderCounts[placement] = 0;
+  }
+
+  const sizes = (settings[config.sizes] || "").split("|");
+
+  if (sizes.length == 1) {
+    size = sizes[0];
+  } else {
+    size = sizes[renderCounts[placement] % sizes.length];
+    renderCounts[placement] += 1;
+  }
+
   return {
-    width: parseInt(splitWidthInt(settings[config.sizes])),
+    width: parseInt(splitWidthInt(size)),
-    height: parseInt(splitHeightInt(settings[config.sizes]))
+    height: parseInt(splitHeightInt(size))
   };
 }
 

config/settings.yml

@@ -46,7 +46,7 @@ adsense_plugin:
   adsense_topic_list_top_ad_sizes:
     client: true
     default: "728*90 - leaderboard"
-    type: enum
+    type: list
     choices: &adsense_choices
       - responsive
       - 728*90 - leaderboard
@@ -73,7 +73,7 @@ adsense_plugin:
   adsense_mobile_topic_list_top_ad_size:
     client: true
     default: "responsive"
-    type: enum
+    type: list
     choices: *adsense_choices
   adsense_topic_above_post_stream_code:
     client: true
@@ -83,7 +83,7 @@ adsense_plugin:
   adsense_topic_above_post_stream_ad_sizes:
     client: true
     default: "728*90 - leaderboard"
-    type: enum
+    type: list
     choices: *adsense_choices
   adsense_mobile_topic_above_post_stream_code:
     client: true
@@ -93,7 +93,7 @@ adsense_plugin:
   adsense_mobile_topic_above_post_stream_ad_size:
     client: true
     default: "responsive"
-    type: enum
+    type: list
     choices: *adsense_choices
   adsense_topic_above_suggested_code:
     client: true
@@ -103,7 +103,7 @@ adsense_plugin:
   adsense_topic_above_suggested_ad_sizes:
     client: true
     default: "728*90 - leaderboard"
-    type: enum
+    type: list
     choices: *adsense_choices
   adsense_mobile_topic_above_suggested_code:
     client: true
@@ -113,7 +113,7 @@ adsense_plugin:
   adsense_mobile_topic_above_suggested_ad_size:
     client: true
     default: "responsive"
-    type: enum
+    type: list
     choices: *adsense_choices
   adsense_post_bottom_code:
     client: true
@@ -123,7 +123,7 @@ adsense_plugin:
   adsense_post_bottom_ad_sizes:
     client: true
     default: "728*90 - leaderboard"
-    type: enum
+    type: list
     choices: *adsense_choices
   adsense_mobile_post_bottom_code:
     client: true
@@ -133,7 +133,7 @@ adsense_plugin:
   adsense_mobile_post_bottom_ad_size:
     client: true
     default: "responsive"
-    type: enum
+    type: list
     choices: *adsense_choices
   adsense_nth_post_code:
     client: true
@@ -158,7 +158,7 @@ dfp_plugin:
   dfp_topic_list_top_ad_sizes:
     client: true
     default: "728*90 - leaderboard"
-    type: enum
+    type: list
     choices: &dfp_choices
       - 728*90 - leaderboard
       - 336*280 - large rectangle
@@ -200,7 +200,7 @@ dfp_plugin:
   dfp_mobile_topic_list_top_ad_sizes:
     client: true
     default: "320*50 - mobile leaderboard"
-    type: enum
+    type: list
     choices: *dfp_choices
   dfp_target_topic_list_top_key_code:
     default: ""
@@ -217,7 +217,7 @@ dfp_plugin:
   dfp_topic_above_post_stream_ad_sizes:
     client: true
     default: "728*90 - leaderboard"
-    type: enum
+    type: list
     choices: *dfp_choices
   dfp_mobile_topic_above_post_stream_code:
     client: true
@@ -226,7 +226,7 @@ dfp_plugin:
   dfp_mobile_topic_above_post_stream_ad_sizes:
     client: true
     default: "320*50 - mobile leaderboard"
-    type: enum
+    type: list
     choices: *dfp_choices
   dfp_target_topic_above_post_stream_key_code:
     default: ""
@@ -243,7 +243,7 @@ dfp_plugin:
   dfp_topic_above_suggested_ad_sizes:
     client: true
     default: "728*90 - leaderboard"
-    type: enum
+    type: list
     choices: *dfp_choices
   dfp_mobile_topic_above_suggested_code:
     client: true
@@ -252,7 +252,7 @@ dfp_plugin:
   dfp_mobile_topic_above_suggested_ad_sizes:
     client: true
     default: "320*50 - mobile leaderboard"
-    type: enum
+    type: list
     choices: *dfp_choices
   dfp_target_topic_above_suggested_key_code:
     default: ""
@@ -274,7 +274,7 @@ dfp_plugin:
   dfp_post_bottom_ad_sizes:
     client: true
     default: "728*90 - leaderboard"
-    type: enum
+    type: list
     choices: *dfp_choices
   dfp_mobile_post_bottom_code:
     client: true
@@ -283,7 +283,7 @@ dfp_plugin:
   dfp_mobile_post_bottom_ad_sizes:
     client: true
     default: "320*50 - mobile leaderboard"
-    type: enum
+    type: list
     choices: *dfp_choices
   dfp_target_post_bottom_key_code:
     default: ""