Expert guidance for implementing GA4 using Google Tag Manager including configuration tags, event tags, triggers, variables, and data layer integration. Use when setting up GA4 in GTM, creating GA4 event tags, configuring GTM triggers for GA4, working with GTM data layer for GA4 events, or debugging GTM-GA4 implementation. Covers GTM container setup, Google Tag configuration, Preview mode, and GTM best practices for GA4.
/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.
assets/gtm-ga4-starter-container.jsonreferences/gtm-best-practices-ga4.mdreferences/gtm-data-layer-ga4.mdreferences/gtm-ga4-setup-complete.mdreferences/gtm-preview-debugging.mdreferences/gtm-tags-triggers-variables.mdGoogle Tag Manager (GTM) provides a powerful, no-code approach to implementing Google Analytics 4 tracking. This skill covers complete GTM-GA4 integration, from initial configuration tags to advanced event tracking with data layer integration.
Invoke this skill when:
GA4 Configuration Tag (Base Tag)
The GA4 Configuration tag initializes GA4 on all pages. Create this first:
Key Configuration Options:
Event Tag Structure:
Common Event Tag Examples:
Button Click Event:
button_clickbutton_name, button_location, button_idForm Submission Event:
form_submitform_name, form_id, form_destinationPurchase Event:
purchasetransaction_id, value, currency, itemsdataLayer.push({event: 'purchase'}))Trigger Types for GA4 Events:
Page View Triggers:
Click Triggers:
Form Triggers:
Custom Event Triggers:
event: 'add_to_cart'JavaScript Error:
Scroll Depth:
Built-in Variables (Enable in Variables section):
Page Variables:
Click Variables:
Form Variables:
Data Layer Variables:
Create variables to extract data from dataLayer:
Variable Type: Data Layer Variable
Data Layer Variable Name: Exact key name (e.g., product_id, user_tier)
Usage: Reference in event parameters as {{DL - Product ID}}
What is the Data Layer?
JavaScript object that holds structured data for GTM to access:
window.dataLayer = window.dataLayer || [];
Pushing Events to Data Layer:
dataLayer.push({
'event': 'add_to_cart',
'product_id': 'SKU_123',
'product_name': 'Blue T-Shirt',
'price': 29.99,
'quantity': 1
});
GTM listens for the event key and fires corresponding Custom Event triggers.
Event Parameters from Data Layer:
In GTM event tag, map Data Layer Variables to event parameters:
product_id{{DL - Product ID}}Workflow:
Verification Checklist:
Steps:
GTM-GA4 Setup Order:
Common Issues:
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.