Passer au contenu principal
Les Vercel Drains prennent en charge les Web Vitals via le Speed Insights drain. Ces métriques peuvent servir de signaux pour offrir une excellente expérience utilisateur sur le web. Pour commencer à recevoir les Web Vitals dans AppSignal, activez Speed Insights, ajoutez le package @vercel/speed-insights à votre projet et créez un Speed Insights drain.

​
1. Activer Speed Insights

Depuis la page de votre organisation, cliquez sur le projet pour lequel vous souhaitez activer Speed Insights. Cliquez ensuite sur l’onglet Speed Insights, où une boîte de dialogue Enable Speed Insights vous sera présentée. Capture d'écran de la boîte de dialogue « Enable Speed Insights » dans l'interface Vercel Cliquez sur Purchase pour activer Speed Insights.

​
2. Ajouter @vercel/speed-insights à votre projet

Ajoutez le package @vercel/speed-insights à votre projet et incluez le composant <SpeedInsights /> dans votre application. 
npm install @vercel/speed-insights
Cela ajoutera un script à la page et commencera à suivre les Web Vitals. Pour des instructions plus détaillées, rendez-vous sur la page de documentation Vercel.

​
3. Configurer le Speed Insights drain

À partir d’un projet Vercel, accédez à la page Settings > Drains et cliquez sur Add Drain. Capture d'écran de l'étape « Add Drain » dans l'interface Vercel Sélectionnez Speed Insights comme type de drain et cliquez sur Next. Capture d'écran de l'étape « Add Drain » dans l'interface Vercel Ajoutez un nom descriptif pour le drain, tel que « AppSignal speed insights drain ». L’option Specific projects ainsi que votre projet devraient être présélectionnés dans la section Projects. Si ce n’est pas le cas, assurez-vous de sélectionner uniquement le projet pour lequel vous avez activé Speed Insights. Cliquez sur Next. Capture d'écran de l'étape « Configure drain » dans l'interface Vercel Pour la destination, entrez l’URL suivante en remplaçant <api_key> par votre clé API push d’AppSignal au niveau de l’application, qui se trouve dans les App settings : 
https://appsignal-endpoint.net/metrics/speed-insights?api_key=<api_key>
Vous pouvez trouver plus d’informations sur les clés API AppSignal dans la section Public Endpoint Authentication de l’API AppSignal.
Cliquer sur Test enverra une trace de test à AppSignal. Cliquez sur Create Drain. Une fois la configuration réussie, un nouveau magic dashboard sera créé pour vous avec les Web Vitals de Next.js.