Gtm Skill

owgit
1

Claude Code skill: Install & configure Google Tag Manager on any website. Supports Next.js, React, Vue, Svelte, Astro, and more.

Download

/gtm — Google Tag Manager Skill for Claude Code

A Claude Code skill that installs Google Tag Manager on any website in seconds — no GTM experience needed.

What it does

Type /gtm in Claude Code and it will:

Detect your framework (Next.js, React, Vue, Svelte, Astro, and more)
Install GTM the right way for your stack
Set up GA4 page view tracking (optional)
Add click tracking on buttons and links you choose (optional)
Generate a ready-to-import GTM container file — upload it to Google Tag Manager and you're done

No need to manually create tags, triggers, or variables in the GTM interface.

Supported frameworks

Framework	Method
Next.js (App Router)	`@next/third-parties/google`
Next.js (Pages Router)	`@next/third-parties` or `_document.tsx`
React (Vite / CRA)	`index.html` snippet
Vue (Vite)	`index.html` snippet
Nuxt 3	Client plugin or `useHead`
SvelteKit	`app.html` snippet
Svelte (Vite)	`index.html` snippet
Astro	Layout component with `is:inline`
Remix	`root.tsx`
Gatsby	`gatsby-plugin-google-tagmanager`
Angular	`index.html` snippet
WordPress (PHP)	`header.php`
Plain HTML	Standard GTM snippet

Install

Claude Code (CLI)

claude skill install --file path/to/gtm-skill

Or if published as a .skill file:

claude skill install gtm.skill

Manual

Copy the gtm-skill folder into your Claude Code skills directory.

Usage

Open Claude Code in your project and type:

/gtm

Or just describe what you need:

"Add Google Tag Manager to my site, GTM-ABC1234"

"I want to track which CTA buttons people click"

"Set up GA4 analytics with GTM"

Standalone script

You can also use the container generator script directly, without the skill:

node scripts/generate-gtm-import.js \
  --gtm-id "GTM-XXXXXXX" \
  --ga4-id "G-XXXXXXXXXX" \
  --events '[{"action":"cta_click","css_selector":"[data-gtm-action=\"cta_click\"]","trigger_type":"LINK_CLICK"}]' \
  --output gtm-import.json

This creates a JSON file you can import directly into Google Tag Manager:

Go to tagmanager.google.com
Admin > Import Container
Upload the file
Merge > Overwrite conflicting
Submit to publish

Project structure

gtm-skill/
├── SKILL.md                              # Skill instructions (the brain)
├── README.md                             # You are here
├── LICENSE                               # MIT
├── references/
│   ├── gtm-container-format.md           # GTM JSON import format reference
│   └── framework-guides.md               # Per-framework installation guides
└── scripts/
    └── generate-gtm-import.js            # Container import file generator

How the GTM import file works

Google Tag Manager lets you export and import container configurations as JSON files. This skill generates import files with:

GA4 Configuration tag — tracks page views automatically
GA4 Event tags — tracks custom events (like button clicks)
Triggers — fires tags when specific elements are clicked
Variables — reads data from HTML attributes (like data-gtm-label)

The import file uses placeholder account/container IDs ("0") — GTM replaces these with your real IDs when you import.

Click tracking pattern

The skill uses HTML data attributes to mark trackable elements:

<a href="/book" data-gtm-action="cta_click" data-gtm-label="hero">
  Book now
</a>

data-gtm-action — the event name sent to GA4
data-gtm-label — where on the site this element is (for analysis)

In GA4, you'll see events like:

Event: cta_click
Label: hero
Page: /
Click text: Book now

Contributing

PRs welcome! If you find a framework that needs a different installation method, or if the GTM import format changes, please open an issue or PR.

License

MIT

Top categories