[Feature Request] An easier to use, and easier to configure solution for first-party cookie tracking w/ Next.js

[grempe]

Describe the feature you'd like to request

I have created an alternative implementation of the GDPR first-party tracker script meant for use in Next.js apps.

I'd like you to consider incorporating this into your repo and suggesting this as the primary way to host such a setup on Vercel/Next.js as I think its both easier to understand and easier to setup than the current middleware code.

Benefits

• No separate middleware needs to be published
• No sub-domain needs to exist. This event proxy is just an pages/api/tracking path on your application.
• Does not expose your Tinybird tracker authentication token to the public.
• More robust code, implemented in Typescript
• Does runtime checks for required fields in the event body, skipping call to Tinybird if not the right shape.
• Will not allow passthrough of additional fields (junk)

Here is the code. Setup is as simple as adding one file to your pages/api dir, adding the snippet with the data-proxy attribute, and adding two environment variables. This may be able to be reduced to a single env var if someone knows how to get access to the URL origin within the _document.tsx file. The script tag, using the next/script API might also be able to be placed somewhere else where it has more direct access to the request object.

Requested change

One thing that I think should change in the flock.js script is this handling of a proxy if one is configured.

https://github.com/tinybirdco/web-analytics-starter-kit/blob/main/middleware/src/index.js#L82

You can see that it makes assumptions about the path to the tracking proxy:

url = `${proxy}/api/tracking`;

So I'd have to define the proxy to something like https://myhost.example.com.

You should instead allow the user to path the complete path in the data-proxy attribute. Such as:

https://myhost.example.com/api/mycustomproxy

Let me know what you think. I have this live on my own sites now.

The Code

https://gist.github.com/grempe/a402b64f360d5c2447cf35a0a74329a2

Describe the solution you'd like

An easier to use, and easier to configure solution for setting up first-party cookie tracking.

Describe alternatives you've considered

I derived this from your own current middleware solution that requires deployment of a new app and domain changes to point to it.

[alejandromav]

Hi @grempe, thanks a lot for this!

This approach is definitely better for a Next.js application, but bear in mind that what we're trying to achieve here is providing a simple way to integrate the tracking script in any web application, regardless of the framework.

That's the reason why we prefer to maintain a simple script, framework agnostic, that people can inject by simply adding a <script> tag. Even if that approach has some limitations or tradeoffs.

I encourage you to open a discussion explaining this as a tutorial, so people using Next.js can use this approach if they prefer. I'll link to that in the README afterwards.

If you don't have the time, I can do it for you.

Thanks! 🙌

[grempe]

I totally get that. I think this solution is the preferred solution though if you are using Next.js. The published middleware is the best fallback if you are using another framework. Neither is needed if you don't want the enhanced GDPR support for first-party cookies.

I'll prepare a pull request to provide this as an alternative solution if your tracked app is already using Next.js. Leaving the existing middleware solution in place as the next best alternative if you are not.

[grempe]

I've published this to its own sample repo with instructions. I'll open a discussion.

https://github.com/grempe/nextjs-tinybird-example

[grempe]

Discussion can be found here:

#35