Using the YouTube PFP iFrame Embed Config API in React
Implementing YouTube’s Player for Publishers Direct Integration at Condé Nast
What is YouTube Player for Publishers Direct Integration?
YouTube Player for Publishers is the bridge between YouTube and Google Ad Manager.
Before implementing YouTube PFP Direct Integration we relied on a set of “key-values” for targeting YouTube iFrames in Google Ad Manager. Ideally we’d use the 1-to-5 levels of “Ad Units” that serves as the basic units of inventory in Google Ad Manager. All video assets were served through one shared Ad Unit at Level 1.
This is a problem if you have different websites set up in Ad Manager. You risk targeting video adverts on the wrong website.
Amongst other benefits, implementing Direct Integration removes the need for a shared Ad Unit and allows you to use all your available Ad Unit and key-value targeting in Google Ad Manager.
The iFrame Embed Config API
YouTube has a iFrame Embed Config API. There are two ways to use this API:
- Sending data through a URL parameter
You can find the details for both of these in their documentation but this post will be following 2.
Sending data through an URL parameter
YouTube are expecting a JSON object sent via an
embed_config URL parameter on the iFrame:
Implementing this in React
If you’re implementing this kind of things in React you may be able to use the iFrame as shown above.
Here is a simplified component that handles this:
What about something more complicated?
But when we implemented we had the following problems:
- We didn’t know what component will be rendering the YouTube video. We have YouTube players in our articles as well as standalone video pages.
- We also need to send “key-value pairs” from our existing advert components.
We have an advert Context provider
AdSlotProvider. This wraps most of our components in the page. This provider gives us our page level key-value pairs and Ad Unit.
What follows is a rough idea of how we’re implementing this:
- We call our
AdSlotConsumerto get relevant advert data
- We grab the
urlsent through and then add the
embed_configparam to the URL
- Then we send this URL to the child function passed to the component.
This component matches the
Context.Consumer style of passing data to child components.
Is this the best way?
Shout out to The Telegraph with the help on this, we were more than inspired by what they’ve done. Felix Amoah and the Optimisation team were invaluable in getting this implemented too.
Thanks to Dan, Dan, Nicole and Felix who reviewed and contributed to this post. 💖