Merge pull request #4224 from rtfd/davidfischer/ad-priority

Prioritize ads based on content
readthedocs · Jun 13, 2018 · e1826a9 · e1826a9
2 parents 4a21c71 + 057bba4
commit e1826a9
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 4 deletions.
diff --git a/readthedocs/core/static-src/core/js/doc-embed/constants.js b/readthedocs/core/static-src/core/js/doc-embed/constants.js
@@ -4,7 +4,12 @@ var exports = {
     THEME_RTD: 'sphinx_rtd_theme',
     THEME_ALABASTER: 'alabaster',
     THEME_CELERY: 'sphinx_celery',
-    THEME_MKDOCS_RTD: 'readthedocs'
+    THEME_MKDOCS_RTD: 'readthedocs',
+
+    DEFAULT_PROMO_PRIORITY: 5,
+    MINIMUM_PROMO_PRIORITY: 10,
+    MAXIMUM_PROMO_PRIORITY: 1,
+    LOW_PROMO_PRIORITY: 10,
 };
 
 exports.PROMO_SUPPORTED_THEMES = [

diff --git a/readthedocs/core/static-src/core/js/doc-embed/sponsorship.js b/readthedocs/core/static-src/core/js/doc-embed/sponsorship.js
@@ -13,8 +13,10 @@ var rtd;
 function create_sidebar_placement() {
     var element_id = 'rtd-' + (Math.random() + 1).toString(36).substring(4);
     var display_type = constants.PROMO_TYPES.LEFTNAV;
+    var priority = constants.DEFAULT_PROMO_PRIORITY;
     var selector = null;
     var class_name;         // Used for theme specific CSS customizations
+    var offset;
 
     if (rtd.is_mkdocs_builder() && rtd.is_rtd_theme()) {
         selector = 'nav.wy-nav-side';
@@ -31,7 +33,19 @@ function create_sidebar_placement() {
     if (selector) {
         $('<div />').attr('id', element_id)
             .addClass(class_name).appendTo(selector);
-        return {'div_id': element_id, 'display_type': display_type};
+
+        // Determine if this element is above the fold
+        offset = $('#' + element_id).offset();
+        if (!offset || offset.top > $(window).height()) {
+            // If this is off screen, lower the priority
+            priority = constants.LOW_PROMO_PRIORITY;
+        }
+
+        return {
+            'div_id': element_id,
+            'display_type': display_type,
+            'priority': priority,
+        };
     }
 
     return null;
@@ -44,8 +58,10 @@ function create_sidebar_placement() {
 function create_footer_placement() {
     var element_id = 'rtd-' + (Math.random() + 1).toString(36).substring(4);
     var display_type = constants.PROMO_TYPES.FOOTER;
+    var priority = constants.DEFAULT_PROMO_PRIORITY;
     var selector = null;
     var class_name;
+    var offset;
 
     if (rtd.is_rtd_theme()) {
         selector = $('<div />').insertAfter('footer hr');
@@ -59,7 +75,20 @@ function create_footer_placement() {
     if (selector) {
         $('<div />').attr('id', element_id)
             .addClass(class_name).appendTo(selector);
-        return {'div_id': element_id, 'display_type': display_type};
+
+        // Determine if this element is above the fold
+        offset = $('#' + element_id).offset();
+        if (!offset || offset.top < $(window).height()) {
+            // If the screen is short, lower the priority
+            // We don't want the ad to take up too much of the screen
+            priority = constants.LOW_PROMO_PRIORITY;
+        }
+
+        return {
+            'div_id': element_id,
+            'display_type': display_type,
+            'priority': priority,
+        };
     }
 
     return null;
@@ -76,7 +105,13 @@ function create_fixed_footer_placement() {
     // Only propose the fixed footer ad for mobile
     if (bowser && bowser.mobile) {
         $('<div />').attr('id', element_id).appendTo('body');
-        return {'div_id': element_id, 'display_type': display_type};
+        return {
+            'div_id': element_id,
+            'display_type': display_type,
+
+            // Prioritize mobile ads when on mobile
+            'priority': constants.MAXIMUM_PROMO_PRIORITY,
+        };
     }
 
     return null;
@@ -167,6 +202,7 @@ function init() {
     var request_data = {format: "jsonp"};
     var div_ids = [];
     var display_types = [];
+    var priorities = [];
     var placement_funcs = [
         create_footer_placement,
         create_sidebar_placement,
@@ -186,11 +222,13 @@ function init() {
         if (placement) {
             div_ids.push(placement.div_id);
             display_types.push(placement.display_type);
+            priorities.push(placement.priority || constants.DEFAULT_PROMO_PRIORITY);
         }
     }
 
     request_data.div_ids = div_ids.join('|');
     request_data.display_types = display_types.join('|');
+    request_data.priorities = priorities.join('|');
     request_data.project = rtd.project;
 
     if (typeof URL !== 'undefined' && typeof URLSearchParams !== 'undefined') {