In May 2023, we released powerful engagement metrics offering detailed information on viewer behavior and playback quality on your platform. The API includes engagement metrics such as view counts and watch time, as well as performance metrics such as error rate, time to first frame, rebuffer ratio, and exit-before-starts across a variety of dimensions. For more details, check out the docs here.

In this tutorial we will introduce a simple, free, and customizable method to quickly visualize the core metrics and dimensions of the API.


Before you begin this tutorial, make sure you have:

  1. Integrated the necessary components to capture viewership data. Detail here.
  2. Viewed videos via (1) to collect data.
  3. Created an CORS-enabled API Key. The key must allow CORS access from your Grafana origin, or from all (*)
  4. Set up a Grafana account and workspace. A free account is sufficient and available at

With that we are ready to set up our dashboard!

Setting up the Engagement Dashboard

  1. Login to Grafana
  2. Click “Connections” > “Connect Data”
  1. Install “JSON Api” by either searching for it or using this url: <your-grafana-url>/grafana/connections/datasources/marcusolsson-json-datasource
  2. Set up your JSON Api:
    1. Name: e.g. “Engagement Data”
    2. URL:
    3. Custom HTTP Headers
      1. Header: “Authorization”
      2. Value: Bearer <your api key>
  3. Save and Test
  4. Get your data source’s uid from the browser’s url, e.g. <your-grafana-url>/grafana/connections/your-connections/datasources/edit/<datasource-uid>
  5. Copy and paste this uid into the json template
    1. json template available: here
    2. open in your favorite code editor
    3. ctrl+f
    4. search for <data_uid>
    5. replace with your data source uid
  6. “Import the Dashboard” using your formatted json file
  1. Click “Upload Dashboard JSON File”
  2. Rename the dashboard if you’d prefer
  3. “Import”