[MM] Feature: Add configurable collapsible ads (#122)

Author: MatthewCMoya

docs/README.md

@@ -70,7 +70,8 @@ The dom element you’d like to place the ad into. You can pass either a DOMElem
 | offset               | 0       | The offset of the viewport to consider the ad in view. This will not affect your provider’s internal viewability metrics, however it is used by the autoRefresh and autoRender options                                                                                                                  |
 | refreshRateInSeconds | 60      | If autoRefresh has been set to true, this value will be used to determine how long after an ad is in viewport (browsers scroll position + offset) until the ad should be refreshed for another impression.                                                                                              |
 | targeting            | {}      | Key value targeting values to be passed to your ad provider                                                                                                                                                                                                                                             |
-| breakpoints          | {}      | Key value list of breakpoints. (e.g. { mobile: { from: 0, to: 480 }, desktop: { from: 481, to: Infinity } })                                                                                                                                                                                            |
+| breakpoints          | {}      | Key value list of breakpoints. (e.g. { mobile: { from: 0, to: 480 }, desktop: { from: 481, to: Infinity } })                                                                                                                  
+| collapsible          | false      | Setting  to true will cause ad to be collapsed by default and only expand if ad is filled. Warning! This feature can cause content shift and should  be used with caution. [Collapsible Docs](https://developers.google.com/doubleclick-gpt/samples/collapse-empty-ad-slots)                                                                                                                                                                                         |
 | sizes                | []      | Either an array of ad sizes (e.g. [[300, 600], [300, 250]]) or if you have specified breakpoints, a key value mapping to the breakpoints (e.g. { mobile: [[300, 250]], desktop: [[300, 600], [300, 250]] }). _Note: AdJS supports standard ad creative sizes out-of-the-box and recently introduced experimental support for fluid ads. If your ad provider is able to supply and target a fluid creative, all you should need is to add `['fluid']` to your array of ad sizes on all breakpoints you'd like to implement fluid ads via AdJS._                                                                      |
 | refreshOnBreakpoint  | true    | Should the ad automatically refresh when passing the values provided in breakpoints                                                                                                                                                                                                                     |
 | *provider options*   |         | Sometimes (though discouraged) an ad network will have additional options that are required or optional. See your network to see these additional options.                                                                                                                                              |

docs/dfp-network.md

@@ -110,3 +110,27 @@ const ad = new page.Ad(el, {
   }
 });
 ```
+
+
+__Using Collapsible Ads__
+```js
+const AdJS = require('adjs');
+const DFPNetwork = require('adjs/networks/dfp');
+
+const page = new AdJS.Page(DFPNetwork);
+
+const ad = new page.Ad(el, {
+  path: '/example/adunit/path',
+
+  targeting: {
+    age: 30,
+    gender: 'female'
+  },
+
+  sizes: [
+    [300, 250],
+  ],
+
+  collapsible: true,
+});
+```

docs/error.md

@@ -39,10 +39,6 @@ Example:
  ```
 
 ## Error 3
-Description: Sizes must be of type `Array` unless breakpoints have been specified
-
-  
-## Error 4
 Description: An ad must be passed into the GenericPlugin class. If your Plugin inherits from GenericPlugin
 		and overrides the constructor make sure you are calling "super" and that you are passing in an
 		instance of an ad as the first parameter. Alternatively, you can hook into the onCreate method
@@ -69,19 +65,23 @@ Description: An ad must be passed into the GenericPlugin class. If your Plugin i
 		  }
  ```
 
-## Error 5
+## Error 4
 Description: Parent element required for sticky plugin.
 
 
-## Error 6
+## Error 5
 Description: Ad does not have an id
 
 
-## Error 7
+## Error 6
 Description: Sizes must be defined.
 
 
-## Error 8
+## Error 7
 Description: Ad Path must be defined.
 
+  
+## Error 8
+Description: Sizes must be of type `Array` unless breakpoints have been specified
+
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adjs",
-  "version": "2.0.0-beta.29",
+  "version": "2.0.0-beta.30",
   "description": "Ad Library to simplify and optimize integration with ad networks such as DFP",
   "main": "./core.js",
   "types": "./types.d.ts",

src/networks/DFP.ts

@@ -19,7 +19,7 @@ class DfpAd implements INetworkInstance {
 
     const {
       el: { id },
-      configuration: { sizes, targeting, path, breakpoints },
+      configuration: { sizes, targeting, path, breakpoints, collapsible },
     } = ad;
 
     if (!id) {
@@ -39,7 +39,11 @@ class DfpAd implements INetworkInstance {
     this.breakpoints = breakpoints;
 
     googletag.cmd.push(() => {
-      this.slot = googletag.defineSlot(path,  Array.isArray(sizes) ? sizes : [0, 0], this.id);
+      this.slot = googletag.defineSlot(path, Array.isArray(sizes) ? sizes : [0, 0], this.id);
+
+      if (collapsible) {
+        this.slot.setCollapseEmptyDiv(true, true);
+      }
 
       if (targeting) {
         Object.entries(targeting)

src/types.ts

@@ -165,6 +165,7 @@ export interface IAdConfiguration {
   autoRender?: boolean;
   sticky?: boolean;
   enableByScroll?: boolean;
+  collapsible?: boolean;
   clearOnExitViewport?: boolean;
   breakpoints?: IAdBreakpoints;
   offset?: number;

tests/ad.test.js

@@ -26,6 +26,7 @@ describe('Ad', () => {
         targeting: {
           newValues: 'moreTrue',
         },
+        collapsible: true,
       };
 
       const expected = {
@@ -35,6 +36,7 @@ describe('Ad', () => {
           newValues: 'moreTrue'
         },
         someNewKey: 'true',
+        collapsible: true,
       };
 
       const ad = page.createAd(el, overrides);