How to install Google Tag Manager on your website
Step-by-step guide to getting GTM live on React/Vite, Next.js or standard HTML — without bloated npm packages or a developer.
Once you've generated your custom GTM container, the next crucial step is making sure your website actually loads Google Tag Manager. Without the script live on your site, none of your conversion tags, financial values, or your new Consent Mode v2 cookie banner will fire.
Here is the exact step-by-step guide to getting connected — whether you run a modern React/Vite architecture, Next.js, or a classic HTML page.
Method A: If you are running React / Vite
If you are using React or Vite, the GTM code must be placed directly inside your static HTML template file. You do not need to install extra, bloated npm packages like `react-gtm-module`.
Open the file `/index.html` in your project root:
- Paste the GTM script snippet as high up as possible before the closing `</head>` tag.
- Paste the GTM `noscript` snippet immediately after the opening `<body>` tag.
“Never inject the GTM code block inside App.tsx, main.tsx or standard React components. Tag Navigator pre-configures all internal script variables for you.”
Method B: If you are running Next.js
If you are building with Next.js, always leverage the native `next/script` component to ensure optimal performance and proper code-loading order.
App Router
Insert the code into your root layout file: `/app/layout.tsx`.
Pages Router
Insert the code into your document layout: `/pages/_document.tsx`.
Important: Avoid placing the GTM scripts inside deeply nested React client components — it can break your dataLayer history across state re-renders.
Method C: If you are running standard HTML / traditional CMS
If you host a static landing page or use a legacy CMS, the GTM scripts must be placed directly into the raw source HTML of every page you want to track.
Paste the script as high up in your `<head>` tag as possible, and don't forget the `noscript` iframe right after `<body>`. Tag Navigator outputs the finished snippet with your own container ID pre-filled.
Verification: testing your implementation
Once the code has been deployed live, verify that the connection is active:
- Log into your Google Tag Manager account.
- Click the blue Preview button in the top right corner.
- Enter your website URL (e.g. `https://your-website.com`).
- If Google Tag Assistant opens in a new tab and states Connected, your installation is successful.
