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.

CategoryTag ManagersType
Event Stream
arrow-right
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

FAQs

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

Do more with integration combinations

RudderStack empowers you to work with all of your data sources and destinations inside of a single app