Using the YouTube PFP iFrame Embed Config API in React

Implementing YouTube’s Player for Publishers Direct Integration at Condé Nast

“Try another one” — That man

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:

1. Using their JavaScript API
2. 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:

1. We call our AdSlotConsumer to get relevant advert data
2. We grab the url sent through and then add the embed_config param to the URL
3. 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?

Well, this does work. But maybe we should be using the JavaScript API?

It seems with this solution we can get a self-contained component and not have to worry about injecting additional JavaScript alongside iFrames.

It does mean that the component is very complicated. Could the maintenance required for this component be more than implementing their JavaScript API?

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. 💖