Integrate flags with Vercel Web Analytics
Learn how to tag your page views and custom events with feature flags![Feature Flags section in Vercel Web Analytics](/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1716417163%2Fdocs-assets%2Fstatic%2Fdocs%2Fworkflow-collaboration%2Ffeature-flags%2Fflags-in-web-analytics-light.png&w=3840&q=75)
![Feature Flags section in Vercel Web Analytics](/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1716417163%2Fdocs-assets%2Fstatic%2Fdocs%2Fworkflow-collaboration%2Ffeature-flags%2Fflags-in-web-analytics-dark.png&w=3840&q=75)
Vercel Web Analytics can look up the values of evaluated feature flags in the DOM. It can then enrich page views and client-side events with these feature flags.
To share your feature flags with Web Analytics you have to emit your feature flag values to the DOM as described in Supporting Feature Flags.
This will automatically annotate all page views and client-side events with your feature flags.
Client-side events in Web Analytics will now automatically respect your flags and attach those to custom events.
To manually overwrite the tracked flags for a specific
track
event, call:component.tsimport { track } from '@vercel/analytics'; track('My Event', {}, { flags: ['summer-sale'] });
If the flag values on the client are encrypted, the entire encrypted string becomes part of the event payload. This can lead to the event getting reported without any flags when the encrypted string exceeds size limits.
To track feature flags in server-side events:
-
First, report the feature flag value using
reportValue
to make the flag show up in Runtime Logs:app/api/test/route.tsimport { reportValue } from '@vercel/flags'; // force dynamic mode so the flag actually gets reported, // otherwise the route would be static export const dynamic = 'force-dynamic'; export async function GET() { reportValue('summer-sale', false); return Response.json({ ok: true }); }
-
Once reported, any calls to
track
can look up the feature flag while handling a specific request:app/api/test/route.tsimport { track } from '@vercel/analytics/server'; import { reportValue } from '@vercel/flags'; // force dynamic mode so the flag actually gets reported, // otherwise the route would be static export const dynamic = 'force-dynamic'; export async function GET() { reportValue('summer-sale', false); track('My Event', {}, { flags: ['summer-sale'] }); return Response.json({ ok: true }); }
If you are using an implementation of the Feature Flags
Pattern you
don't need to call reportValue
. The respective implementation will
automatically call reportValue
for you.
Was this helpful?