Skip to content
sGTM.space

Install Google Tag Manager on your website (web container)

Google Tag Manager (GTM) lets you add and change tracking tags without editing your site code for every change. You install one small snippet once, and from then on GA4, ads pixels and other tags are managed in the GTM interface. In this lesson you create the web container, install it, send your first custom event and publish a version. Every later lesson builds on this container.

Beginner 8 min read

What you will learn

  • Create a GTM account and a web container for your site.
  • Install the head snippet and the body noscript snippet correctly.
  • Push a custom event to the dataLayer and see it in Preview mode.
  • Submit and publish a container version, and know what workspaces and versions are for.

Before you start

  • A Google account.
  • Access to your website template or CMS so you can add code to every page.

01 Create the account and web container

One GTM account usually matches one company. Inside it you create a container per website (and later a separate server container, which lesson 2 covers).

  1. 1 Open tagmanager.google.com and click Create Account.
  2. 2 Enter an Account Name (your company) and your Country.
  3. 3 Under Container Setup, enter your domain as the Container name, for example www.example.com.
  4. 4 Choose Web as the Target platform and click Create.
  5. 5 Accept the Google Tag Manager Terms of Service.

GTM then shows the Install Google Tag Manager dialog with two snippets. Your container ID has the form GTM-XXXXXXX and appears in both.

02 Paste the two snippets

Paste the first snippet as high in the <head> of every page as possible. It loads GTM asynchronously, so it does not block rendering.

html 
<!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Paste the second snippet immediately after the opening <body> tag. It is a fallback for browsers with JavaScript turned off.

html 
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  • Use your own container ID in both snippets, not GTM-XXXXXXX.
  • Put the snippets in a shared layout or theme file so they appear on every page, not only the home page.
  • Many CMSs (WordPress plugins, Shopify, Webflow) have a field for the GTM ID. Use either the field or the snippets, never both, or GTM loads twice.

03 Send your first custom event through the dataLayer

The dataLayer is a JavaScript array that your site and GTM share. Your code pushes objects into it, and GTM reacts to them. An object with an event key becomes an event that triggers can listen to; the other keys become values you can read with Data Layer Variables.

js 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'sign_up',
  method: 'email'
});

Run this code when the action happens, for example after a successful sign-up. To use it in GTM:

  1. 1 Go to Triggers, click New and choose Custom Event.
  2. 2 Set Event name to sign_up (it must match exactly, including case) and save.
  3. 3 Go to Variables, under User-Defined Variables click New, choose Data Layer Variable and set Data Layer Variable Name to method.

04 Test in Preview mode

Preview mode shows exactly what GTM sees on your site before anything goes live.

  1. 1 Click Preview in the top right of the workspace. Tag Assistant opens in a new tab.
  2. 2 Enter your site URL and click Connect. Your site opens in another window with a Tag Assistant badge.
  3. 3 Go back to the Tag Assistant tab. On the left you see events such as Consent Initialization, Initialization, Container Loaded, DOM Ready and Window Loaded.
  4. 4 Trigger the sign-up on your site. A sign_up event appears; click it and open the Data Layer tab to see method: email.

If Tag Assistant cannot connect, check that the snippet is on the page and uses the right container ID. The debugging lesson lists more causes.

05 Submit and publish a version

Nothing you change in GTM reaches visitors until you publish it.

  1. 1 Click Submit in the top right.
  2. 2 Keep Publish and Create Version selected.
  3. 3 Enter a Version name and Version description that say what changed, for example Add sign_up trigger.
  4. 4 Click Publish.
  • Workspaces are drafts. Each one holds unpublished changes, so two people can work without overwriting each other. The free GTM plan allows three workspaces per container.
  • Versions are snapshots of the container at publish time. Under Versions you can see who published what and publish an older version again to roll back.
  • Both snippets are on every page with your own GTM- ID.
  • Tag Assistant connects to your site.
  • The sign_up event shows up in Preview with its method value.
  • The first version is published with a clear name.

Frequently asked questions

Does the web container replace my GA4 code?

It can. Instead of pasting the GA4 snippet directly, you add a Google tag inside GTM. Lesson 3 does this and sends the data through your server container. Remove any hard-coded GA4 snippet once GTM sends the same data, or you count everything twice.

Why do I need the noscript snippet?

It only runs when JavaScript is turned off, which is rare. Google still recommends it, and it does no harm, so install it.

I published but my change does not show on the site. Why?

Check that you published the workspace that contains the change, then hard-refresh the page. Page caches and CDNs can also serve an old HTML page, but the GTM file itself updates within minutes.

Ready to put it into practice?

Deploy a server GTM container on your own domain in a few minutes. The Free plan needs no card.

Create a free account