feat(ads): Add slot id prop to dfp ad slots (#116)

Author: sharangj

src/components/dfp-ad.js

@@ -1,8 +1,7 @@
-import React from 'react';
-import {AdSlot, DFPSlotsProvider, DFPManager} from 'react-dfp';
-import {connect} from 'react-redux';
-import {withError} from './with-error';
-
+import React from "react";
+import { AdSlot, DFPManager, DFPSlotsProvider } from "react-dfp";
+import { connect } from "react-redux";
+import { withError } from "./with-error";
 
 /**
  * This is a function which can be used to manage ad units in a single place. A component must be created, and used with the `adtype` parameter. These ads are lazy-loaded and single-request mode is disabled by default which can be overwritten as follows.
@@ -36,34 +35,62 @@ import {withError} from './with-error';
  * @param {Object} params
  * @param {string} params.defaultNetworkID - Network Id of the Ad Provider
  * @param {Object} params.config - Configuration of the ads (see example)
+ * @param {string} params.slotId - A unique string identify the Ad slot
  * @param {function} params.targeting - Function which takes in the current state, props from the parent component and returns targetting parameters
  * @param {boolean} params.collapseEmptyDivs (default true)
  * @param {boolean} params.lazyLoad (default true)
  * @param {boolean} params.singleRequest - Run Dfp in Single Request Mode (default false)
  * @category Ads
  * @returns {Component} A component that can
  */
-export function createDfpAdComponent({ defaultNetworkID, config, targeting, collapseEmptyDivs = true, lazyLoad = true, singleRequest = false }) {
-  return connect((state, ownProps) => ({
-    targetingArguments: targeting(state, ownProps),
-    defaultNetworkID: defaultNetworkID,
-    config: config,
-    collapseEmptyDivs: collapseEmptyDivs,
-    lazyLoad: lazyLoad,
-    singleRequest: singleRequest
-  }), () => ({}))(withError(DfpAdBase));
+export function createDfpAdComponent({
+  defaultNetworkID,
+  config,
+  slotId,
+  targeting,
+  collapseEmptyDivs = true,
+  lazyLoad = true,
+  singleRequest = false
+}) {
+  return connect(
+    (state, ownProps) => ({
+      targetingArguments: targeting(state, ownProps),
+      defaultNetworkID: defaultNetworkID,
+      config: config,
+      slotId: slotId,
+      collapseEmptyDivs: collapseEmptyDivs,
+      lazyLoad: lazyLoad,
+      singleRequest: singleRequest
+    }),
+    () => ({})
+  )(withError(DfpAdBase));
 }
 
-function DfpAdBase({defaultNetworkID, config, collapseEmptyDivs, targetingArguments, adtype, lazyLoad, singleRequest}) {
+function DfpAdBase({
+  defaultNetworkID,
+  config,
+  slotId,
+  collapseEmptyDivs,
+  targetingArguments,
+  adtype,
+  lazyLoad,
+  singleRequest
+}) {
   const adConfig = config[adtype];
-  return <DFPSlotsProvider dfpNetworkId={defaultNetworkID}
-                           collapseEmptyDivs={collapseEmptyDivs}
-                           targetingArguments={targetingArguments}
-                           sizeMapping={adConfig.viewPortSizeMapping}
-                           lazyLoad={lazyLoad}
-                           singleRequest={singleRequest}>
-    <AdSlot {...adConfig} />
-  </DFPSlotsProvider>;
+
+  const adProps = { slotId, ...adConfig };
+  return (
+    <DFPSlotsProvider
+      dfpNetworkId={defaultNetworkID}
+      collapseEmptyDivs={collapseEmptyDivs}
+      targetingArguments={targetingArguments}
+      sizeMapping={adConfig.viewPortSizeMapping}
+      lazyLoad={lazyLoad}
+      singleRequest={singleRequest}
+    >
+      <AdSlot {...adProps} />
+    </DFPSlotsProvider>
+  );
 }
 
 export function refreshDfpAds(adSlots) {