YouTube Ad Wrapper React component

YouTubeAdWrapper.jsx

import React from 'react';
import PropTypes from 'prop-types';
import querystring from 'qs';
import { AdSlotConsumer } from './AdSlotConsumer';

export const isYouTubeEmbedURL = url =>
  !!url.match(/^(https|http):\/\/(?:www\.)?youtube.com\/embed\/[A-z0-9]+/g);

const getYouTubeVideoId = embedUrl => {
  const match = embedUrl.match(/\/embed\/([^?]+)/);
  return match[1];
};

const createYouTubeURLWithEmbedConfig = (url, adSlotData) => {
  const adUnitPathBase = adSlotData.getAdUnitPathBase();
  const adUnitPath = `${adUnitPathBase}/Youtube-PFP`;
  const pageLevelKeyValuePairs = adSlotData.getPageLevelKvPairs();
  const keyValuePairs = {
    ...pageLevelKeyValuePairs,
    kvid: getYouTubeVideoId(url)
  };

  // Key-values processed as a URL string, as we would do for VAST tags
  const keyValuePairsParams = querystring.stringify(keyValuePairs, {
    arrayFormat: 'comma',
    encode: false
  });
  const embedConfig = {
    adsConfig: {
      adTagParameters: {
        iu: adUnitPath,
        cust_params: keyValuePairsParams
      },
      nonPersonalizedAd: false
    }
  };

  const embedConfigParam = encodeURIComponent(JSON.stringify(embedConfig));
  return `${url}?embed_config=${embedConfigParam}`;
};

/*
  This component let us send configuration to our YouTube embeds.
  We're currently using this Google adverts.

  The way you send data to YouTube is through a URL param on the iFrame:
  https://static.googleusercontent.com/media/youtube.com/en//yt/player-for-publishers/pdf/iframe-embed-config-api.pdf

  This component takes 1 child component that is a function and does the following:
    1. Get advert data for the page
    2. Create the config for the YouTube embed
    3. Call the function with the new URL with the embed config
*/

export const YouTubeAdWrapper = ({ children, url }) => {
  if (typeof children !== 'function') {
    throw Error('YouTubeAdWrapper expects a single function as a child.');
  }

  // if this isn't a url or not a youtube url
  // just return the component passed
  if (!url || !isYouTubeEmbedURL(url)) {
    return children(url);
  }

  // otherwise add the embed config URL
  return (
    <AdSlotConsumer>
      {adSlotData => {
        const newEmbedUrl = createYouTubeURLWithEmbedConfig(url, adSlotData);
        return children(newEmbedUrl);
      }}
    </AdSlotConsumer>
  );
};

YouTubeAdWrapper.propTypes = {
  url: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired
};

export default YouTubeAdWrapper;