fix: render ad inside storybook

Storybook relies on iframes to render stories, gpt map sizes, used to build responsive ads don't seem to work with it. This hack solves it for now until further developments on storybookjs/storybook#862
newsuk · Jul 4, 2017 · 6e0760a · 6e0760a
1 parent b45e843
commit 6e0760a
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 206 deletions.
diff --git a/packages/gpt/ad-manager.js b/packages/gpt/ad-manager.js
@@ -1,11 +1,11 @@
-import series from 'run-series';
-import parallel from 'run-parallel';
+import series from "run-series";
+import parallel from "run-parallel";
 
-import { getSlotConfig } from './generate-config';
-import gptManager from './gpt-manager';
-import pbjsManager from './pbjs-manager';
+import { getSlotConfig } from "./generate-config";
+import gptManager from "./gpt-manager";
+import pbjsManager from "./pbjs-manager";
 
-function AdManager (options = {}) {
+function AdManager(options = {}) {
   if (!(this instanceof AdManager)) {
     return new AdManager();
   }
@@ -17,64 +17,73 @@ function AdManager (options = {}) {
   this.initialised = false;
 }
 
-AdManager.prototype.isReady = function isReady () {
+AdManager.prototype.isReady = function isReady() {
   return this.initialised;
 };
 
-AdManager.prototype.init = function init (callback) {
+AdManager.prototype.init = function init(callback) {
   // Load scripts if needed be
   gptManager.loadScript();
   pbjsManager.loadScript();
 
-  series([
-    // Set services config
-    parallel.bind(parallel, [
-      gptManager.setConfig.bind(gptManager),
-      pbjsManager.setConfig.bind(pbjsManager)
-    ]),
-    // Init services
-    parallel.bind(parallel, [
-      gptManager.init.bind(gptManager),
-      pbjsManager.init.bind(pbjsManager, this.adQueue)
-    ])],
-    (err) => {
+  series(
+    [
+      // Set services config
+      parallel.bind(parallel, [
+        gptManager.setConfig.bind(gptManager),
+        pbjsManager.setConfig.bind(pbjsManager)
+      ]),
+      // Init services
+      parallel.bind(parallel, [
+        gptManager.init.bind(gptManager),
+        pbjsManager.init.bind(pbjsManager, this.adQueue)
+      ])
+    ],
+    err => {
       if (err) throw new Error(err);
       this.initialised = true;
       // Actually push the ads to GPT
-      this.adQueue.forEach((ad) => {
+      this.adQueue.forEach(ad => {
         this._pushAdToGPT(ad.code, ad.mappings, ad.options);
       });
       if (callback) callback();
     }
   );
 };
 
-AdManager.prototype.registerAd = function registerAd (code, { width = 1024 } = {}) {
+AdManager.prototype.registerAd = function registerAd(
+  code,
+  { width = 1024 } = {}
+) {
   this.adQueue.push(getSlotConfig(this.section, code, width));
 };
 
-AdManager.prototype.unregisterAd = function registerAd (code) {
-  const queueIds = this.adQueue.map((item) => item.id);
+AdManager.prototype.unregisterAd = function registerAd(code) {
+  const queueIds = this.adQueue.map(item => item.id);
   const idx = queueIds.indexOf(code);
   if (idx > -1) {
     this.adQueue.splice(idx, 1);
   }
 };
 
-AdManager.prototype.display = function display (callback) {
+AdManager.prototype.display = function display(callback) {
   gptManager.googletag.cmd.push(() => {
     pbjsManager.pbjs.que.push(() => {
-      console.log('refresh')
+      console.log("refresh");
       pbjsManager.pbjs.setTargetingForGPTAsync();
       gptManager.googletag.pubads().refresh();
-      if(callback) callback();
+      if (callback) callback();
     });
   });
 };
 
-AdManager.prototype._pushAdToGPT = function pushAdToGPT (adSlotId, sizingMap, options = {}) {
+AdManager.prototype._pushAdToGPT = function pushAdToGPT(
+  adSlotId,
+  sizingMap,
+  options = {}
+) {
   if (!this.initialised) {
-    throw new Error('Ad manager needs to be initialised first');
+    throw new Error("Ad manager needs to be initialised first");
   }
 
   gptManager.googletag.cmd.push(() => {
@@ -89,12 +98,12 @@ AdManager.prototype._pushAdToGPT = function pushAdToGPT (adSlotId, sizingMap, op
 
     // Display the ad
     gptManager.googletag.display(adSlotId);
-console.log('Display slot', slot)
-console.log('Sizing map', sizingMap)
+    console.log("Display slot", slot);
+    console.log("Sizing map", sizingMap);
   });
 };
 
-AdManager.prototype._generateSizings = function generateSizings (sizingMap) {
+AdManager.prototype._generateSizings = function generateSizings(sizingMap) {
   const mapping = gptManager.googletag.sizeMapping();
 
   for (let i = 0; i < sizingMap.length; i++) {
@@ -105,8 +114,12 @@ AdManager.prototype._generateSizings = function generateSizings (sizingMap) {
   return mapping.build();
 };
 
-AdManager.prototype._createSlot = function createSlot (adSlotId, section) {
-  return gptManager.googletag.defineSlot(`/${this.networkId}/${this.adUnit}/${section}`, [], adSlotId);
+AdManager.prototype._createSlot = function createSlot(adSlotId, section) {
+  return gptManager.googletag.defineSlot(
+    `/${this.networkId}/${this.adUnit}/${section}`,
+    [],
+    adSlotId
+  );
 };
 
 export default AdManager;
diff --git a/packages/gpt/config.js b/packages/gpt/config.js
@@ -14,27 +14,17 @@ const sizes = {
     {
       width: 300,
       height: 100,
-      sizes: [
-        [320, 50],
-        [320, 48],
-        mobileStandard
-      ]
+      sizes: [[320, 50], [320, 48], mobileStandard]
     },
     {
       width: 768,
       height: 90,
-      sizes: [
-        leaderboard
-      ]
+      sizes: [leaderboard]
     },
     {
       width: 1024,
       height: 250,
-      sizes: [
-        billboard,
-        wideLeaderboard,
-        leaderboard
-      ]
+      sizes: [billboard, wideLeaderboard, leaderboard]
     }
   ],
   intervention: [
@@ -46,28 +36,17 @@ const sizes = {
     {
       width: 300,
       height: 100,
-      sizes: [
-        [300, 250],
-        [320, 50],
-        [320, 48],
-        mobileStandard
-      ]
+      sizes: [[300, 250], [320, 50], [320, 48], mobileStandard]
     },
     {
       width: 768,
       height: 90,
-      sizes: [
-        leaderboard
-      ]
+      sizes: [leaderboard]
     },
     {
       width: 1024,
       height: 250,
-      sizes: [
-        billboard,
-        wideLeaderboard,
-        leaderboard
-      ]
+      sizes: [billboard, wideLeaderboard, leaderboard]
     }
   ],
   pixel: [
@@ -80,82 +59,78 @@ const sizes = {
 };
 
 const bidders = {
-  'appnexus': {
-    'placementId': '5823281'
+  appnexus: {
+    placementId: "5823281"
   },
-  'rubicon': {
-    'accountId': '14062',
-    'siteId': '70608',
-    'zoneId': '335918'
+  rubicon: {
+    accountId: "14062",
+    siteId: "70608",
+    zoneId: "335918"
   },
-  'amazon': {
-    'accountId': '3360'
+  amazon: {
+    accountId: "3360"
   },
-  'criteo': {
-    'zoneMap': {
-      '120x600': '764877',
-      '160x600': '764878',
-      '300x100': '764885',
-      '300x250': '764879',
-      '300x600': '764880',
-      '320x50': '764882',
-      '728x90': '764881',
-      '970x250': '764883',
-      '970x90': '764884'
+  criteo: {
+    zoneMap: {
+      "120x600": "764877",
+      "160x600": "764878",
+      "300x100": "764885",
+      "300x250": "764879",
+      "300x600": "764880",
+      "320x50": "764882",
+      "728x90": "764881",
+      "970x250": "764883",
+      "970x90": "764884"
     }
   },
-  'pubmatic': {
-    'accountId': '01234',
-    'adSlotPrefix': 'TheTimes'
+  pubmatic: {
+    accountId: "01234",
+    adSlotPrefix: "TheTimes"
   },
-  'indexExchange': {
-    'siteId': '1234'
+  indexExchange: {
+    siteId: "1234"
   }
 };
 
 // Prebid JS config
 const pbjs = {
-  'timeout': 1000,
-  'minPrice': 0.01,
-  'maxBid': 15,
-  'bucketSize': 0.25,
-  'bidders': {
-    'appnexus': {
-      'placementId': '5823281'
+  timeout: 1000,
+  minPrice: 0.01,
+  maxBid: 15,
+  bucketSize: 0.25,
+  bidders: {
+    appnexus: {
+      placementId: "5823281"
     },
-    'rubicon': {
-      'accountId': '14062',
-      'siteId': '70608',
-      'zoneId': '335918'
+    rubicon: {
+      accountId: "14062",
+      siteId: "70608",
+      zoneId: "335918"
     },
-    'amazon': {
-      'accountId': '3360'
+    amazon: {
+      accountId: "3360"
     },
-    'criteo': {
-      'zoneMap': {
-        '120x600': '764877',
-        '160x600': '764878',
-        '300x100': '764885',
-        '300x250': '764879',
-        '300x600': '764880',
-        '320x50': '764882',
-        '728x90': '764881',
-        '970x250': '764883',
-        '970x90': '764884'
+    criteo: {
+      zoneMap: {
+        "120x600": "764877",
+        "160x600": "764878",
+        "300x100": "764885",
+        "300x250": "764879",
+        "300x600": "764880",
+        "320x50": "764882",
+        "728x90": "764881",
+        "970x250": "764883",
+        "970x90": "764884"
       }
     },
-    'pubmatic': {
-      'accountId': '01234',
-      'adSlotPrefix': 'TheTimes'
+    pubmatic: {
+      accountId: "01234",
+      adSlotPrefix: "TheTimes"
     },
-    'indexExchange': {
-      'siteId': '1234'
+    indexExchange: {
+      siteId: "1234"
     }
   }
 };
 
-export {
-  pbjs,
-  sizes,
-  bidders
-};
+export { pbjs, sizes, bidders };