leestijd
6 min

Onze videostatistieken open source maken

Het probleem

Op videoplatforms als YouTube en Vimeo is het tellen van weergaven essentieel. Makers kunnen hun content zo aanpassen op basis van de momenten waarop kijkers afhaken. Het aantal weergaven geldt bovendien als bewijs voor de kwaliteit van de content: “Met zoveel kijkers moet dit wel goede content zijn.”

Veel makers kiezen er echter voor hun content buiten de traditionele videoplatforms te hosten. Ze uploaden simpelweg een mp4-bestand en plaatsen een <video>-tag op hun website. Maar hoe meten ze dan het succes van hun video? Het is lastig te bepalen of bezoekers de video werkelijk bekijken of alleen door de website bladeren. Hebben ze last van vertraging? Haken ze na enkele seconden af door problemen met bufferen?

De oplossing

Natuurlijk bieden we ons eigen gehoste product waarmee we veel van deze problemen direct voor je oplossen. Maar we zijn hier niet om je ons product te verkopen — vooruit, misschien een beetje. We willen vooral duidelijk maken dat video serieuze aandacht verdient. En ja, we hebben ook een eigen agenda: volgens ons moet je weergaven op een privacyvriendelijke manier tellen.

Net zoals Plausible en Simple Analytics de weg hebben vrijgemaakt voor privacyvriendelijke websitestatistieken, ontwikkelden wij Mave Metrics voor video. We willen geen mensen volgen, maar weergaven meten. En dat moet eenvoudig te implementeren en te gebruiken zijn. Tijd voor de techniek.


Aan de slag


Metrics server
maveio/metrics-server op GitHub

Het project bestaat uit een server en een clientbibliotheek. De server is geschreven in Elixir en eenvoudig met Docker te draaien. De gegevens worden opgeslagen in PostgreSQL; voor tijdreeksdata gebruiken we TimescaleDB, zodat we krachtige query’s kunnen uitvoeren. Start de toepassing met:

docker compose up metrics

Zodra de server draait, importeer je de JavaScript-bibliotheek @maveio/metrics via NPM in je project en kun je weergaven gaan meten. Zo eenvoudig is het:

npm install @maveio/metrics
import { Metrics } from "@maveio/metrics";

const video = new Metrics("#my_video", "MIB2", {
  my_video_id: 1234,
});

video.monitor();

Metrics JavaScript-bibliotheek
maveio/metrics op GitHub

De bibliotheek verwacht alleen een <video>-element met de ID #my_video in de DOM. Het tweede argument is een ID die je als referentie aan de videometriek geeft. Als derde argument kun je optioneel eigen metadata meesturen en later opvragen. Dat is handig als je voor analyses meerdere video-items wilt groeperen.

Gebruik je HLS.js, dan kun je ook het HLS-video-object aan de constructor doorgeven. Meer daarover lees je in de README van het project.

Onder de motorkap gebruikt het project de uitstekende socketimplementatie van Phoenix om alle gebeurtenissen uit de video zeer schaalbaar te verzamelen. De oplossing is lichtgewicht en heeft geen invloed op de videoprestaties.

Architectuurdiagram van het metricssysteem dat laat zien hoe Phoenix-sockets video-events verzamelen en in TimescaleDB opslaan.
↳ Architectuurdiagram van het metricssysteem dat laat zien hoe Phoenix-sockets video-events verzamelen en in TimescaleDB opslaan.

Kortom: de installatie is hopelijk heel eenvoudig, zeker als je Elixir kent. IP-adressen, cookies en fingerprinting zijn niet nodig. Je meet alleen op een eenvoudige manier videoweergaven.

Het resultaat

Op dit moment kun je drie soorten statistieken opvragen. Er is geen interface, alleen een API. Alle statistieken kun je via de identifier of metadata opvragen. Je gebruikt dus “MIB2” of de eerder meegestuurde metadata voor een query, bijvoorbeeld:

curl --location --request GET 'localhost:3000/api/v1/views' \
--data '{
    "query": {
        "video": {
            "my_video_id": 1234
        }
    },
    "timeframe": "30 days",
    "interval": "1 day"
}'

Dankzij TimescaleDB kunnen we met tijdvakken werken. Via de API geef je een interval en timeframe op. Je ontvangt de gegevens dan per interval binnen de gekozen periode. Zo kun je bijvoorbeeld het aantal weergaven per dag over de afgelopen dertig dagen ophalen.

