Analytics PoC with GTM + GA4

This is a Next.js project bootstrapped with c3.

This playground demonstrates how to track custom events in a Next.js project using Google Tag Manager (GTM). For more details, please refer to this RFC.

Pre-requisites

1. Node.js >= 18

Getting Started

1. First, install the dependencies:

   pnpm i

2. Then, run the development server:

   pnpm dev

3. Open http://localhost:3000 with your browser to see the result.

4. Refer to this document on how to debug a GTM tag and GA4 event.

5. Done. Happy debugging!

Available routes

A tenant_ready event which contains tenant_id as one of the user_properties will be tracked when the web app first loads.

1. / - homepage, tracks home_load event
2. /about - About page, tracks about_load event
3. /error - Error page, does not track any custom event
4. /other - Other page, tracks other_load event
5. /other/[id] - Other by ID page, which is a carousel in the middle of the Other page that displays a list of links to other pages by ID, tracks other_id_load event

Resources

1. GA4 DebugView - website
2. GTM workspace - website
3. Cloudflare dashboard - website