• The code examples should point to the ones in the new workspace “React Advertising” on Codesandbox.io
• It should be very clear that use of Prebid.js is optional
• An additional wiki section should explain how to use lazy loading

How can I set pbjs.bidderSettings or maybe other prebid settings in the AdvertisingProvider config?

http://prebid.org/dev-docs/publisher-api-reference.html#module_pbjs.bidderSettings

The configuration is often times loaded asynchronously from some service endpoint. Since the config at the moment needs to be available when the AdvertisingProvider component is rendered, we need to display a spinner to the user for the whole page, which is suboptimal. It should be possible to update the AdvertisingProvider component with a config after it was rendered for the first time without config to avoid this.

Hello.

Thanks for creating this package, there are some very good ideas here, but we are experiencing low inscreen in DFP but not in our own tracking.

We think the issue might be in the setupGpt function where you call enableSingleRequest() - https://github.com/technology-ebay-de/react-prebid/blob/master/src/Advertising.js#L205

And I know you put it plugin support, but since this is called after the plugin is called I'm not sure how to go about changing it.

The specific error from adding ?googfc to the url on our site is:
googletag.defineSlot was called more times than there are DIVs in the DOM associated with ad slots while in Single Request Mode. This will impact impression counts.

Any help would be appreciated.

https://webpack.js.org/migrate/5/

When using beta version 4.0.0-beta.1, which makes Prebid optional, a webapp will crash when the AdvertisingProvider component is rendered on the server side.

Hi, if I create a PR to add a babel step will you be open to that?
Our webpack code ignores node_modules so we can only see minified code in the react dev tools for this package. Most other packages ship babelified (unminified) code so it plays nice.

When implementing in a Gatsby.js website, the ads appear on the first load of the website, but as it uses gatsby link, navigating to the next page (or refresh the current one) doesn't render the head code again, and so, no new ad requests are being made.

I think that this issue is discussed in this article.

The docs of react-advertising say: "Works well in single page applications with multiple routes", so I was wondering whether my use case is supported.

Thanks in advance!

Browser

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Safari/605.1.15

Observed behavior

• Run Storybook locally
• Scroll down lazy loading page
• Not all the ads appear

Complex functionality like lazy loading, asynchronous config loading or config switching should be tested through end-to-end tests.

A promising setup: Storybook combined with Cypress.

Run the E2E tests with Travis.

Measure code coverage with Istanbul, as explained in the Travis docs.

Combine the coverage data with the coverage data from the Jest unit tests and send the combined data to Coveralls.

As a first spike, set up a test that just renders a plain old GCP ad.

• Update to latest and greatest Jest
• Get rid of chai

Related issue: #28

We are seeing this error occurring “in the wild”, reported via Track.js:

Error: null is not an object (evaluating 'this.advertising.isConfigReady')

This is because in the teardown function of the AdvertisingProvider, the internal instance of the Advertising class is set to null, but then a componentDidUpdate is triggered that expects this not to be null.

When an error is thrown in the Advertising module, there is no error message on the console.

Outdated dependencies need to be updated, see console output when running a yarn install:

warning @babel/cli > @nicolo-ribaudo/chokidar-2 > braces > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning @babel/cli > @nicolo-ribaudo/chokidar-2 > braces > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning coveralls > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning coveralls > request > [email protected]: this library is no longer supported
warning enzyme > cheerio > [email protected]: Use cheerio-select instead
warning jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
warning webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning webpack > watchpack > watchpack-chokidar2 > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has unmet peer dependency "[email protected] || 0.20.x || 0.22.x || ^1.0.0-0".
warning " > [email protected]" has incorrect peer dependency "prop-types@<=15.6.0".

In eBay's Track.js error tracking system for Kijiji Autos, we see reports like this:

this.queue.push is not a function. (In 'this.queue.push({id:t,customEventHandlers:r})', 'this.queue.push' is undefined)

These are errors happening in production, in our users' browsers.

Version 4.0.0.beta has improved the situation, so that the errors happen less frequently:

Stack trace:

The likely culprit is the de-initialization that happens when the AdvertisingProvider unmounts.

The sizeMappingName and sizeMappings don't appear to be working.

I've created a minimalistic example based on the demo linked in the documentation here: https://codesandbox.io/s/gpt-prebid-npm-es6-forked-kvnccc?file=/src/config.js:19-31

I hope I've misunderstood how to use this, in which case can someone point me in the right direction.

Hello everybody!

I need to use prebid within a react-native project?

I need to handle many bidders, and cannot fin any way to do it as prebid.js uses window variable

