Google Tag Manager (GTM) is a powerful tool used by marketers and website administrators to manage and deploy various tags on their websites without having to manually edit the website code each time. Tags are snippets of code or tracking pixels that are added to a website to collect data and send it to third-party tools, such as analytics platforms, advertising networks, or marketing automation systems.

Integrating Google Tag Manager (GTM) into a Next.js project involves adding components which can be imported from the @next/third-parties library developed by Vercel.

Install next/third-parties library

We will need to install the next/third-parties library, which offers a collection of components within which we can find the Google Tag Manager component.

npm i @next/third-parties

Import Google Tag Manager

After successfully downloading the library, we can go ahead and import the GTM component, this needs to be done in the app/layout.tsx file.

import { GoogleTagManager } from '@next/third-parties/google'

Get your GTM ID

If your GTM account is already created, you should be able to see this dashboard:

Here we can find the GTM ID on the top right side of the dashboard, for this tutorial I have created a test account. As you can see my ID is GTM-MXXNKV2B, copy the ID, and since this is not the only information, we need from the Tag Manager dashboard, we need to go to Admin.