Use footer text content ad for unknown themes (#562)

This is much less intrusive than the stickybox,
and allows us to still have an ad injected,
but not cover the content for users when this happens.

<img width="1436" alt="Screenshot 2025-03-06 at 7 39 00 PM"
src="https://github.com/user-attachments/assets/6850c4f5-b136-4dbb-af0f-8d8f2b47ed6f"
/>



Replaces #447
Closes #311

Author: ericholscher

src/ethicalads.js

@@ -196,18 +196,23 @@ export class EthicalAdsAddon extends AddonBase {
         if (elementToAppend) {
           elementToAppend.append(placement);
         }
-      } else if (window.innerWidth > 1300) {
-        // https://ethical-ad-client.readthedocs.io/en/latest/#stickybox
-        placement.setAttribute("data-ea-type", "image");
-        placement.setAttribute("data-ea-style", "stickybox");
-        this.addEaPlacementToElement(placement);
-        // `document.body` here is not too much relevant, since we are going to
-        // use this selector only for a floating stickybox ad
-        const elementInsertBefore = document.body;
-        elementInsertBefore.insertBefore(
-          placement,
-          elementInsertBefore.lastChild,
-        );
+      } else {
+        // Default to a text ad appended to the root selector when no known placement found
+        placement.setAttribute("data-ea-type", "text");
+        // TODO: Check this placement on the dashboard,
+        // and see how this is performing.
+        const docToolName = docTool.getDocumentationTool();
+        const idSuffix = docToolName ? `-${docToolName}` : "";
+        placement.setAttribute("id", `readthedocs-ea-text-footer${idSuffix}`);
+
+        const rootSelector = docTool.getRootSelector();
+        const rootElement = document.querySelector(rootSelector);
+
+        if (rootElement) {
+          rootElement.append(placement);
+        } else {
+          console.debug("Could not find root element to append ad");
+        }
       }
     }
 
@@ -239,6 +244,11 @@ export class EthicalAdsAddon extends AddonBase {
   }
 
   elementAboveTheFold(element) {
+    // Return false if element doesn't exist
+    if (!element) {
+      return false;
+    }
+
     // Determine if this element would be above the fold.
     // If this is off screen, instead create an ad in the footer.
     // Assumes the ad would be AD_SIZE pixels high.

tests/__snapshots__/ethicalads.test.snap.js

@@ -20,9 +20,8 @@ snapshots["EthicalAd addon ad placement injected"] =
   data-ea-keywords="docs|data-science"
   data-ea-manual="true"
   data-ea-publisher="readthedocs"
-  data-ea-style="stickybox"
-  data-ea-type="image"
-  id="readthedocs-ea"
+  data-ea-type="text"
+  id="readthedocs-ea-text-footer"
 >
 </div>
 `;

tests/ethicalads.test.html

@@ -66,11 +66,17 @@
           });
 
           it("ad placement injected", async () => {
-            // We need the width to be bigger than 1300px for the ad to be injected
-            await setViewport({ width: 1600, height: 640 });
-
             const addon = new ethicalads.EthicalAdsAddon(config);
-            const element = document.querySelector("#readthedocs-ea");
+            const element = document.querySelector(
+              "#readthedocs-ea-text-footer",
+            );
+
+            expect(element).to.exist;
+            expect(element).to.have.attribute("data-ea-type", "text");
+            expect(element).to.have.attribute(
+              "data-ea-publisher",
+              "readthedocs",
+            );
             await expect(element).dom.to.equalSnapshot();
           });