How can I do this?

Would be nice to have an NPM badge on the readme that links to https://www.npmjs.com/package/react-advertising

Hello,

I've set-up the component correctly (I think. There is no error , but I have no ads displayed.

import Head from 'next/head'
import { AdvertisingProvider, AdvertisingSlot } from 'react-advertising';
import { useEffect, useState } from 'react';

import styles from '../../styles/Home.module.css'

const config = {
  slots: [
    {
      path: '/19968336/header-bid-tag-0',
      id: 'div-gpt-ad-1460505748561-0',
      sizes: [302, 301],
      prebid: [{
        // media types object for this Prebid config
        mediaTypes: {
          banner: {
            sizes: [[302, 301]], // custom size
          }
        },

        // array of bid objects
        bids: [
          {
            bidder: 'My bidder',
            params: {
              // splacementId: '10433394',
              zoneToken: "my zone token"
            }
          }
        ]
      }],
    },
  ]
};

const IabDesktop = () => {

  return (
    <div className={styles.container}>

      <AdvertisingProvider config={config}>
        {console.log(config)}
        <Head>
          <title>IAB desktop</title>
          <link rel="icon" href="/favicon.ico" />
          <script async src="prebid.js"></script>
          <script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
          {/* <script>var googletag=googletag||{};googletag.cmd=googletag.cmd||[]</script>
            <script>var pbjs=pbjs||{};pbjs.que=pbjs.que||[]</script> */}
          {true && function () {
            var googletag = googletag || {}; googletag.cmd = googletag.cmd || [];
            var pbjs = pbjs || {}; pbjs.que = pbjs.que || []
            return true;
          }}
        </Head>

        <main className={styles.main}>
          <h2>Prebid.js Test</h2>
          <h5>Div-1</h5>
          <AdvertisingSlot id="div-gpt-ad-1460505748561-0" />

          </main>
      </AdvertisingProvider>
    </div>
  )
}


export default IabDesktop;

Do you have an idea on why the ad doesn't display ?
The ad container have the right sizes. I go an auction but nothing happen after

Thanks for the amazing work on this package eBayClassifiedsGroup!

Question. We're trying to accommodate a request of the following Gpt config...

googletag.pubads().enableLazyLoad({
  // Render slots within 1.5 viewports.
  renderMarginPercent: 150,
  mobileScaling: 2.0
 });

We tried passing this in plugins like so:

const plugins = [
  {
    setupGpt() {
      window.googletag.pubads().enableLazyLoad({
        // Render slots within 1.5 viewports.
        renderMarginPercent: 150,
        mobileScaling: 2.0,
      })
    },
  },
]

However, this seems to have no effect. Is this possible or will it conflict with the default functions like pubads.disableInitialLoad() that are run inside of setupGpt?

Currently (version 2.x.x), there are two ways to include React Prebid in a project:

• Using index-esnext.js – this is the untranspiled code using ES modules, needs to be run through Babel before it can be used
• Using index.js – this is the transpiled version that can be used directly in the browser

