Streaming apps

For catalog and streaming sites, where the shell loads, your API returns the title, and only then a player is created.

Install the pixel

Add the snippet to your app shell, just before the closing </body>.

Copy your snippet from Pixels. It carries your install tag key and tracking domain.

<script defer src="https://10.vidstats.top/js/p.js?s=YOUR_TAG_KEY"></script>
<!-- Video pages only. Delete this block on pages with no video. -->
<script type="module">
  window.webstats('content', {
    type: 'movie',
    ids: { tmdb: '278' },
    title: 'The Shawshank Redemption',
  });
</script>

Your content and video calls happen later, in application code. By then the pixel has loaded, so you call webstats() directly.

Name the title when your API responds

async function loadMovie(id) {
  const movie = await api.getMovie(id);

  webstats('content', {
    type: 'movie',
    ids: { tmdb: String(movie.tmdbId), imdb: movie.imdbId },
    title: movie.title,
  });

  mountPlayer(movie);
}

That records the content view and links every play that follows to the same title.

Name the player when it mounts

function mountPlayer(movie) {
  const player = new MyPlayer('#player', movie.streamUrl);

  webstats('video', '#player', {
    id: `tmdb-${movie.tmdbId}`,
    title: movie.title,
    type: 'movie',
    tmdb: String(movie.tmdbId),
  });
}

The first argument is a CSS selector for the <video> element or any wrapper around it. Call it before the element exists if you like: the pixel applies the name as soon as it appears.

When the viewer picks another title

If your app navigates with the history API, the new pageview is recorded for you. Call content and video again for the new title.

If the title lives in the query string or the hash rather than the path, set contentNav once, before any other call:

webstats('config', { contentNav: 'query' });    // /watch?v=278
webstats('config', { contentNav: 'fragment' }); // /watch#278

Verify

Open a title, play a few seconds, then open the Video screen. Plays appear within seconds, and the row reads by title rather than by file URL.

Missing plays usually means the selector matched nothing. Run document.querySelector('#player') in the browser console: if it returns null, fix the selector.