@ax2/gpt-ads-module - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

CHANGELOG.md

@@ -5,2 +5,12 @@ # Change Log
 
+<a name="0.3.0"></a>
+# [0.3.0](https://github.com/ax2inc/gpt-ads-module/compare/v0.2.0...v0.3.0) (2018-10-04)
+
+
+### Features
+
+* Add responsive option and isResponsive prop ([4c1488c](https://github.com/ax2inc/gpt-ads-module/commit/4c1488c))
+
+
+
 <a name="0.2.0"></a>
@@ -7,0 +17,0 @@ # [0.2.0](https://github.com/ax2inc/gpt-ads-module/compare/v0.1.1...v0.2.0) (2018-09-27)

lib/constants.js

@@ -6,2 +6,3 @@ export const DEFAULT_OPTIONS = {
   individualRefresh: false,
+  responsive: false,
 };
@@ -8,0 +9,0 @@

lib/templates/component.js

@@ -5,2 +5,5 @@ export default {
     adSlot: null,
+    mapping: [],
+    currentSizeMappingIndex: null,
+    windowResizeListenerDebounce: null,
   }),
@@ -26,2 +29,12 @@ props: {
     },
+    isResponsive: {
+      type: Boolean,
+      required: false,
+      default: <%= options.responsive %>,
+    },
+    windowResizeDebounce: {
+      type: Number,
+      required: false,
+      default: 300,
+    },
   },
@@ -80,2 +93,45 @@ computed: {
     },
+    /**
+     * Refresh ad slot
+     */
+    refreshSlot () {
+      googletag.pubads().refresh([this.adSlot]);
+    },
+    /**
+     * Window resize event listener
+     * Attached only when responsive mode is enabled, it checks wether a different size
+     * mapping can be activated after resize and forces the slot to be refreshed if it's
+     * the case
+     */
+    handleWindowResize () {
+      const { windowResizeDebounce } = this;
+      clearTimeout(this.windowResizeListenerDebounce);
+      this.windowResizeListenerDebounce = setTimeout(() => {
+        const currentSizeMappingIndex = this.getCurrentSizeMappingIndex();
+        if (currentSizeMappingIndex !== this.currentSizeMappingIndex) {
+          this.refreshSlot();
+          this.currentSizeMappingIndex = currentSizeMappingIndex;
+        }
+      }, windowResizeDebounce);
+    },
+    /**
+     * Gets the current size mapping index
+     *
+     * @return     {Number}  The current size mapping index
+     */
+    getCurrentSizeMappingIndex () {
+      const { mapping } = this;
+      let index = null;
+      mapping.some((size, i) => {
+        const [browserSize] = size;
+        const [width, height] = browserSize;
+        const mediaQuery = `(min-width: ${width}px) and (min-height: ${height}px)`;
+        if (window.matchMedia(mediaQuery).matches) {
+          index = i;
+          return true;
+        }
+        return false;
+      });
+      return index;
+    },
   },
@@ -90,2 +146,3 @@ mounted() {
       sizeMapping,
+      isResponsive,
     } = this;
@@ -108,4 +165,12 @@
         adSlot.defineSizeMapping(mapping.build());
+        this.mapping = mapping.Bd;
       }
 
+      // Init responsive behavior
+      if (this.sizeMapping.length > 0 && isResponsive) {
+        const currentSizeMappingIndex = this.getCurrentSizeMappingIndex();
+        this.currentSizeMappingIndex = currentSizeMappingIndex;
+        window.addEventListener('resize', this.handleWindowResize);
+      }
+
       this.adSlot = adSlot;
@@ -115,3 +180,3 @@ this.$gptAds.slots.push(adSlot);
       if (this.$gptAds.individualRefresh) {
-        googletag.pubads().refresh([adSlot]);
+        this.refreshSlot();
       }
@@ -128,2 +193,4 @@ });
     });
+    // Remove window resize listener
+    window.removeEventListener('resize', this.handleWindowResize);
   },
@@ -130,0 +197,0 @@ render(h) {

package.json

 {
   "name": "@ax2/gpt-ads-module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Google Publisher Tag ads integration for Nuxt",
@@ -35,11 +35,11 @@ "license": "MIT",
     "codecov": "latest",
-    "eslint": "^5.5.0",
+    "eslint": "^5.6.1",
     "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-loader": "^2.0.0",
+    "eslint-loader": "^2.1.1",
     "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.22.0",
+    "eslint-plugin-jest": "^21.24.1",
     "eslint-plugin-vue": "^4.0.0",
     "jest": "^23.6.0",
-    "jsdom": "latest",
-    "nuxt": "npm:nuxt-edge",
+    "jsdom": "^12.1.0",
+    "nuxt": "^2.1.0",
     "request-promise-native": "^1.0.5",
@@ -46,0 +46,0 @@ "standard-version": "latest"

README.md

@@ -79,2 +79,9 @@ # gpt-ads-module
 
+### responsive
+
+- **Type**: `Boolean`
+- **Default**: `false`
+
+Set to true to enable responsive mode for all ads slot. In responsive mode, ad slots listen to window resize events and refresh themselves if a different size mapping matches current window size.
+
 ## Usage
@@ -105,2 +112,3 @@
 - Type: `Array`
+- Default: `[]`
 
@@ -110,2 +118,16 @@ Size mapping for this ad. Each item in the list is an array of its own, where the first item is the browser size, and the second is the expected ad's size(s) for the breakpoint.
 
+#### isResponsive
+
+- Type: `Boolean`
+- Default: `<%= options.responsive %>`
+
+Turn responsive mode on or off for specific ads, defaults to module's `responsive` option.
+
+#### windowResizeDebounce
+
+- Type: `Number`
+- Default: `300`
+
+Debounce duration between each window resize handling.
+
 ### Examples
@@ -112,0 +134,0 @@

No alert changes

Improved metrics

Total package byte prevSize

15909

23.21%

Lines of code

282

31.16%

Number of lines in readme file

176

14.29%

No dependency changes