Reintroduce the stickybox on wide screens (#604)

Alternates between using the stickybox placement and the footer
placement on unknown themes. It also adds an ID to the stickybox
placement so we can see performance of it.

As written, this introduces a random element which may not be desirable.
We could instead introduce the stickybox only on very wide screens (say
>=1600px) or we could base it on the title of the project or something
like that to make it deterministic. I'm open to suggestions.


>         // TODO: Check this placement on the dashboard,
>         // and see how this is performing.

The footer placement is performing very well at ~4x the CTR with ~50%
the view rate vs. previously.

Ref: #562

Author: davidfischer

src/ethicalads.js

@@ -198,11 +198,22 @@ export class EthicalAdsAddon extends AddonBase {
         if (elementToAppend) {
           elementToAppend.append(placement);
         }
+      } else if (window.innerWidth > 1300 && Math.random() > 0.5) {
+        // https://ethical-ad-client.readthedocs.io/en/latest/#stickybox
+        placement.setAttribute("data-ea-type", "image");
+        placement.setAttribute("data-ea-style", "stickybox");
+        placement.setAttribute("id", "readthedocs-ea-image-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}`);