{
    "views": [
        {
            "browser": {
                "chrome": 73,
                "safari": 52,
                ...
            },
            "device_type": {
                "desktop": 94,
                "mobile": 43,
                ...
            },
            "interval": "2023-06-14T00:00:00.000000",
            "platform": {
                "ios": 21,
                "mac": 54,
                "windows": 11,
                ...
            },
            "total_view_time": 204.267,
            "views": 174
        },
        ...
    ]
}

Weergaven

Weergaven worden per sessie geregistreerd en zijn dus uniek per paginabezoek. Bekijkt iemand binnen één sessie dezelfde video twee keer, dan telt dat als één weergave. Vernieuwt die persoon de pagina en kijkt die opnieuw, dan telt dat als twee. Of iets als weergave telt, wordt alleen bepaald door het vereiste aantal minimum_watch_seconds. Bij een video van dertig seconden kan een weergave bijvoorbeeld pas na minimaal vijf seconden kijktijd meetellen.

Naast het aantal weergaven krijg je informatie over browser-, apparaat- en platformtype. Ook ontvang je het totale aantal bekeken seconden, waarmee je gemiddelden en andere interessante waarden kunt berekenen.

Betrokkenheid

Betrokkenheid is wat complexer, maar laat zien welke delen van je video zijn bekeken. Je kunt een heatmap maken die duidelijk maakt welke fragmenten vaker zijn gezien dan andere.

Engagementheatmap die toont welke seconden van een video het meest werden bekeken, met afnemende kijkersaantallen in de loop van de tijd.
↳ Engagementheatmap die toont welke seconden van een video het meest werden bekeken, met afnemende kijkersaantallen in de loop van de tijd.

Dit werkt grotendeels hetzelfde als bij weergaven, maar in plaats van een interval als tijdvak geef je het gewenste aantal ranges op. Je krijgt het aantal weergaven per bereik terug en ziet zo waar kijkers afhaken.

Zo zie je bijvoorbeeld dat de meeste mensen seconde 0 tot en met 3 bekeken, waarna in de daaropvolgende seconden steeds meer kijkers afhaakten.

Bronnen

Bronnen zijn een wat afwijkende statistiek, maar laten zien waar je video wordt bekeken. Dat is handig als je een video op meerdere sites insluit en wilt weten waar hij het beste presteert.

Waarom open source?

We zijn developers en gebruiken dagelijks opensourceprojecten. Maar het gaat niet alleen om iets teruggeven. Ons belangrijkste doel is video’s van hoge kwaliteit leveren die uitzonderlijk goed presteren, zodat je werkelijk unieke en indrukwekkende ervaringen kunt creëren. Privacy is voor ons essentieel en we vinden dat jij volledige controle over je gegevens moet hebben.

Door ons product open source te maken, willen we volledig transparant en aanspreekbaar zijn. We laten zien dat we niet in jou of je bezoekers willen rondneuzen. We meten alleen weergaven, omdat je daarmee de impact van je video’s kunt bepalen.

Heb je een eigen website met video en gebruik je niet mave.io, dan geven we je graag meer inzicht om je video’s te verbeteren — en uiteindelijk stap je natuurlijk alsnog over op mave.

Wat nu?

Het project blijft in ontwikkeling, maar we gebruiken het al in productie op mave.io. Ook denken we na over een afzonderlijk gehoste versie, zodat je het niet zelf hoeft te draaien.

We nodigen developers, privacyvoorvechters en de bredere community uit om bij te dragen. Zo blijven we het project verbeteren en in lijn brengen met privacyprincipes.

Wil je bijdragen? Graag! Pull requests zijn welkom en we helpen je graag op weg. Neem contact met ons op via Discord of maak een issue op GitHub aan.

Veel plezier met coderen en weergaven meten!

Gepubliceerd op 28 juni 2023
werkt met
Ontwikkelaar?
Onze documentatie begeleidt je bij het embedden van video: van eenvoudige eerste stappen tot handmatige configuraties voor ervaren gebruikers. Je vindt er meerdere hostingopties, waaronder ons standaard-CDN, en uitleg over populaire webframeworks.
script
react
vue
1
2
3
4
5
🍪 Klik op ‘Accepteren’ om te bevestigen dat je het ermee eens bent dat we geen cookies gebruiken. Ja, deze banner is puur voor de show!
Accepteren