Using with Vercel Analytics API

[anaclumos]

Has anyone tried using Vercel Analytics with Docusaurus?

To use Vercel Analytics API, it seems like we need to embed a TS/JS code that will always run on page load; where would a suitable location in Docusaurus be? Also, it should be a position where the document is defined.

Any recommendations?

Below is an example of using Vercel Analytics with a simple React App. Unfortunately, I couldn't find the equivalent of Docusaurus — maybe it involves touching the docusaurus/core, but it seems that is untouchable (no swizzling or modification whatsoever.)

[slorber]

@anaclumos the good news is my own website https://thisweekinreact.com/ is on Vercel and I plan to add it for myself :)

I guess it could be possible to build a Vercel plugin that declares a client module:

https://docusaurus.io/docs/advanced/client#client-modules
https://docusaurus.io/docs/api/plugin-methods/lifecycle-apis#getClientModules

import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';

if (ExecutionEnvironment.canUseDOM) {
  reportWebVitals()
}

Not sure it's the correct place to report though, this would likely run before React hydrates. May be better to report in onRouteUpdate the first time it runs

Let me know if that works for you. We officially support/document Vercel/Netlify in core in an opinionated way so it could make sense to have an official Vercel plugin

[anaclumos]

Ok. I'd like to start working on this and want to contribute. How's the process in this case? Open up a GitHub issue?

[slorber]

I'd suggest building this on your own repo first so that the community can use it. If proven successful we could migrate it to Docusaurus core later. I'm not sure we'll want to do that and will have to decide with other stakeholders. We may have a Docusaurus org someday for non-core plugins that we commit to maintain. Generally the core packages are what we use officially on the Docusaurus website, which is not currently hosted on Vercel but Netlify