Advanced Usage
- Lazy Loading
- Passing the Configuration Asynchronously
- Updating the Configuration After Initial Rendering
🎁 since version 4.0.0
“Lazy loading” is a performance optimization technique to improve the page speed of your website. Imagine a web page with a blog article that is quite long – users will scroll through the article as they read, as the browser shows only shows a small part of the article in its viewport.
Let's say we have 10 banner advertisements throughout this blog article, after every three text paragraphs.
Without lazy loading, all of these banner ads are loaded as soon as the web page is loaded. This will put a significant burden of data for the user's browser to load, delay page loading and probably annoy the user.
With lazy loading, we can fill the ad slots only when needed, i.e. when the user actually scrolls down the page and the ads move into the browser viewport.
You can add the configuration option enableLazyLoad: true to the root of your configuration object, or you can add it
to individual slots. If the option is at the root, all ad slots will be filled as soon as they move into the viewport,
if you enable it per slot, only those ads are filled when they enter the view port, all other ads are filled as soon as
the container div element is rendered.
Similar to the built-in lazy loading feature of GTP, you can also configure the lazy loading to happen in advance, before the slot is actually in the viewport, when it is a specific distance away, and you can configure a longer distance for mobile devices.
Refer to the Configuration page for details.
There are two advantages to using the lazy loading of react-advertising over the built-in lazy loading feature of GTP:
- It works with Prebid ads – GPT's lazy loading doesn't
- You can configure lazy loading individually for each slot – this is not supported by GPT, only global setting
🎁 since version 1.1.0
Instead of rendering your AdvertisingProvider component with a configuration prop, you can choose to omit the config prop.
In some cases, you may want not have your ad config ready when the page is initially loaded, perhaps because you are fetching it asynchronously from a service. In this case, you wouldn't want to block the whole page from being shown to the user, just because the ad config has not been loaded yet.
The solution is to render the AdvertisingProvider without a config on initial page load, then load the config, then
re-render the page after the config has been loaded successfully.
🎁 since version 2.0.0
You can update your AdvertisingProvider by re-rendering it with a different configuration prop than before.
When the AdvertisingProvider receives a new config prop, it will automatically tear down GPT and Prebid/Amazon TAM and set them
up again with the updated configuration, causing all the ad slots in the container to get refreshed with new ads
according to the new config.
Targeting parameters may change due to user interactions, for example when the user logs in, you now know a lot more
about them than before. Your ads will yield more revenue with this additional information, which you want to pass as
targeting parameters. Passing an updated configuration to the AdvertisingProvider allows you to refresh your ads slots
with ads that are more specifically targeted.