Youtube media tracking

For engineers Tracking SDKs
1

Hello

I am having problems with media tracking for youtube. If I follow your instructions in the docs (having an iframe element in the DOM) it works.

However upon creating an iframe element with the Youtube Player API no media events get tracked at all. I would expect it to track it as well since the DOM output of the API is again an iframe element having an id that gets passed to the enableYouTubeTracking function

So at this point my questions are:

  • is this something that should work or not?
  • if yes could somebody please point me into the right direction how to achieve this
1 Like
2

Hello @pbl :slight_smile:

Have you tried calling the enableYouTubeTracking function after the creation of the Youtube Player has been fully completed ?

3

Hi @Peter_Perlepes

Yes, the enableYouTubeTracking will be called once the youtube player is ready (in the onReady callback).

export const YoutubePlayer: FunctionComponent<IYoutubePlayerProps> = ({
  videoId,
  onReady,
}) => {
  useEffect(() => {
    loadYoutubeIframeAPI(loadVideo);
  }, []);

  const loadVideo = () => {
    new YT.Player(videoId, {
      videoId,
      events: {
        onReady: (e) => onReady?.(e),
      },
    });
  };

  return <div id={videoId}></div>
}

I also tested it with another library (react-youtube which is basically an abstraction layer of what I am doing right now - and no tracking events get emitted from there as well. So I wanted to make sure that the library is not the problem which it seems is not since I am having these issues here as well.

4

Thank you for the information! You can also take a look on the working youtube example on our examples repository.

Could you maybe provide a codesandbox of the reproduction with these libraries or the way you structure it in your app?
(You can leave the collector URL as a placeholder)

5

Sure. I created a codesandbox with the minimum implementation here: distracted-perlman-j96v8w - CodeSandbox

1 Like
6

Thank you very much, we will be getting back to you as soon as possible!

1 Like
7

Hey @pbl, based on the codesandbox this won’t work. Internally, the plugin also uses the onReady callback to know when it should attach the event listeners (see here).

Though, even without running enableYouTubeTracking in the onReady callback, there’s no guarantee we’d get our player in time to listen for the onReady callback in the plugin.

Thanks for raising this, I’ve made an issue you can follow.

1 Like
8

Hey @greg-el. Appreciate your help. Just a thought… for externally created player maybe it would be possible to pass a player reference to the enableMediaTracking function. Then you should be able to add all your listeners that way.

9

Hi @greg-el to follow up on this,

the fix from github Issue #1141 works like a charm - thanks! During the implementation, we came a cross the youtube context iglu:com.youtube/youtube/jsonschema/1-0-0. The context is for our current video tracking use case way too granular. We could find an option to get rid of the context. But maybe we are missing something?

Kind regards.
David

10

Hey @davidher_mann,

That’s good to hear!

There’s no way to remove the context via the plugin itself, but you can utilise a javascript enrichment to remove it:

function process(event) {
  const entities = JSON.parse(event.getContexts());
  
  entities.data = entities.data.filter(
    (entity) => entity.schema !== "iglu:com.youtube/youtube/jsonschema/1-0-0"
  );

  event.setContexts(JSON.stringify(entities));
}

Hopefully that should work all right for you!

11

Hi Greg,
thanks for your help. Removing it via JavaScript enrichment is not ideal, since it can be confusing if client-side requests and warehouse data doesn’t match. Would be great to have that option in the plugin. Anyway, thank you very much for the suggestion and enrichment snipped!