GoogleAdSense.js

import React, { PropTypes } from 'react';
import FeatureFlag from 'App/FeatureFlag/FeatureFlag';
import FeatureVariant from 'App/FeatureFlag/FeatureVariant';

const GoogleAdSense = ({
    subcategoryName
}) => {
    // On the off-chance CLIENT_ID changes, better to have here than in a config
    const CLIENT_ID = 'partner-overstock-pdp';
    // Width of ads will be the window width minus it's padding, or fallback to 300
    const adWidth = __CLIENT__ ? (window.innerWidth - 25) : '300';

    function configureAdsOstkStyles() {
        const pageOptions = {
            pubId: `${CLIENT_ID}`,
            query: `${subcategoryName}`,
            adPage: 1,
            location: true,
            sellerRatings: false,
            siteLinks: false
        };

        const adblock1 = {
            container: 'afscontainer1',
            width: `${adWidth}`,
            number: 2,
            fontFamily: 'helvetica neue',
            fontSizeDescription: 12,
            fontSizeTitle: 14,
            colorTitleLink: '#0272A2',
            detailedAttribution: false,
            colorAdSeparator: '#fff'
        };

        if (__CLIENT__) {
            window._googCsa('ads', pageOptions, adblock1);
        }
    }

    function configureAdsDefaultStyles() {
        const pageOptions = {
            pubId: `${CLIENT_ID}`,
            query: `${subcategoryName}`,
            adPage: 1,
            location: true,
            sellerRatings: false,
            siteLinks: false
          };

        const adblock1 = {
           container: 'afscontainer1',
           width: `${adWidth}`,
           number: 2,
           detailedAttribution: true
        };

        if (__CLIENT__) {
            window._googCsa('ads', pageOptions, adblock1);
        }
    }

    return (
        <section className="component-section">
            <FeatureFlag
                description="Google Sponsored Links"
                flagConfig="googleSponsoredLinks">

                {/* The control here is no google ads */}
                <FeatureVariant variant="CONTROL" />

                <FeatureVariant variant="GOOGLE_STYLES">
                    <div>
                        <div id="afscontainer1" />
                        {configureAdsDefaultStyles()}
                    </div>
                </FeatureVariant>

                <FeatureVariant variant="OSTK_STYLES">
                    <div>
                        <div id="afscontainer1" />
                        {configureAdsOstkStyles()}
                    </div>
                </FeatureVariant>
            </FeatureFlag>
        </section>
    );
};

GoogleAdSense.propTypes = {
    subcategoryName: PropTypes.string.isRequired
};

export default GoogleAdSense;