TrackingHistoryChange.mp4

How to get your GTM GA4 working correctly with a nextjs site. 

# 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](/blog/seo-checklist) 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.
![History change trigger turn on](https://s3.us-east-1.wasabisys.com/cdn.fruition.net/history_change_trigger_f7b674eb87.png)


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".
   
![Tag Manager Preview Button](https://cdn.fruition.net/tag_manager_preview_fbf56a9ec9.png)

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.

![GA4 Real Time](https://cdn.fruition.net/real_time_ga4_937e6df100.png)


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](https://s3.us-east-1.wasabisys.com/cdn.fruition.net/Tracking_History_Change_b287a4f894.mp4)


Problem: We switched to a next.js frontend for our new site and now our Google Analytics GA4 isn't working.  Solution: Turn on history. 

Strategy & Research

Digital Marketing

Web Development

Creative

AI Data & Analytics

Google Tag Manager Setup for a Nextjs Site for Google Analytics

Brad Anderson

Related Articles

Successful Event Planning: 5 Crucial Steps for a Buzz-Worthy Gathering

Ben Smith

5 Best Photoshop Extensions for Enhanced UX/UI Design Productivity

Ben Smith

A Comprehensive Guide to ADA Compliance & Website Accessibility

Tony Diaz

Enhance Mobile Traffic & User Involvement | Web Design Improvement Guide

Ari Scott

Discover 2023's Top 10 Webfonts for Unbeatable Legibility & Style

Ben Smith

Accessibility Requirements for Government Entities Explained

Christy Anderson

Google Tag Manager Setup for a Nextjs Site for Google Analytics

Brad Anderson

Respond to Unruh Act Violation Notice: California Civil Rights and Web Accessibility Guide

Tony Diaz

A Step-by-Step Guide to WordPress Website Maintenance

Mike Archuleta

From Outdated to Optimized: 8 Signs Your Website Needs a Refresh

Sallie Wright Serene