Install on a custom / headless site

If your site isn't on Shopify, WordPress, BigCommerce, or Webflow, you just paste raw HTML snippets into your top-level layout. Works for anything: Next.js, Astro, Hugo, Jekyll, hand-rolled HTML, Squarespace, Wix, headless storefronts — anywhere you control the <head>.

What you need to paste

The wizard's Generic Code tab gives you two snippets:

Head snippet — paste as high in <head> as possible
Body snippet — paste immediately after the opening <body> tag

Framework-specific guidance

Next.js (App Router)

Add the head snippet via the Script component in your app/layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script id="gtm" strategy="afterInteractive">
          {`(function(w,d,s,l,i)...`}
        </Script>
      </head>
      <body>
        <noscript>
          <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
            height="0" width="0" style={{display:'none',visibility:'hidden'}} />
        </noscript>
        {children}
      </body>
    </html>
  )
}

Next.js (Pages Router)

Use pages/_document.tsx instead — put GTM in the Head component and the noscript inside the document'sBody component (custom _document pattern).

Astro

Add the head snippet to your base layout's <head> slot, and the noscript to the layout's body. Astro's slot system passes both through correctly.

Hugo / Jekyll / static site generators

Edit your base template (baseof.html for Hugo, _layouts/default.html for Jekyll). Paste the snippets in their corresponding positions. Rebuild + redeploy.

Squarespace

Settings → Advanced → Code Injection. Paste:

The head snippet into Header
The noscript snippet into Footer

Squarespace prepends/appends correctly, even though the field is called "Footer".

Wix

Settings → Custom Code → Add Custom Code:

Code type: HTML / Script
Place code in: Head
Apply to: All pages

Wix requires a paid plan for site-wide custom code.

Headless commerce / app embed blocks

For headless storefronts (Shopify Hydrogen, headless WooCommerce, etc.), treat your headless app as a custom site — paste the snippets in your framework's root layout. The original platform's built-in events (Shopify Customer Events Pixel, WooCommerce GTM4WP, etc.) won't apply since you've detached from the rendered storefront.

Verify the install

Visit your site in an incognito window
Open browser DevTools → Network tab
Filter by gtm.js — should load 200
Filter by collect — once GA4 fires, this network request appears
Or use the official Tag Assistant browser extension — connects to GTM Preview mode

Pre-built event templates

The Custom / Other platform gets none of the platform-specific templates. You build your own event set in the wizard's Custom Events step, or pick from generic pixel templates if you're running ads:

generic:meta:view_content
generic:meta:add_to_cart
generic:meta:initiate_checkout
generic:meta:purchase
generic:meta:lead
generic:google_ads:conversion
generic:google_ads:purchase
generic:tiktok:complete_payment

DataLayer pushes from your code

For any custom event (a cart action, a sign-up, anything), push to the dataLayer from your JS:

window.dataLayer = window.dataLayer || []
window.dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'USD',
    value: 29.99,
    items: [{ item_id: 'SKU-123', item_name: 'My Product', price: 29.99, quantity: 1 }]
  }
})

TagEasy's GTM tags are pre-configured to listen for these standard event names. Match what we declare in your VisualEvent rows and the right tags fire.