Remove deprecated ContentService (#23)

* Remove deprecated ContentService usage * Update test * doc updates Co-authored-by: Andrew Sotiriou <[email protected]>
apartmenttherapy · Feb 24, 2022 · 9db692c · 9db692c
1 parent 8d95f96
commit 9db692c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 25 deletions.
diff --git a/docs/api/ReactGPT.md b/docs/api/ReactGPT.md
@@ -15,7 +15,7 @@ A React component which renders [GPT](https://support.google.com/dfp_sb/answer/1
 *   `sizeMapping`(optional) - An optional array of object which contains an array of viewport size and slot size. This needs to be set if the ad needs to serve different ad sizes per different viewport sizes (responsive ad). Setting the `slot` to any dimension that's not configured in DFP results in rendering an empty ad. The ad slot size which is provided for the viewport size of [0, 0] will be used as default ad size if none of viewport size matches.
 *   `outOfPage`(optional) - An optional flag to indicate whether an ad slot should be out-of-page slot.
 *   `companionAdService`(optional) - An optional flag to indicate whether companion ad service should be enabled for the ad. If an object is passed, it takes as a configuration expecting `enableSyncLoading` or `refreshUnfilledSlots`.
-*   `content`(optional) - An optional HTML content for the slot. If specified, the ad will render with the HTML content using content service.
+*   `content`(optional) - An optional HTML content for the slot. If specified, the ad will render with the HTML content using `innerHTML`.
 *   `clickUrl`(optional) - An optional click through URL. If specified, any landing page URL associated with the creative that is served is overridden.
 *   `categoryExclusion`(optional) - An optional string or an array of string which specifies a page-level ad category exclusion for the given label name.
 *   `attributes`(optional) - An optional map of key-value pairs for an AdSense attribute on a particular ad slot. see [the list of supported key value](https://developers.google.com/doubleclick-gpt/adsense_attributes#adsense_parameters.googletag.Slot)

diff --git a/examples/apps/static-ad/app.js b/examples/apps/static-ad/app.js
@@ -26,7 +26,7 @@ class App extends Component {
                 <div style={styles.lb}>
                     <Gpt
                         adUnitPath="/4595/nfl.test.open"
-                        content={`<a href="http://www.nfl.com" target="_blank"><img src="https://placeholdit.imgix.net/~text?txtsize=33&bg=${color}&txt=728%C3%9790&w=728&h=90"></img></a>`}
+                        content={`<a href="http://www.google.com" target="_blank"><img src="https://via.placeholder.com/728x90/${color}/FFFFFF?Text=Static Ad"></img></a>`}
                         slotSize={[728, 90]}
                         style={styles.adBorder}
                     />

diff --git a/src/Bling.js b/src/Bling.js
@@ -90,7 +90,7 @@ class Bling extends Component {
             PropTypes.object
         ]),
         /**
-         * An optional HTML content for the slot. If specified, the ad will render with the HTML content using content service.
+         * An optional HTML content for the slot. If specified, the ad will render with the HTML content using innerHTML.
          *
          * @property content
          */
@@ -665,7 +665,6 @@ class Bling extends Component {
             categoryExclusion,
             collapseEmptyDiv,
             safeFrameConfig,
-            content,
             clickUrl,
             forceSafeFrame
         } = props;
@@ -717,20 +716,15 @@ class Bling extends Component {
         }
 
         // GPT checks if the same service is already added.
-        if (content) {
-            adSlot.addService(Bling._adManager.googletag.content());
-        } else {
-            adSlot.addService(Bling._adManager.googletag.pubads());
-        }
+        adSlot.addService(Bling._adManager.googletag.pubads());
     }
 
     display() {
         const {content} = this.props;
         const divId = this._divId;
-        const adSlot = this._adSlot;
 
         if (content) {
-            Bling._adManager.googletag.content().setContent(adSlot, content);
+            document.getElementById(divId).innerHTML = content;
         } else {
             if (
                 !Bling._adManager._disableInitialLoad &&
@@ -751,12 +745,6 @@ class Bling extends Component {
     clear() {
         const adSlot = this._adSlot;
         if (adSlot && adSlot.hasOwnProperty("getServices")) {
-            // googletag.ContentService doesn't clear content
-            const services = adSlot.getServices();
-            if (this._divId && services.some(s => !!s.setContent)) {
-                document.getElementById(this._divId).innerHTML = "";
-                return;
-            }
             Bling._adManager.clear([adSlot]);
         }
     }

diff --git a/src/createManager.js b/src/createManager.js
@@ -193,7 +193,7 @@ export class AdManager extends EventEmitter {
                 Events.SLOT_VISIBILITY_CHANGED,
                 Events.SLOT_LOADED
             ].forEach(eventType => {
-                ["pubads", "content", "companionAds"].forEach(service => {
+                ["pubads", "companionAds"].forEach(service => {
                     // there is no API to remove listeners.
                     this.googletag[service]().addEventListener(
                         eventType,

diff --git a/test/Bling.spec.js b/test/Bling.spec.js
@@ -487,13 +487,7 @@ describe("Bling", () => {
     });
 
     it("renders static ad", done => {
-        const content = `<a href="www.mydestinationsite.com"><img src="www.mysite.com/img.png"></img></a>`;
-
-        Bling.once(Events.RENDER, () => {
-            const adSlot = instance.adSlot;
-            expect(adSlot._content).to.equal(content);
-            done();
-        });
+        const content = `<a href="www.mydestinationsite.com"><img src="www.mysite.com/img.png"></a>`;
 
         const instance = ReactTestUtils.renderIntoDocument(
             <Bling
@@ -502,6 +496,20 @@ describe("Bling", () => {
                 slotSize={[300, 250]}
             />
         );
+
+        sinon
+            .stub(document, "getElementById")
+            .returns(
+                ReactTestUtils.findRenderedDOMComponentWithTag(instance, "div")
+            );
+
+        Bling.once(Events.RENDER, () => {
+            expect(
+                ReactTestUtils.findRenderedDOMComponentWithTag(instance, "div")
+                    .innerHTML
+            ).to.equal(content);
+            done();
+        });
     });
 
     it("does not render ad when renderWhenViewable prop is set to true and the component is not in viewport", done => {