Merge pull request nfl#97 from carlos-algms/master

Enable non-personalized Ads to support GDPR compliance

Author: miblanchard

package.json

@@ -126,7 +126,7 @@
     "bundlesize": [
         {
             "path": "./dist/react-gpt.min.js",
-            "maxSize": "8.5 kB"
+            "maxSize": "8.53 kB"
         }
     ]
 }

src/Bling.js

@@ -191,7 +191,17 @@ class Bling extends Component {
          *
          * @property style
          */
-        style: PropTypes.object
+        style: PropTypes.object,
+        /**
+         * An optional property to control non-personalized Ads.
+         * https://support.google.com/admanager/answer/7678538
+         *
+         * Set to `true` to mark the ad request as NPA, and to `false` for ad requests that are eligible for personalized ads
+         * It is `false` by default, according to Google's definition.
+         *
+         * @property npa
+         */
+        npa: PropTypes.bool
     };
 
     /**
@@ -217,7 +227,13 @@ class Bling extends Component {
      * @property reRenderProps
      * @static
      */
-    static reRenderProps = ["adUnitPath", "slotSize", "outOfPage", "content"];
+    static reRenderProps = [
+        "adUnitPath",
+        "slotSize",
+        "outOfPage",
+        "content",
+        "npa"
+    ];
     /**
      * An instance of ad manager.
      *
@@ -387,8 +403,9 @@ class Bling extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        const { propsEqual } = Bling._config;
-        const { sizeMapping } = this.props;
+        const {propsEqual} = Bling._config;
+        const {sizeMapping} = this.props;
+
         if (
             (nextProps.sizeMapping || sizeMapping) &&
             !propsEqual(nextProps.sizeMapping, sizeMapping)
@@ -601,10 +618,12 @@ class Bling extends Component {
     }
 
     defineSlot() {
-        const { adUnitPath, outOfPage } = this.props;
+        const { adUnitPath, outOfPage, npa } = this.props;
         const divId = this._divId;
         const slotSize = this.getSlotSize();
 
+        this.handleSetNpaFlag(npa);
+
         if (!this._adSlot) {
             if (outOfPage) {
                 this._adSlot = Bling._adManager.googletag.defineOutOfPageSlot(
@@ -779,6 +798,24 @@ class Bling extends Component {
 
         return <div id={this._divId} style={style} />;
     }
+
+    /**
+     * Call pubads and set the non-personalized Ads flag, if it is not undefined.
+     *
+     * @param {boolean} npa
+     */
+    handleSetNpaFlag(npa) {
+        if (npa === undefined) {
+            return;
+        }
+
+        Bling._adManager.pubadsProxy({
+            method: "setRequestNonPersonalizedAds",
+            args: [npa ? 1 : 0],
+            resolve: null,
+            reject: null
+        });
+    }
 }
 
 // proxy pubads API through Bling

test/Bling.spec.js

@@ -163,6 +163,45 @@ describe("Bling", () => {
         );
     });
 
+    it("call pubads API to set non-personalized Ads when npa prop is set", done => {
+        const spy = sinon.stub(Bling._adManager, "pubadsProxy");
+        const expectedParamTrue = {
+            method: "setRequestNonPersonalizedAds",
+            args: [1],
+            resolve: null,
+            reject: null
+        };
+        const expectedParamFalse = {
+            ...expectedParamTrue,
+            args: [0]
+        };
+
+        Bling.once(Events.RENDER, () => {
+            expect(spy.calledWith(expectedParamTrue)).to.be.true;
+            expect(spy.calledWith(expectedParamFalse)).to.be.true;
+            spy.restore();
+            done();
+        });
+
+        // Render once to test with non-personalized ads
+        ReactTestUtils.renderIntoDocument(
+            <Bling
+                adUnitPath="/4595/nfl.test.open"
+                npa={true}
+                slotSize={["fluid"]}
+            />
+        );
+
+        // Render a second time to test re-enable personalized ads
+        ReactTestUtils.renderIntoDocument(
+            <Bling
+                adUnitPath="/4595/nfl.test.open"
+                npa={false}
+                slotSize={["fluid"]}
+            />
+        );
+    });
+
     it("fires once event", done => {
         const events = Object.keys(Events).map(key => Events[key]);