How to Track SaaS Blog Signup Clicks in Vercel

Check that the site can collect custom events

Vercel’s custom-event documentation says custom events require a Pro or Enterprise plan and @vercel/analytics version 1.1.0 or later. Check the project’s plan and installed package version before changing the button. Web Analytics must also be enabled for the Vercel project.

For a Next.js App Router site, Vercel’s setup guide installs @vercel/analytics, imports Analytics from @vercel/analytics/next, renders <Analytics /> in the root layout, and deploys the app. If the site already collects Web Analytics data, confirm that setup rather than adding a second integration. The example below assumes this is a Next.js site with an existing signup form on the blog page.

Add the event to the blog signup button

Vercel documents calling track() in a client-side button handler, with an event name as its first argument and optional custom data as its second. Give the event a click-specific name: Signup would be easy to mistake for a completed account creation. A string-valued blogPage property lets you identify the page when you inspect the event.

Here is a hypothetical button for /blog/onboarding-guide. The example assumes that page already contains a signup form with id="signup-form"; clicking the button records the event and scrolls to that form. Add the client component to the blog page: 'use client'; import { track } from '@vercel/analytics'; export function BlogSignupButton() { return <button type="button" onClick={() => { track('Blog signup click', { blogPage: '/blog/onboarding-guide' }); document.getElementById('signup-form')?.scrollIntoView(); }}>Sign up</button>; }

If you reuse the component on other posts, supply each post’s path instead of leaving the example path hard-coded. Keep the button’s real signup action intact: this event belongs at the click, while successful account creation needs a separate signal.

Test the deployed button in Vercel

Deploy the button change before testing the public page. Vercel’s Web Analytics view lets you choose a timeframe and environment; its Events panel lists event names, and selecting one shows details organized by custom data properties. Use the environment that contains the deployment you actually clicked.

• Open the deployed /blog/onboarding-guide page and click **Sign up**. Check that it still takes the reader to the intended signup form. Note the test time and deployment environment.
• In the Vercel dashboard, select the project and open **Analytics**. Choose the matching environment and a timeframe that includes your test click, then find Blog signup click in the **Events** panel.
• Select the event and check its custom data for blogPage: '/blog/onboarding-guide'. Seeing the right name and path confirms that this deployed button produced a recorded event.

Read clicks as interest, not completed signups

A recorded Blog signup click means the button handler ran and the event was collected. It does not tell you whether the visitor completed the form, passed validation, or created an account. If completed signups are the question, instrument that successful outcome separately. Vercel documents server-side custom events in API routes or server actions for actions such as a successful signup; emit such an event only after your application confirms success.

Keep test clicks out of any interpretation of real demand, and compare blog pages using the same event definition. A post with more recorded clicks may be worth investigating, but the click count alone cannot explain why readers chose the button or what happened afterward.

Ranks’ product reference describes connected Vercel reporting for visitors, traffic sources, and top pages. Inspect this custom event in Vercel rather than assuming it appears in the Ranks overview. For the separate task of reviewing search exposure alongside page visits, use Validate SaaS SEO With Search Console and Vercel.