Google Tag Manager Setup for a Nextjs Site for Google Analytics

• TL/DR: Turn on History in GTM (it's that simple) :).

As more websites are transitioning from a standard html/css frontend to a headless or nextjs build we see one common configuration problem pop up - how to correctly configure Google Tag Manager ("GTM") with Google Analytics 4 ("GA4"). It's a simple fix just turn on Change History in GTM triggers. There's more detailed info on what the actual change is and how to check it.

Add this Step to Your Checklist

At Fruition, we’re big on checklists especially when you need to work across skill sets for example the developer to data analyst handoff. Here's one step that is critical in your post nextjs site launch to ensure that your GA4 is working properly when transitioning from an html/css site to one using nextjs.

Here's Why GA4 Isn't Working Right on Your Nextjs Website

In order to accurately track user navigation in React applications, it's important to understand that traditional tracking scripts may not work effectively. This is primarily because navigation within these apps doesn't trigger a full page reload; instead, the browser history is simply updated to reflect the new URL. This can give the illusion of users only visiting one page and then leaving, which is misleading for SEO and CRO analysis.

Three are Two Solutions to your Nextjs GTM GA4 Tracking

Here are two more obvious methods to fix this problem:

1. Manual Triggering with NextJS Router: This workaround involves invoking lower-level methods on the NextJS router manually. You would need to trigger script events every time a route change completes. This requires a deep understanding of the NextJS router and is not the most straightforward solution.

2. Utilize the "History Change" Trigger: The preferred and easier method is to work with your SEO team and ask them to include the "History Change" trigger to the tags they want to track on every page. This ensures all route changes within your Single Page Application (SPA) are registered, providing a more accurate reflection of user navigation and engagement.
   

By following these steps, you can ensure a more accurate tracking of user behavior on your React application, leading to more accurate analytics.

Verifying the Correct Installation of the Google Analytics Tag

Once you've set up the tracking, it's important to verify that your Google Analytics tag has been installed correctly through Google Tag Manager. Here's how:

1. Enable Google Tag Manager Preview Mode: Log in to your Google Tag Manager account, navigate to your website's container, and click on "Preview" to enable "Preview Mode".

2. Visit Your Website: Open your website in a new tab. A debug pane should appear at the bottom of the page indicating the tags that have fired on that page.

3. Check the Google Analytics Tag: Ensure that your Google Analytics tag is listed among the fired tags and click on it to see more details.

4. Navigate to Different Pages: Visit different pages on your website to verify that the Google Analytics tag fires as expected on each page. See Video Below.

5. Check Real-time Reports in Google Analytics: Log in to your Google Analytics account, navigate to "Real-time" > "Overview", then visit your website and perform some actions. Check if these actions are reflected in the real-time reports.

By following these steps, you can confirm that your Google Analytics tag is installed correctly and functioning as expected. This ensures that your post-Nextjs site launch tracking is correctly set up for accurate SEO analysis.

If you're successful this is what the tag preview should look like when you're navigating your preview site. Note the history changes as the navigation happens.

TrackingHistoryChange.mp4