search

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

Support for lazy load #130

Closed eagle1000 closed 5 years ago

eagle1000 commented 5 years ago

Hello,

Does react-dfp support lazy loading of ads as shown in this gpt sample?

https://support.google.com/admanager/answer/4578089#lazyloading

If so, could you please provide an example as to how to use this feature? Thank you!

jaanauati commented 5 years ago

Hi, react-dfp does not have support for that api yet, but, on the other hand u should be able to adress this feature just using any of the available lazy load components, like react-lazy-load, just wrap your adSlot with the lazy load component this way: 

<LazyLoad ....> <AdSlot .../> </LazyLoad>

Let me know if u have issues, I’ll try to add an example to the documentation site in the following days. Thanks

eagle1000 commented 5 years ago

Hi, thank you for the response. I will play around with using a lazy load component this weekend and share the results. My only concern with doing this is that google does warn that other forms of implementation for lazy load may trigger multiple ad requests that do not trigger a creative and lead to a lower viewability rate. https://support.google.com/admanager/answer/6199883?hl=en

jaanauati commented 5 years ago

@eagle1000 fyi, I've just pushed v0.11.0, this version adds support for the gpt's lazy load api. Also made updates to the documentation site, you can find couple of examples here:

please take a look and let me know if u have questions. thanks.

eagle1000 commented 5 years ago

Hi, I cannot seem to get the lazy load to work. For simplicity, I am calling the AdSlot directly on the page with DFP manager. I have also tried using DFPSLotsProvider, but that does not seem to work either. I have an ad well down below the fold, out of the viewport and yet it always fetches and renders when the page is loaded. I am trying to have it render when the AdSlot comes into the viewport. I am attaching a sample of my code. CodeSample

jaanauati commented 5 years ago

@eagle1000 have u finally figured this out?, I can see it working at: http://react-dfp.ml/dfpslotsprovider/lazyload/.

I see that the ad requests ads?.... are only fired (network panel) when i scroll down and I reach the area where the Ad Slots are located.

Let me know if it still does not work for u.

jaanauati commented 5 years ago

"""" neolele 2:05

Hi, I need to enable lazyloading just for few AdSlots but it see it's configurable at DFPSlotsProvider level. > is there any way to do it without other implementations?

thank you very much Regards """ Hi unfortunately the gpt api does support such feature, on the other hand, if u want to lazy-load only some ads you can always use any of the many lazy load components available in npm (react-lazy-load, etc), in this case you can just declare your ad slots inside of the lazy load component, if you are working with the your ads will show up as soon as the are is in the viewport (according config you pass to react-lazy-load). Example:

<DFPSlotsProvide ...> .... .... <AdSlot .... /> ... <LazyLoad ...> <AdSlot ... /> ...

....

Notice that in this example the last two ads are lazy loaded.

https://github.com/twobin/react-lazyload

Let me know if you still have issues.

Thanks.

El El mié, may. 15, 2019 a las 3:04 a. m., neolele notifications@github.com escribió:

Hi, I got problems enabling lazyLoading too, I'm using the approach. with onSlotRender on AdSlot I'm console logging render event even when adslot is not viewable on page load. besides, I'd need to enable lazyLoading only on some adslots, not all. is it possible?

thank you regards

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/jaanauati/react-dfp/issues/130?email_source=notifications&email_token=AADJ3SLHBFWOVEHY4WO5JJTPVORVHA5CNFSM4G4HDPRKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVNTI7Q#issuecomment-492516478, or mute the thread https://github.com/notifications/unsubscribe-auth/AADJ3SMMW5DFD4SGHUWDXULPVORVHANCNFSM4G4HDPRA .