diff --git a/src/ethicalads.js b/src/ethicalads.js index 878443f5..1aa3692e 100644 --- a/src/ethicalads.js +++ b/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. diff --git a/tests/__snapshots__/ethicalads.test.snap.js b/tests/__snapshots__/ethicalads.test.snap.js index 0c821bb8..b56c9bfc 100644 --- a/tests/__snapshots__/ethicalads.test.snap.js +++ b/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" > `; diff --git a/tests/ethicalads.test.html b/tests/ethicalads.test.html index 7512a946..67873b08 100644 --- a/tests/ethicalads.test.html +++ b/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(); });