claude-skill-gtm-javascript

Claude Skill: GTM JavaScript

A Claude Code skill for generating ES5-compliant JavaScript code for Google Tag Manager Custom HTML tags.

Why This Skill?

Google Tag Manager's Custom HTML tags only support ES5 JavaScript. Using modern ES6+ syntax (like const, let, arrow functions, template literals) causes compilation errors and prevents tag publishing.

This skill ensures Claude Code generates GTM-compatible code every time, following the latest best practices for 2024-2025.

Features

• ES5-Only Code Generation - Never get GTM compilation errors again
• 2024-2025 Updates - Includes Consent Mode v2, Server-side GTM, GA4 ecommerce
• Complete Reference - ES6 to ES5 conversion patterns
• Production Examples - Ready-to-use code for common tracking scenarios
• Testing Checklist - Comprehensive debugging and validation guide

Installation

Option 1: Plugin Installation (Recommended)

# Step 1: Add as marketplace
/plugin marketplace add ekusiadadus/claude-skill-gtm-javascript

# Step 2: Install the plugin
/plugin install gtm-javascript@claude-skill-gtm-javascript

Option 2: Global Installation (All Projects)

# Clone to your home directory
git clone https://github.com/ekusiadadus/claude-skill-gtm-javascript.git ~/.claude/skills/gtm-javascript

# Or copy just the skill files
mkdir -p ~/.claude/skills/gtm-javascript
cp -r skills/gtm-javascript/* ~/.claude/skills/gtm-javascript/

Option 3: Project-Specific Installation

# Clone into your project
mkdir -p .claude/skills
cp -r skills/gtm-javascript .claude/skills/

Usage

Once installed, Claude Code will automatically use this skill when you ask it to:

• Write GTM Custom HTML tags
• Create dataLayer.push() code
• Implement GA4 ecommerce tracking
• Set up Consent Mode v2
• Debug GTM implementations

Example Prompts

"Write a GTM Custom HTML tag to track form submissions"

"Create dataLayer code for GA4 purchase event"

"Implement Consent Mode v2 with a cookie consent banner"

"Convert this ES6 code to GTM-compatible ES5"

What's Included

File	Description
SKILL.md	Main skill definition with core rules and patterns
reference.md	Complete ES6 → ES5 conversion reference
examples.md	Production-ready code examples
checklist.md	Testing and debugging checklist

Key Constraints

Prohibited ES6+ Features

Feature	ES6+ (Prohibited)	ES5 (Required)
Variables	const, let	var
Functions	() => {}	function() {}
Strings	`${var}`	'str' + var
Destructuring	{a, b} = obj	var a = obj.a
Spread	[...arr]	arr.concat()
for-of	for (x of arr)	for (var i...)

2024-2025 Important Updates

Update	Date	Impact
IE11 Support Ended	July 15, 2024	No longer need IE11 compatibility
Consent Mode v2 Required	March 2024	New ad_user_data, ad_personalization parameters
Google Ads Auto-Tag	April 10, 2025	Containers auto-load Google tag first

Code Examples

Basic dataLayer Push

(function() {
  'use strict';

  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'custom_event',
    event_category: 'engagement',
    event_label: 'button_click'
  });
})();

GA4 Purchase Event

(function() {
  'use strict';

  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ ecommerce: null });
  window.dataLayer.push({
    event: 'purchase',
    ecommerce: {
      transaction_id: 'T_12345',
      value: 99.99,
      currency: 'USD',
      items: [{
        item_id: 'SKU_001',
        item_name: 'Product Name',
        price: 99.99,
        quantity: 1
      }]
    }
  });
})();

Consent Mode v2

window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }

gtag('consent', 'default', {
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
  analytics_storage: 'denied'
});

Resources

• GTM Developer Guide
• GA4 Ecommerce
• Consent Mode
• Sandboxed JavaScript APIs

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.