FIX: refresh DFP ads after navigating between topics and lists

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

@@ -8,7 +8,8 @@ var const_mobile_height = 50;
 var currentUser = Discourse.User.current();
 
 var _loaded = false,
-    _promise = null;
+    _promise = null,
+    ads = {};
 
 function splitWidthInt(value) {
     var str = value.substring(0, 3);
@@ -36,6 +37,104 @@ function keyParse(word) {
   return key;
 }
 
+
+// This sets the key and value for custom targeting
+var Foo = function(key, value, adslot) {
+  this.locationKey = key;
+  this.locationValue = value;
+  this.adslot = adslot;
+};
+
+Foo.prototype.bar = function() {
+  if (this.locationKey) {
+    this.adslot.setTargeting(this.locationKey, this.locationValue);
+  }
+};
+
+// This should call adslot.setTargeting(key for that location, value for that location)
+function custom_targeting(key_array, value_array, location) {
+  var f;
+  for (var i = 0; i < key_array.length; i++) {
+    var wordValue = valueParse(value_array[i]);
+    f = new Foo(key_array[i], wordValue, location);
+    f.bar();
+  }
+}
+
+function defineSlot(placement, settings) {
+
+  if (ads[placement]) {
+    return ads[placement];
+  }
+
+  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 = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_list_top_code, [320,50], 'div-gpt-ad-topic-list-top').addService(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);
+    } else {
+      var topic_list_top = 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(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);
+    }
+
+    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 = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_above_post_stream_code, [320,50], 'div-gpt-ad-topic-above-post-stream').addService(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 = 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(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 = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_above_suggested_code, [320,50], 'div-gpt-ad-topic-above-suggested').addService(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 = 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(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 = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_post_bottom_code, [320,50], 'div-gpt-ad-post-bottom').addService(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 = 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(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'];
+  }
+}
+
 function loadGoogle(settings) {
   if (_loaded) {
     return Ember.RSVP.resolve();
@@ -54,79 +153,8 @@ function loadGoogle(settings) {
     }
 
     googletag.cmd.push(function() {
-      // This sets the key and value for custom targeting
-      var Foo = function(key, value, googletag) {
-        this.locationKey = key;
-        this.locationValue = value;
-        this.googletag = googletag;
-      }
-
-      // setTargeting is not defined.  We want to return as a method - PROBLEM 1
-      Foo.prototype.bar = function() {
-        return this.googletag.setTargeting(this.locationKey, this.locationValue);
-      }
-
-      // This should call googletag.setTargeting(key for that location, value for that location)
-      function custom_targeting(key_array, value_array, location) {
-        var f;
-        for (var i = 0; i < key_array.length; i++) {
-          var wordValue = valueParse(value_array[i]);
-          f = new Foo(key_array[i], wordValue, location);  
-          f.bar();
-        }
-      }
-
-      if (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 = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_list_top_code, [320,50], 'div-gpt-ad-topic-list-top').addService(googletag.pubads());
-          custom_targeting((keyParse(Discourse.SiteSettings.dfp_target_topic_list_top_key_code)), (keyParse(Discourse.SiteSettings.dfp_target_topic_list_top_value_code)), topic_list_top_mobile)
-        }
-        else {   
-          var topic_list_top = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_topic_list_top_code, [parseInt(splitWidthInt(Discourse.SiteSettings.dfp_topic_list_top_ad_sizes)), parseInt(splitHeightInt(Discourse.SiteSettings.dfp_topic_list_top_ad_sizes))], 'div-gpt-ad-topic-list-top').addService(googletag.pubads());
-          custom_targeting((keyParse(Discourse.SiteSettings.dfp_target_topic_list_top_key_code)), (keyParse(Discourse.SiteSettings.dfp_target_topic_list_top_value_code)), topic_list_top)
-        }
-      }
-      if (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 = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_above_post_stream_code, [320,50], 'div-gpt-ad-topic-above-post-stream').addService(googletag.pubads());
-          custom_targeting((keyParse(Discourse.SiteSettings.dfp_target_topic_above_post_stream_key_code)), (keyParse(Discourse.SiteSettings.dfp_target_topic_above_post_stream_value_code)), topic_above_post_stream_mobile)
-        }
-        else {
-          var topic_above_post_stream = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_topic_above_post_stream_code, [parseInt(splitWidthInt(Discourse.SiteSettings.dfp_topic_above_post_stream_ad_sizes)), parseInt(splitHeightInt(Discourse.SiteSettings.dfp_topic_above_post_stream_ad_sizes))], 'div-gpt-ad-topic-above-post-stream').addService(googletag.pubads());
-          custom_targeting((keyParse(Discourse.SiteSettings.dfp_target_topic_above_post_stream_key_code)), (keyParse(Discourse.SiteSettings.dfp_target_topic_above_post_stream_value_code)), topic_above_post_stream)
-        }
-      }
-      if (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 = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_topic_above_suggested_code, [320,50], 'div-gpt-ad-topic-above-suggested').addService(googletag.pubads());
-          custom_targeting((keyParse(Discourse.SiteSettings.dfp_target_topic_above_suggested_key_code)), (keyParse(Discourse.SiteSettings.dfp_target_topic_above_suggested_value_code)), topic_above_suggested_mobile)
-        }
-        else {
-          var topic_above_suggested = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_topic_above_suggested_code, [parseInt(splitWidthInt(Discourse.SiteSettings.dfp_topic_above_suggested_ad_sizes)), parseInt(splitHeightInt(Discourse.SiteSettings.dfp_topic_above_suggested_ad_sizes))], 'div-gpt-ad-topic-above-suggested').addService(googletag.pubads());
-          custom_targeting((keyParse(Discourse.SiteSettings.dfp_target_topic_above_suggested_key_code)), (keyParse(Discourse.SiteSettings.dfp_target_topic_above_suggested_value_code)), topic_above_suggested)
-        }
-      }
-      if (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 = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_mobile_post_bottom_code, [320,50], 'div-gpt-ad-post-bottom').addService(googletag.pubads());
-          custom_targeting((keyParse(Discourse.SiteSettings.dfp_target_post_bottom_key_code)), (keyParse(Discourse.SiteSettings.dfp_target_post_bottom_value_code)), post_bottom_mobile)
-        }
-        else {
-          var post_bottom = googletag.defineSlot('/' + settings.dfp_publisher_id + '/' + settings.dfp_post_bottom_code, [parseInt(splitWidthInt(Discourse.SiteSettings.dfp_post_bottom_ad_sizes)), parseInt(splitHeightInt(Discourse.SiteSettings.dfp_post_bottom_ad_sizes))], 'div-gpt-ad-post-bottom').addService(googletag.pubads());
-          custom_targeting((keyParse(Discourse.SiteSettings.dfp_target_post_bottom_key_code)), (keyParse(Discourse.SiteSettings.dfp_target_post_bottom_value_code)), post_bottom)
-        }
-      }
-
-    // Page Level custom targeting goes here - needs an input section and also ad tags on the relevant pages      
       googletag.pubads().enableSingleRequest();
