Next.js
Google Tag Manager

Integrate your Next.js site with Google Tag Manager

Don’t go through the pain of direct integration. RudderStack’s JavaScript SDK makes it easy to send data from your Next.js site to Google Tag Manager and all of your other cloud tools.

Easy Next.js to Google Tag Manager Integration with RudderStack

RudderStack’s open source JavaScript SDK allows you to integrate RudderStack with your Next.js site to track event data and automatically send it to Google Tag Manager. With the RudderStack JavaScript SDK, you do not have to worry about having to learn, test, implement or deal with changes in a new API and multiple endpoints every time someone asks for a new integration.

Popular ways to use Google Tag Manager and RudderStack

Simplify integration

Simplify instrumentation by sending existing data variables to Google Tag Manager

Write less code

Easily deploy third party scripts through a single RudderStack SDK

Make your site faster

Significantly improve site speed by replacing Google Tag Manager with RudderStack

Frequently Asked Questions

With Rudderstack, integration between Next.js and Google Tag Manager is simple. Set up a Next.js source and start sending data.

Pricing Next.js and Google Tag Manager can vary based on the way they charge. Check out our pricing page for more info. Or give us a try for FREE.

Timing can vary based on your tech stack and the complexity of your data needs for Next.js and Google Tag Manager.

In order to add GTM to your website, you need to first get a Container ID (GTM-XXXXXX) from Google Tag Manager dashboard. And then on every page of the website, add two scripts, one in <head> and one in <body>.

Code snippet for Google Tag Manager under <head> tag

<!-- Google Tag Manager -->

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-XXXXXX');</script>

<!-- End Google Tag Manager →

Code snippet for Google Tag Manager under <body> tag

<!-- Google Tag Manager (noscript) -->

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"

height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<!-- End Google Tag Manager (noscript) -->

As mentioned in the integration guide docs, first integrate RudderStack with your Next.js website by adding two scripts and then configure Google Tag Manager as a destination in RudderStack Dashboard

Yes, RudderStack streamlines the integration and management of your connection between Next.js & Google Tag Manager, but you check out our guide on How To Send Data From Your Next JS Site to Google BigQuery to learn how to connect the tools manually.

Use the Google Tag Manager integration with other popular sources

About Google Tag Manager

Google Tag Manager is a popular tag management system that allows you to quickly update tags for your web or mobile applications. Once added to your project, it makes it easier for you to configure, deploy, and measure your tags from a web-based UI without needing additional code. RudderStack enables you to send events, including tracking pageviews, to the GTM dataLayer using the JavaScript SDK.

About Next.js

Next.js is a JavaScript-based web development framework that enables businesses to build server-side rendered React applications with ease.