The problem with this approach: It is hard to debug the minified code (see issue #18). To solve this, we should provide the transpiled and unminified code per default. Users who want to use react-prebid through a CDN should be able to download the transpiled and minified bundle from UNPKG.

Requirements

• All JavaScript bundles that are intended to be imported by client applications are be placed in a dist folder, which is not under source control and created on the fly by the webpack build
• The webpack build creates the following files in the dist folder:
  • index.js – transpiled, unminified Common JS bundle, to be imported with a require statement
  • index.js.map – source map for index.js
  • react-prebid.esm.js – untranspiled, unminified source code, bundled into one file, to be imported as ES module with an import statement
  • react-prebid.esm.js.map – source map for react-prebid.esm.js
  • react-prebid.umd.js – transpiled, unminified UMD bundle, to be incuded in web pages through a script tag, loaded from a CDN
  • react-prebid.umd.js.map – source map for react-prebid.umd
  • react-prebid.umd.min.js – transpiled, minified UMD bundle, to be incuded in web pages through a script tag, loaded from a CDN
  • react-prebid.umd.min.js.map – source map for react-prebid.min.umd
• The package.json file points to the various bundles:
  • "main": "dist/index.js"
  • "module": "dist/react-prebid.esm.js"
  • "unpkg": "dist/redux-toolkit.umd.min.js"
• The documentation explains how to import React Prebid
  • as Common JS module
  • as an ES module
  • as a UMD bundle through the UNPKG CDN
• Description of release 3.0.0 on the releases page includes a migration guide from 2.x.x

In version 3.0.2 singleRequest works right out of the box, but in all the versions released after, it will not do a singleRequest.

If you take a look at this sandbox (https://codesandbox.io/s/gpt-prebid-npm-es6-forked-0k44wy), and if you select react-advertising 3.0.2 or earlier, singleRequest will work as it should. But all versions after will not work, as shown below.

The AdvertisingProvider is really messy, best would probably to rewrite it from scratch as functional component. This should also fix the warning message we currently have when running Jest tests:

 PASS  src/components/AdvertisingProvider.test.js (7.431 s)
  ● Console

    console.error
      Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
          at AdvertisingProvider (/Users/pahund/git/react-advertising/src/components/AdvertisingProvider.js:9:22)

      38 |       await this.advertising.setup();
      39 |       // eslint-disable-next-line react/no-did-update-set-state
    > 40 |       this.setState({
         |            ^
      41 |         activate: this.advertising.activate.bind(this.advertising),
      42 |         config: this.advertising.config,
      43 |       });

Hello, Did you support Native Ads ? thanks

Wiki page for contributors should explain

• how to install and build the project locally
• how to publish new package version
• how to run Storybook
• how to run test
• how to use Cypress

If you try to render ads without an ad unit path being present either in the global config or slot config, react-prebid will happily try to initialize GPT slots, prompting an error from the gpt.js library, e.g.:

Exception in queued GPT command TypeError: "slot is null"

Validate if an ad unit path is provided and give the developers a useful error message in this case.

When you publish, you have to manually switch your npm registry config if you are not using the public npm registry by default.

Allow TypeScript projects to easily integrate react-advertising by providing a type definition file.

Lazy loading is not yet covered by unit tests. With PR #54, we now can use Cypress and Storybook for end-to-end testing.

• Set up a lazy loading story in the Storybook that demonstrates how ads are lazy loaded when you scroll down the page
• Create a Cypress test spec that checks if the ads are properly loaded when scrolling down

The AdvertisingSlot component in version 4.0.0 uses the browser's Intersection Observer API. This is not supported by Internet Explorer 11. Find out if it can be easily fixed for IE11 by adding a polyfill. If so, add info to the IE11 compatibility page in the wiki.

Since version 4.0.0-beta.0, use of Prebid is optional and you can use only GPT to show display ads (see PR #37).

The library decides whether to use Prebid or not by checking if the global object window.pbjs is defined.

In some cases, it is desirable to override this auto-detection and force react-advertising to not use Prebid, even if it could.

For this purpose:

• add a new config option usePrebid
• default value should by typeof window.pbjs !== 'undefined', i.e. if not present, it is set to true if the Prebid library is present and false if it isn't
• when set to false, only GPT is used for displaying ads

The version history on NPM should roughly match the releases on Github.

https://www.npmjs.com/package/react-advertising?activeTab=versions

https://github.com/eBayClassifiedsGroup/react-advertising/releases

4.2.2 is on NPM but the newest release/tag on the releases page is 4.1.2.

Ideally we create a Github release and an automation releases to NPM for us.

Hi there!

Thanks for the awesome library. I ran into a minor issues with the documentation:

From https://github.com/technology-ebay-de/react-prebid/wiki/Usage:

<script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
<script>const googletag=googletag||{};googletag.cmd=googletag.cmd||[]</script>
<script async src="//acdn.adnxs.com/prebid/not-for-prod/1/prebid.js"></script>
<script>const pbjs=pbjs||{};pbjs.que=pbjs.que||[]</script>

Which does not work in my setup and results in the following errors:

prebid:3 Uncaught ReferenceError: googletag is not defined
prebid:3 Uncaught ReferenceError: pbjs is not defined

The example on codesandbox uses var instead:

  <script async src="//www.googletagservices.com/tag/js/gpt.js"></script>
  <script>var googletag=googletag||{};googletag.cmd=googletag.cmd||[]</script>
  <!--
      This example uses a test version of Prebid.js hosted on a CDN that is not recommended for production use.
      It includes all available adapters. Production implementations should build from source or customize the
      build using the download page to make sure only the necessary bidder adapters are included:
      http://prebid.org/download.html
    -->
  <script async src="//acdn.adnxs.com/prebid/not-for-prod/1/prebid.js"></script>
  <script>var pbjs=pbjs||{};pbjs.que=pbjs.que||[]</script>

And it works just fine! :-)

My App is build with nextjs, everything has the newest version.

Currently, react-advertising only works if you use GPT in conjunction with Prebid.js. Use of Prebid.js should be optional, react-advertising should work with GPT only.