Help us improve
Share bugs, ideas, or general feedback.
From gtm-javascript
Generate ES5-compliant JavaScript for Google Tag Manager Custom HTML tags. Use when writing GTM tags, dataLayer code, or analytics implementations.
npx claudepluginhub ekusiadadus/claude-skill-gtm-javascript --plugin gtm-javascriptHow this skill is triggered — by the user, by Claude, or both
Slash command
/gtm-javascript:skills/gtm-javascriptThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill ensures all JavaScript code generated for Google Tag Manager (GTM) Custom HTML tags is **ES5-compliant** and follows current best practices (2024-2025).
Guides Google Tag Manager setup, tags, triggers, variables, data layer implementation, debugging, custom templates, and API automation for web, apps, and servers.
Implements Google Tag Manager — web-container install, dataLayer/trigger architecture, consent-aware tagging, and client-side vs server-side evaluation.
Generates GTM tracking code with enforced naming conventions, supporting HTML attributes and dataLayer pushes. Use when adding analytics tracking to UI interactions.
Share bugs, ideas, or general feedback.
This skill ensures all JavaScript code generated for Google Tag Manager (GTM) Custom HTML tags is ES5-compliant and follows current best practices (2024-2025).
GTM's JavaScript compiler operates in ES5 (ECMAScript 5) mode by default. ES6+ syntax causes compilation errors and prevents tag publishing.
NEVER use these in GTM Custom HTML tags:
| 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() |
| Default params | fn(x = 1) | x = x || 1 |
| for-of | for (x of arr) | for (var i...) |
| Classes | class Foo {} | function Foo(){} |
| Block functions | if(x){function f(){}} | if(x){var f=function(){}} |
ad_user_data and ad_personalizationgtagSet API for configuration settingsreadAnalyticsStorage sandbox API for custom templates(function() {
'use strict';
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'my_event',
my_parameter: 'value'
});
})();
(function() {
'use strict';
try {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({event: 'tracked_event'});
} catch (e) {
// Silent fail - do not break page
}
})();
function forEach(arr, callback) {
for (var i = 0; i < arr.length; i++) {
callback(arr[i], i);
}
}
When implementing consent, use these parameters:
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
// Default state (before consent)
gtag('consent', 'default', {
ad_storage: 'denied',
ad_user_data: 'denied',
ad_personalization: 'denied',
analytics_storage: 'denied'
});
// After user grants consent
gtag('consent', 'update', {
ad_storage: 'granted',
ad_user_data: 'granted',
ad_personalization: 'granted',
analytics_storage: 'granted'
});
Use the standard event names and items array structure:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: 'T12345',
value: 99.99,
currency: 'USD',
items: [{
item_id: 'SKU123',
item_name: 'Product Name',
price: 99.99,
quantity: 1
}]
}
});
Before publishing any GTM tag:
const/let - use var onlyfunction() syntaxConsider using Custom Templates (not Custom HTML) when:
Custom Templates support some ES6 features and provide better security through the sandboxed JavaScript environment.