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 Version 1.3, updated November 4, 2026

On this page

What you will learn

  • Create a GTM account and a web container for your site.
  • Install the container with Better Loader's snippets or Google's head and noscript snippets.
  • 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 (and the Data Processing Terms, if you are in the EEA or UK).

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

You can load the container in two ways. Each uses two snippets: one in the <head> and a fallback right after the opening <body> tag. Pick one way and use only its snippets, or GTM loads twice.

Which snippets do you install?

Use this when your website has a container on SGTM.space. Better Loader loads GTM from your own load domain, such as load.k7q2x.example.com, under a random script name instead of from googletagmanager.com, so ad blockers stop it less often. It is on every plan, the free one included, and works before your server container is set up.

  1. 1 Create a container for your website on SGTM.space, as lesson 2 shows: enter this web container's ID (GTM-XXXXXXX) and keep Turn on Better Loader for GTM-XXXXXXX ticked. Connecting the server container can wait. For a container you already have, enter the ID on the Better Loader card of its Add-ons tab and click Enable.
  2. 2
    On the DNS tab, add the CNAME for the load domain where your DNS is managed (DNS only on Cloudflare) and click Check DNS. The HTTPS certificate follows within a few minutes.
    Type
    CNAME
    Name
    load.k7q2x
    Value
    eu.sgtm.space
    Proxy
    DNS only
  3. 3 Open Settings on the Better Loader card. Its Install snippet and Noscript fallback look like the two below, with your own load domain and script name.

Paste the Install 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 data-cfasync="false">(function(w,d,s,l){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);j.async=true;j.src="https://load.k7q2x.example.com/h3k9x2mq7tbp.js";f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer');</script>
<!-- End Google Tag Manager -->

Paste the Noscript fallback 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://load.k7q2x.example.com/ns.html"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  • These two replace both of Google's snippets. Remove Google's snippet if your site has it.
  • Neither snippet contains a GTM- ID: Better Loader knows your container by its script name. A CMS field that only accepts a GTM ID cannot install them, so paste them into your theme or layout instead.
  • Paste them only once the load domain is live. Until its DNS record resolves, GTM does not load on your site.
  • The Install snippet carries data-cfasync="false": it keeps Cloudflare Rocket Loader from delaying GTM and is harmless elsewhere. If your consent default script sits above it, give that one the same attribute.

Put the snippets in a shared layout or theme file so they appear on every page, not only the home page.

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.

JavaScript 
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 loads the right container: the ID in Google's snippet, or the Web GTM container ID on the Better Loader card. 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: Better Loader's, or Google's with your own GTM- ID, never both.
  • 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.

Should I use Better Loader or Google's snippet?

Use Better Loader once your website has a container on SGTM.space: it is on every plan, the free one included, and loads GTM from your own domain, so ad blockers stop it less often. Use Google's snippet until then. Switching later only means replacing both snippets; your GTM container and its tags stay the same.

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