@jwiedeman/gtm-kit-cli
v1.1.6
Published
CLI tool for easy GTM Kit setup - auto-detects your framework and installs everything you need.
Maintainers
jwiedemanReadme
@jwiedeman/gtm-kit-cli
Zero-config GTM Kit setup. Auto-detects your framework. Installs everything you need.
The CLI tool for GTM Kit - get up and running in under 60 seconds.
Quick Start
npx @jwiedeman/gtm-kit-cli initThat's it. The CLI will:
- Detect your framework (React, Vue, Next.js, Nuxt, etc.)
- Detect your package manager (npm, yarn, pnpm, bun)
- Install the right packages
- Generate setup code for your project
- Optionally configure Consent Mode v2
Commands
init - Interactive Setup
npx @jwiedeman/gtm-kit-cli initWalks you through the complete setup with prompts for:
- GTM container ID
- Consent Mode v2 configuration
- File locations
init <GTM-ID> - Quick Setup
npx @jwiedeman/gtm-kit-cli init GTM-XXXXXXSkip the prompts if you already know your GTM ID.
detect - Framework Detection
npx @jwiedeman/gtm-kit-cli detectShows what framework and package manager the CLI detected.
validate <GTM-ID> - ID Validation
npx @jwiedeman/gtm-kit-cli validate GTM-XXXXXXValidates a GTM container ID format.
generate <GTM-ID> - Code Generation
npx @jwiedeman/gtm-kit-cli generate GTM-XXXXXXGenerates setup code without installing packages.
Supported Frameworks
| Framework | Detection | Priority |
| --------- | ----------------------- | -------- |
| Nuxt 3 | nuxt.config.ts/js | Highest |
| Next.js | next.config.ts/js/mjs | High |
| Vue 3 | vue in dependencies | Medium |
| React | react in dependencies | Low |
| Vanilla | Default fallback | Lowest |
The CLI uses priority order because some projects have multiple frameworks (e.g., Next.js includes React).
Package Manager Detection
The CLI automatically detects your package manager:
| Package Manager | Detection |
| --------------- | ---------------- |
| pnpm | pnpm-lock.yaml |
| yarn | yarn.lock |
| bun | bun.lockb |
| npm | Default fallback |
Generated Code Examples
React
// src/gtm.tsx (generated)
import { GtmProvider } from '@jwiedeman/gtm-kit-react';
export function GtmWrapper({ children }) {
return <GtmProvider config={{ containers: 'GTM-XXXXXX' }}>{children}</GtmProvider>;
}Vue
// src/plugins/gtm.ts (generated)
import { GtmPlugin } from '@jwiedeman/gtm-kit-vue';
export function setupGtm(app) {
app.use(GtmPlugin, { containers: 'GTM-XXXXXX' });
}Next.js
// app/layout.tsx additions (generated)
import { GtmHeadScript, GtmNoScript } from '@jwiedeman/gtm-kit-next';
// Add to <head>: <GtmHeadScript containers="GTM-XXXXXX" />
// Add to <body>: <GtmNoScript containers="GTM-XXXXXX" />Nuxt
// plugins/gtm.client.ts (generated)
import { GtmPlugin } from '@jwiedeman/gtm-kit-nuxt';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(GtmPlugin, { containers: 'GTM-XXXXXX' });
});Options
--dry-run
Preview what would happen without making changes.
npx @jwiedeman/gtm-kit-cli init --dry-run--typescript / --no-typescript
Force TypeScript or JavaScript output.
npx @jwiedeman/gtm-kit-cli init --typescript
npx @jwiedeman/gtm-kit-cli init --no-typescript--consent
Include Consent Mode v2 configuration.
npx @jwiedeman/gtm-kit-cli init --consentTroubleshooting
"Framework not detected correctly"
The CLI checks for config files and dependencies. If detection is wrong:
# Check what was detected
npx @jwiedeman/gtm-kit-cli detect
# You can manually install the right packages
npm install @jwiedeman/gtm-kit @jwiedeman/gtm-kit-react"Permission denied"
On Unix systems, you may need to use npx or install globally:
# Use npx (recommended)
npx @jwiedeman/gtm-kit-cli init
# Or install globally
npm install -g @jwiedeman/gtm-kit-cli
gtm-kit init"Package installation failed"
If automatic installation fails:
- Check your internet connection
- Try installing manually:
npm install @jwiedeman/gtm-kit @jwiedeman/gtm-kit-react - Check for npm registry issues
Programmatic Usage
import { detectFramework, detectPackageManager, validateGtmId, generateCode } from '@jwiedeman/gtm-kit-cli';
// Detect framework
const framework = await detectFramework('./my-project');
console.log(framework); // { name: 'react', confidence: 90 }
// Detect package manager
const pm = await detectPackageManager('./my-project');
console.log(pm); // 'pnpm'
// Validate GTM ID
const isValid = validateGtmId('GTM-XXXXXX');
console.log(isValid); // true
// Generate code
const code = generateCode({
framework: 'react',
gtmId: 'GTM-XXXXXX',
typescript: true,
consent: true
});Requirements
- Node.js 18+
- npm, yarn, pnpm, or bun
Related Packages
- Core: @jwiedeman/gtm-kit
- All Adapters: See the main repository for the full list
Support
Have a question, found a bug, or need help?
Open an issue on GitHub — we're actively maintaining this project and respond quickly.
License
MIT