Has anyone successfully integrated Google Analytics 4 (gtag) in a NextJS 13 app directory? In my previous Vanilla JS / EJS applications, I simply added the following code to each page. My understanding is that this code sends a page_view event to Google Analytics on each page initialization.
<script> src={`https://www.googletagmanager.com/gtag/js?id=GAID`} <script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GAID', {foo: bar}); // Where bar is a variable depending on the page
</script>
I have come across similar blogs online, but none of them mention implementing a variable in the config. I have tried different approaches without success:
Prior to these attempts, I had already applied in next/script
- Putting this code in layout.tsx
- Putting this code in template.tsx
- Putting this code in page.tsx
- Putting this code in the first client-side component of each page
- Integrating gtag('js') and gtag('config') into one function like so, and calling window.configGA(bar) on the above pages
<script> src={`https://www.googletagmanager.com/gtag/js?id=GAID`} <script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
function configGA(bar) {
gtag('js', new Date());
gtag('config', 'GAID', {foo: bar}); // Where bar is a variable depending on the page
}
</script>
However, all of these attempts only yield the same result: {foo: bar}, where bar remains constant unless the page is reloaded. For example, when I visit the home page for the first time, the page_view event has bar1. Navigating to page A still shows bar1. This persists across all pages until a reload occurs.
I have seen suggestions of using next/router for a workaround, but NextJS 13 does not include next/router, leaving me stuck. Can someone explain why this is happening?