Vidinfra Pulse

Web client for collecting page views and media playback events with Vidinfra Pulse.

Installation

npm / yarn

npm i @vidinfra/pulse
# or
yarn add @vidinfra/pulse

CDN / IIFE (Script Tag)

Add the following script tag to your HTML. All exports are available under the VidinfraPulse global.

<!-- Production (minified) -->
<script src="https://unpkg.com/@vidinfra/pulse/dist/index.global.js"></script>

<!-- Development (unminified, with readable source) -->
<script src="https://unpkg.com/@vidinfra/pulse/dist/index.global.dev.js"></script>

Then use it directly in your page:

<script>
  VidinfraPulse.initTracking({
    endpoint: 'https://<organization>.pulse.vidinfra.com/t/v1/<project-id>/<platform-id>',
    debugMode: true,
  });
</script>

To track media players via the IIFE build:

<video
  id="my-video"
  data-media-id="video-123"
  data-media-type="movies"
  title="My Video"
  src="video.mp4"
  controls
></video>

<script>
  var player = VidinfraPulse.addPlayer(document.getElementById('my-video'));

  // To stop tracking later:
  // VidinfraPulse.removePlayer(player);
</script>

Usage (ES Modules)

React / Next.js

// layout.tsx
import { initTracking } from '@vidinfra/pulse';

initTracking({
  endpoint: 'https://<organization>.pulse.vidinfra.com/t/v1/<project-id>/<platform-id>',
  debugMode: true,
});

Library-scoped data

To scope data to a specific video library, pass library_id as a query parameter in the endpoint URL:

initTracking({
  endpoint: `https://<organization>.pulse.vidinfra.com/t/v1/<project-id>/<platform-id>?library_id=<library-id>`,
});

Query parameters in the endpoint URL are preserved and forwarded to all requests.

Media

// player.tsx
import { addPlayer, removePlayer } from '@vidinfra/pulse/media';
import { useEffect, useRef } from 'react';

export function YourPlayer({ video }: Props) {
  const playerRef = useRef(null);

  useEffect(() => {
    if (!playerRef.current) return;
    const analPlayer = addPlayer(playerRef.current);

    return () => {
      removePlayer(analPlayer);
    };
  }, [playerRef.current]);

  return (
    <video
      ref={playerRef}
      width="800"
      height="450"
      data-media-id={video.id}
      data-media-type="movies"
      title={video.title}
      src={video.src}
      poster={video.poster}
      controls
      autoPlay
    ></video>
  );
}

Configuration Options

| Option | Type | Default | Description | | ---------------------- | ---------- | ------- | ------------------------------------------------ | | endpoint | string | — | Required. Your Vidinfra Pulse endpoint URL. Supports query parameters (e.g. ?library_id=xxx). | | hashMode | boolean | false | Use hash-based routing for page tracking. | | trackPage | boolean | true | Enable page view collection. | | trackMedia | boolean | true | Enable media playback collection. | | autoDiscoverPlayers | boolean | false | Auto-detect <video> elements on page navigate. | | pageViewDelay | number | 10 | Delay (ms) before recording a page view. | | debugMode | boolean | false | Log internal events to the console. | | userGetter | function | — | Callback that returns user info. | | pageMetaGetter | function | — | Callback that returns extra page metadata. |