+      googletag.pubads().disableInitialLoad(); // we always use refresh() to fetch the ads
       googletag.enableServices();
     });
   });
@@ -144,6 +172,7 @@ export default Ember.Component.extend({
 
   classNames: ['google-dfp-ad'],
   loadedGoogletag: false,
+  refreshOnChange: null,
 
   // Part of the divID of the div part of the GPT
   divId: function() {
@@ -162,10 +191,28 @@ export default Ember.Component.extend({
     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; }
+
+    if (this.get('loadedGoogletag')) {
+      googletag.cmd.push(function() {
+        googletag.pubads().refresh([ad]);
+      });
+    }
+  }.observes('refreshOnChange'),
+
   _initGoogleDFP: function() {
     var self = this;
     loadGoogle(this.siteSettings).then(function() {
       self.set('loadedGoogletag', true);
+      googletag.cmd.push(function() {
+        var ad = defineSlot(self.get('placement'), self.siteSettings);
+        if (ad) {
+          googletag.display(self.get('divId'));
+          googletag.pubads().refresh([ad]);
+        }
+      });
     });
   }.on('didInsertElement')
 });

assets/javascripts/discourse/templates/components/google-dfp-ad.hbs

@@ -1,18 +1,9 @@
 {{#if checkTrustLevels}}
-  {{#if loadedGoogletag}}
+  <div class="google-dfp-ad-label"><h2>ADVERTISEMENT</h2></div>
-   <div class="google-dfp-ad-label"><h2>ADVERTISEMENT</h2></div>
+
-    {{#if site.mobileView}}
+  {{#if site.mobileView}}
-      <div id={{divId}} style={{adWrapperStyleMobile}} class="dfp-ad-unit" align=center> 
+    <div id={{divId}} style={{adWrapperStyleMobile}} class="dfp-ad-unit" align=center></div>
-        <script type='text/javascript'>
+  {{else}}
-        googletag.cmd.push(function() { googletag.display('{{divId}}'); });
+    <div id={{divId}} style={{adWrapperStyle}} class="dfp-ad-unit" align=center></div>
-        </script>
-      </div>
-    {{else}}
-      <div id={{divId}} style={{adWrapperStyle}} class="dfp-ad-unit" align=center> 
-        <script type='text/javascript'>
-        googletag.cmd.push(function() { googletag.display('{{divId}}'); });
-        </script>
-      </div>
-    {{/if}}
   {{/if}}
 {{/if}}

assets/javascripts/discourse/templates/connectors/topic-above-post-stream/discourse-adplugin.hbs

@@ -2,7 +2,7 @@
   {{google-adsense placement="topic-above-post-stream"}}
 {{/if}}
 {{#if siteSettings.dfp_topic_above_post_stream_code}}
-  {{google-dfp-ad placement="topic-above-post-stream"}}
+  {{google-dfp-ad placement="topic-above-post-stream" refreshOnChange=model.id}}
 {{/if}}
 {{#if siteSettings.amazon_topic_above_post_stream_src_code}}
   {{amazon-product-links placement="topic-above-post-stream"}}

assets/javascripts/discourse/templates/connectors/topic-above-suggested/discourse-adplugin.hbs

@@ -2,7 +2,7 @@
   {{google-adsense placement="topic-above-suggested"}}
 {{/if}}
 {{#if siteSettings.dfp_topic_above_suggested_code}}
-  {{google-dfp-ad placement="topic-above-suggested"}}
+  {{google-dfp-ad placement="topic-above-suggested" refreshOnChange=model.id}}
 {{/if}}
 {{#if siteSettings.amazon_topic_above_suggested_src_code}}
   {{amazon-product-links placement="topic-above-suggested"}}

plugin.rb

@@ -1,6 +1,6 @@
 # name: discourse-adplugin
 # about: Ad Plugin for Discourse
-# version: 1.0.1
+# version: 1.0.2
 # authors: Vi and Sarah (@ladydanger and @cyberkoi)
 
 register_css <<CSS