web-advertising

TL;DR

$ echo "registry=https://npm-proxy.fury.io/ELDM55zYbH-tszmYboxa/tmf/" >> .npmrc
$ yarn add @doodle/advertising @doodle/components

Usage

This library provides a couple components and a set of actions, reducer and saga related to displaying ads with the Google Publisher Tag library:

• <AdsProvider>
• <Layout>
• <AdSlot>

import { Layout, AdSlot } from '@doodle/advertising';
import { Page, Pattern, Header, Link, DoodleLogo } from '@doodle/components';

const App = () => (
<Layout>
    <Page withBorder>
        <Pattern>
            <Header
                className="Main-header"
                left={[
                <Link to="/" title="Doodle" className="Link Link--white">
                    <DoodleLogo />
                </Link>,
                ]}
            />

            <AdSlot
                id="d-inside-full-pos1"
                className="d-inContentAdView"
                adUnitPath="/46753895/int-doodle.com/inside-full-pos1"
                sizeMapping={[{
                    viewport: [0, 0],
                    sizes: [[200, 200], [300, 250], [336, 280]],
                }, {
                    viewport: [580, 0],
                    sizes: [[200, 200], [300, 250], [336, 280], [580, 400], [728, 1], [728, 90]],
                }]}
            />
        </Pattern>
    </Page>
</Layout>
)

// root saga
import { all, call } from 'redux-saga/effects';
import { loadUserSaga } from '@doodle/users-api-connector';
import { adsSaga } from '@doodle/advertising';

export default function* rootSaga(options = {}) {
  yield all([
    call(adsSaga, options.ads), // needs to be before user saga to "take" initial USER_LOADED
    call(loadUserSaga, options.usersApi),
    // ... add other sagas here
  ]);
}