Naar hoofdinhoud gaan
Vercel Drains bieden ondersteuning voor Web Vitals via de Speed Insights-drain. Deze metrics kunnen dienen als signalen om een geweldige gebruikerservaring op het web te leveren. Om Web Vitals in AppSignal te ontvangen, schakelt u Speed Insights in, voegt u het pakket @vercel/speed-insights toe aan uw project en maakt u een Speed Insights-drain aan.

1. Speed Insights inschakelen

Klik op de pagina van uw organisatie op het project waarvoor u Speed Insights wilt inschakelen. Klik vervolgens op het tabblad Speed Insights, waar u een dialoogvenster Enable Speed Insights te zien krijgt. Schermafbeelding van het dialoogvenster "Enable Speed Insights" in de Vercel-UI Klik op Purchase om Speed Insights in te schakelen.

2. @vercel/speed-insights aan uw project toevoegen

Voeg het pakket @vercel/speed-insights toe aan uw project en neem de component <SpeedInsights /> op in uw app.
npm install @vercel/speed-insights
Hiermee wordt een script aan de pagina toegevoegd en wordt het bijhouden van Web Vitals gestart. Voor meer gedetailleerde instructies kunt u naar de Vercel-documentatiepagina gaan.

3. Speed Insights-drain configureren

Ga in een Vercel-project naar de pagina Settings > Drains en klik op Add Drain. Schermafbeelding van de "Add Drain"-stap in de Vercel-UI Selecteer Speed Insights als drain-type en klik op Next. Schermafbeelding van de "Add Drain"-stap in de Vercel-UI Voeg een beschrijvende naam toe voor de drain, zoals ‘AppSignal speed insights drain’. De optie Specific projects en uw project zouden vooraf moeten zijn geselecteerd in het gedeelte Projects. Als dat niet zo is, zorg er dan voor dat u alleen het project selecteert waarvoor u Speed Insights hebt ingeschakeld. Klik op Next. Schermafbeelding van de "Configure drain"-stap in de Vercel-UI Voer voor destination de volgende URL in en vervang <api_key> door uw app-level AppSignal push-API-sleutel, die u kunt vinden in App settings:
https://appsignal-endpoint.net/metrics/speed-insights?api_key=<api_key>
U vindt meer informatie over AppSignal API-sleutels in het gedeelte Public Endpoint Authentication van de AppSignal API.
Als u op Test drukt, wordt er een testtrace naar AppSignal verzonden. Klik op Create Drain. Bij een succesvolle installatie wordt er een nieuw magic dashboard voor u aangemaakt met Next.js Web Vitals.