jaanauati / react-dfp

A React implementation of the Google DFP/GPT api. https://react-dfp.surge.sh
MIT License
127 stars 53 forks source link

Blank adunit single page application on page updates #74

Open aarmel-sw opened 6 years ago

aarmel-sw commented 6 years ago

This could be a DFP issue. If anyone has any ideas that would be great. Or experienced the issue.

I have tried a number of things including removing "googletag.pubads().enableSingleRequest();" from manager.js which I saw referenced in DFP forums.

When either paging through results (react app requests next page of results via api and updates state), or switching from one container to the other (using redux). I get empty responses from DFP. If you page VERY slowly the ads will populate. Its behaves like its throttled but I cannot find any reason or setting for it anywhere. (first try of dfp).

jaanauati commented 6 years ago

hi @aarmel-sw !, have u tried debugging with the dfp console? (?googfc parameter), in case that you are still having issues and if you believe this is a problem with react-dfp, it would be great to have an example of your code so I can review.

Thanks!

aarmel-sw commented 6 years ago

I tried the debug console but it didn't help me much. I couldn't see anything wrong. We are looking at finding a DFP expert to confirm the actual DFP side is setup correctly.

I'll update once I have more information. (I believe at the moment this is a DFP issue / DFP not setup correctly, not react-dfp).

aarmel-sw commented 6 years ago

Ok. So this was to do with correlator value.

The correlator value is the same for each page as you page through the list of search results. This is a randomly-generated value that is normally used to tell DFP that an ad is on the same page as other ads.

This value defaults to a different value if more than 30 seconds have passed between requests but on our site we have the same value even after a few minutes have elapsed. What might be occurring is that DFP is "running out" of eligible ads, as it continually thinks it is on the same page. Depending on how you initiate the ad slot refresh or if you are suppressing the correlator update.

https://developers.google.com/doubleclick-gpt/reference#googletag.PubAdsService_refresh https://developers.google.com/doubleclick-gpt/reference#googletag.PubAdsService_updateCorrelator

FIX FOR ME

    DFPManager.getGoogletag().then(
      function (gt) {
        if (typeof gt.pubads == 'function') {
          gt.pubads().updateCorrelator()
        }
      }
aarmel-sw commented 5 years ago

There were recent changes to DFP again so the below code now.

I have the below in our container class. The DFP slots themselves

Container class
 componentDidUpdate() {
    DFPManager.load()
    DFPManager.getGoogletag().then(
      function (gt) {
        gt.destroySlots()
      }
    )
  }

The advert component

import {AdSlot}           from "react-dfp"

  render() {
    return (
      <div className="col s12 m6 flex fade-in one">
        <div className="result-ad">
          <div className="result-ad-unit">
            <AdSlot
              dfpNetworkId="78088731"
              sizes  = {[[250, 250], [200, 200], [250, 250]]}
              adUnit = {this.props.adslot}
              sizeMapping  = {
                               [
                                 {viewport: [920, 0], sizes:[[250, 250]]},
                                 {viewport: [720, 0], sizes:[[200, 200]]},
                                 {viewport: [320, 0], sizes:[[250, 250]]}
                               ]
                             }
            />
          </div>
          <div className="result-ad-label">
            <h5>Advertisement</h5>
          </div>
        </div>
      </div>
    )
  }