Expert guidance for implementing GA4 using gtag.js directly on websites without Google Tag Manager. Use when implementing gtag.js tracking code, writing custom gtag() commands, setting up direct website tracking, working with gtag('event'), gtag('config'), or gtag('set') commands, or when GTM is not available. Covers .html, .js, .jsx files with gtag implementations and dataLayer integration.
/plugin marketplace add henkisdabro/wookstar-claude-code-plugins/plugin install ga-suite@wookstar-claude-code-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
README.mdassets/gtag-patterns.jsassets/gtag-snippet-template.htmlreferences/gtag-commands-complete.mdreferences/installation-guide.mdreferences/performance-optimization.mdreferences/real-world-patterns.mdgtag.js (Google Tag) is the official JavaScript library for implementing Google Analytics 4 tracking directly on websites without Google Tag Manager. This skill provides comprehensive guidance for direct gtag.js implementation including installation, event tracking, user property management, and real-world integration patterns.
Invoke this skill when:
Initializes Google Analytics 4 with the measurement ID and sets default configuration parameters.
Basic Usage:
gtag('config', 'G-XXXXXXXXXX');
With Parameters:
gtag('config', 'G-XXXXXXXXXX', {
'page_title': 'Custom Page Title',
'page_location': window.location.href,
'user_id': 'user_12345'
});
Sends events to GA4 with optional parameters.
Simple Event:
gtag('event', 'sign_up', {
'method': 'email'
});
Ecommerce Event:
gtag('event', 'purchase', {
'transaction_id': 'TXN_' + Date.now(),
'value': 99.99,
'currency': 'USD',
'items': [{
'item_id': 'SKU_123',
'item_name': 'Product Name',
'price': 99.99,
'quantity': 1
}]
});
Sets user-level properties that persist across sessions.
User ID:
// On login
gtag('set', {
'user_id': 'user_' + userId
});
// On logout - MUST use null, never empty string
gtag('set', {
'user_id': null
});
Custom Properties:
gtag('set', {
'subscription_tier': 'premium',
'customer_segment': 'enterprise'
});
Place this snippet in the <head> section of every page, before all other scripts:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
Replace G-XXXXXXXXXX with the Measurement ID from GA4 Data Streams.
Track user interactions with specific buttons or links.
Capture form submissions with custom event parameters.
Override automatic page view tracking for single-page applications.
Implement purchase funnel tracking (view_item, add_to_cart, begin_checkout, purchase).
Track login events and set User ID for cross-device tracking.
Detailed documentation available in references directory:
Key Commands:
gtag('js', new Date()) - Initialize librarygtag('config', 'G-ID') - Configure GA4 propertygtag('event', 'name', {}) - Send eventgtag('set', {}) - Set user propertiesCritical Rules:
<head> before other scriptsCommon Pitfalls:
React/Next.js: Use useEffect hooks for page view tracking in client components
Vue.js: Integrate gtag calls in Vue Router navigation guards
Angular: Implement tracking service and inject into components
Single-Page Applications: Manual page_view tracking required for route changes
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.