📊 Quick Reference - GA4 Events

Quick guide to every Google Analytics 4 event

🏠 Landing Page

Event	When it fires	Component
`hero_cta_click`	Click on a hero button	Hero Section
`nav_item_click`	Click on a menu item	Header
`project_card_click`	Click on a project card	Projects Section
`project_tab_change`	Project tab change	Projects Section
`content_highlight_click`	Click on a content highlight	Content Highlights
`store_cta_click`	Click on the store CTA	Store CTA
`footer_link_click`	Click on a footer link	Footer
`footer_social_click`	Click on a social icon	Footer

📝 Blog

Event	When it fires	Component
`blog_post_card_click`	Click on a blog post card	Blog List
`blog_filter_change`	Filter change	Blog Filters
`blog_search`	Search performed	Blog Search
`blog_post_reaction`	Reaction added	Blog Post
`blog_post_share`	Post shared	Blog Post
`blog_related_post_click`	Click on related post	Blog Post
`blog_reading_progress`	Reading milestones (25%, 50%, 75%, 100%)	Blog Post

💡 Insights

Event	When it fires	Component
`insight_card_click`	Click on an insight card	Insights List
`insight_filter_change`	Filter change	Insights Filters
`insight_lead_magnet_view`	Lead magnet displayed	Insight Detail
`insight_lead_magnet_download`	Material downloaded	Insight Detail
`insight_newsletter_subscribe`	Newsletter subscription	Newsletter Form

🛒 Store

Event	When it fires	Component
`store_template_view`	Template viewed	Store List
`store_template_demo_click`	Click on “View Demo”	Template Card
`store_filter_change`	Filter change	Store Filters
`store_add_to_cart`	Template added to cart	Template Card
`store_initiate_checkout`	Checkout started	Template Card
`purchase`	Purchase completed	Stripe Checkout
`store_template_download`	Free template download	Template Card

📧 Contact

Event	When it fires	Component
`contact_form_start`	Form start	Contact Form
`contact_form_field_interaction`	Field interaction	Contact Form
`contact_form_submit`	Form submitted	Contact Form
`contact_form_error`	Form error	Contact Form

🚀 Projects

Event	When it fires	Component
`projects_card_click`	Click on a project card	Projects Page
`projects_github_cta_click`	Click on “View on GitHub”	Projects Page
`projects_live_demo_click`	Click on “View Demo”	Projects Page
`projects_filter_change`	Filter change	Projects Page

🎨 UI / Theme

Event	When it fires	Component
`theme_toggle`	Theme change	Theme Switcher
`locale_switch`	Locale change	Locale Switcher
`scroll_to_section`	Scroll to section	Navigation

👨‍💼 Admin

Event	When it fires	Component
`admin_post_create`	Post created	Admin Panel
`admin_post_edit`	Post edited	Admin Panel
`admin_image_upload`	Image uploaded	Admin Panel

📋 Common Parameters

Every event automatically includes:


{
  locale: string,              // "pt", "en", "es"
  page_path: string,           // "/pt/blog"
  page_title: string,          // "Blog - ignitionstack.pro"
  funnel_stage: string,        // "awareness", "consideration", "conversion", "loyalty"
  source_component: string,    // "hero_section", "blog_list", etc
  engagement_type: string,     // "click", "impression", "form", "tab_change"
  environment: string          // "production", "development", "preview"
}

💻 How to Implement

1. Import


import { landingPageEvents, blogEvents, storeEvents, contactEvents } from "@/app/lib/analytics-events";
import { getCurrentPageMetadata } from "@/app/lib/analytics";

2. Track Event


const handleClick = () => {
  const metadata = getCurrentPageMetadata();
 
  landingPageEvents.heroCTAClick({
    ...metadata,
    destination: "/pt#projects",
    cta_type: "primary",
  });
};

3. Inspect in the console (dev)


[GA4] hero_cta_click { locale: "pt", ... }

🎯 Suggested Conversion Funnels

Purchase Funnel

store_template_view → CONSIDERATION
store_template_demo_click → CONSIDERATION
store_initiate_checkout → CONVERSION
purchase → CONVERSION

Lead Funnel (Insights)

insight_card_click → CONSIDERATION
insight_lead_magnet_view → CONVERSION
insight_lead_magnet_download → CONVERSION
insight_newsletter_subscribe → LOYALTY

Contact Funnel

hero_cta_click (secondary) → AWARENESS
contact_form_start → CONVERSION
contact_form_submit → CONVERSION

🐛 Debug Mode

To enable GA4 debug mode:


window.gtag('set', 'debug_mode', true);

To log events in the production console:


localStorage.setItem('GA_DEBUG', 'true');

Full documentation: GA_EVENTS_DOCUMENTATION.md Source code: src/app/lib/analytics-events.ts