Zum Hauptinhalt springen
Vercel Drains bieten Unterstützung für Web Vitals über den Speed Insights Drain. Diese Metriken können als Signale dafür dienen, ein hervorragendes Nutzererlebnis im Web bereitzustellen. Um Web Vitals in AppSignal zu empfangen, aktivieren Sie Speed Insights, fügen Sie das Paket @vercel/speed-insights zu Ihrem Projekt hinzu und erstellen Sie einen Speed Insights drain.

​
1. Speed Insights aktivieren

Klicken Sie auf der Seite Ihrer Organisation auf das Projekt, für das Sie Speed Insights aktivieren möchten. Klicken Sie dann auf den Tab Speed Insights, in dem Ihnen ein Enable Speed Insights-Dialog angezeigt wird. Screenshot des Dialogs „Enable Speed Insights" in der Vercel-Benutzeroberfläche Klicken Sie auf Purchase, um Speed Insights zu aktivieren.

​
2. @vercel/speed-insights zu Ihrem Projekt hinzufügen

Fügen Sie das Paket @vercel/speed-insights zu Ihrem Projekt hinzu und binden Sie die Komponente <SpeedInsights /> in Ihre App ein. 
npm install @vercel/speed-insights
Dadurch wird der Seite ein Skript hinzugefügt und mit der Erfassung von Web Vitals begonnen. Detailliertere Anweisungen finden Sie auf der Vercel-Dokumentationsseite.

​
3. Speed Insights Drain konfigurieren

Navigieren Sie in einem Vercel-Projekt zur Seite Settings > Drains und klicken Sie auf Add Drain. Screenshot des Schritts „Add Drain" in der Vercel-Benutzeroberfläche Wählen Sie Speed Insights als Drain-Typ und klicken Sie auf Next. Screenshot des Schritts „Add Drain" in der Vercel-Benutzeroberfläche Fügen Sie einen aussagekräftigen Namen für den Drain hinzu, z. B. „AppSignal speed insights drain”. Die Option Specific projects sowie Ihr Projekt sollten im Abschnitt Projects vorausgewählt sein. Falls nicht, stellen Sie sicher, dass Sie nur das Projekt auswählen, für das Sie Speed Insights aktiviert haben. Klicken Sie auf Next. Screenshot des Schritts „Configure drain" in der Vercel-Benutzeroberfläche Geben Sie als destination die folgende URL ein und ersetzen Sie <api_key> durch Ihren AppSignal-App-Level-Push-API-Schlüssel, den Sie in den App-Einstellungen finden: 
https://appsignal-endpoint.net/metrics/speed-insights?api_key=<api_key>
Weitere Informationen zu AppSignal-API-Schlüsseln finden Sie im Abschnitt Public Endpoint Authentication der AppSignal-API.
Wenn Sie auf Test klicken, wird ein Test-Trace an AppSignal gesendet. Klicken Sie auf Create Drain. Bei erfolgreicher Einrichtung wird automatisch ein neues Magic Dashboard mit Next.js Web Vitals für Sie erstellt.