📊 Google Analytics 4 - Event Tracking Guide

Source: contents/prompts/features/08 - analytics-tracking-bdd.md

This document lists every GA4 event that must be implemented on ignitionstack.pro following the BDD specifications.

🎯 Required Parameters

All events MUST include the following parameters:

Parameter	Type	Description
`locale`	string	Page locale (en, pt, es)
`page_path`	string	URL path (/en/contact)
`page_title`	string	Page title
`funnel_stage`	string	awareness, consideration, conversion, loyalty
`source_component`	string	Component that fired the event
`environment`	string	production, development, preview (added automatically)

📖 Implementation

Available Helpers


import { trackGAEvent, trackPageView, getCurrentPageMetadata } from '@/app/lib/analytics';
import { usePageView } from '@/app/hooks/use-page-view';
import { useIntersectionTracking } from '@/app/hooks/use-intersection-tracking';
import { useClickTracking } from '@/app/hooks/use-click-tracking';

Usage Example


// Hook for automatic page views
usePageView(locale);
 
// Click tracking
const { trackClick } = useClickTracking();
trackClick('hero_primary_cta_click', {
  source_component: 'home_hero',
  cta_id: 'hero_primary',
  destination: href,
});
 
// Section impression tracking
const sectionRef = useIntersectionTracking({
  sectionId: 'home_about',
  funnelStage: 'awareness',
});

📋 Events by Category

🌐 Global Events

1. page_view

BDD: Scenario “Register page_view per route and locale”

Trigger: Any page load

Additional parameters:

page_location (string): Full URL
environment (string): production/development/preview

Implementation: Automatic via usePageView(locale)

Status: ✅ Implemented

2. header_navigation_click

BDD: Scenario “Track global navigation interactions”

Trigger: Click on a navigation item in the header

Additional parameters:

nav_item (string): Clicked item ID (nav_about, nav_projects, nav_content, nav_contact)
destination (string): Destination URL

Component: src/app/components/landing-page/header.tsx

Status: ⏳ Pending

3. theme_toggle

BDD: Scenario “Track header theme toggles”

Trigger: Click on the theme toggle button

Additional parameters:

previous_theme (string): dark/light
next_theme (string): dark/light

Component: src/app/components/commons/theme-switcher.tsx

Status: ⏳ Pending

🏠 Home Page Events

4. hero_primary_cta_click

BDD: Scenario “Track hero primary CTAs”

Trigger: Click on the hero primary CTA

Additional parameters:

cta_id (string): “hero_primary”
cta_destination (string): CTA href
engagement_type (string): “click”

Funnel Stage: awareness

Status: ⏳ Pending

5. hero_secondary_cta_click

BDD: Scenario “Track hero primary CTAs”

Trigger: Click on the hero secondary CTA

Additional parameters:

cta_id (string): “hero_secondary”
cta_destination (string): CTA href
engagement_type (string): “click”

Funnel Stage: awareness

Status: ⏳ Pending

6. section_view

BDD: Scenario “Track impressions of key sections”

Trigger: 60% of the section enters the viewport

Additional parameters:

section_id (string): home_about, home_projects, home_content, home_contact
engagement_type (string): “impression”

Funnel Stages:

home_about: awareness
home_projects: consideration
home_content: consideration
home_contact: conversion

Implementation: Via useIntersectionTracking

Status: ⏳ Pending

7. home_projects_tab_selected

BDD: Scenario “Capture highlighted project tab interactions”

Trigger: Tab selection in the projects section

Additional parameters:

tab_key (string): web, mobile, fullstack, all
engagement_type (string): “tab_change”

Funnel Stage: consideration

Status: ⏳ Pending

8. home_projects_cta_click

BDD: Scenario “Track the active project CTA”

Trigger: Click on the primary CTA in the projects tab

Additional parameters:

tab_key (string): Active tab
destination_type (string): internal/external
destination (string): href

Funnel Stage: consideration

Status: ⏳ Pending

9. home_content_highlight_click

BDD: Scenario “Track clicks on content highlights”

Trigger: Click on a content highlight card

Additional parameters:

highlight_id (string): youtube, article, podcast
destination_type (string): internal/external
destination (string): href

Funnel Stage: consideration

Status: ⏳ Pending

10. contact_channel_click (Home)

BDD: Scenario “Track clicks on the home contact channels”

Trigger: Click on a contact channel on the home page

Additional parameters:

source (string): “home”
channel (string): email, whatsapp, calendly
destination (string): href

Funnel Stage: conversion

Status: ⏳ Pending

11. home_contact_page_cta_click

BDD: Scenario “Track the ‘Talk to ignitionstack.pro’ CTA”

Trigger: Click on the “Talk to ignitionstack.pro” button

Additional parameters:

destination (string): ”/[locale]/contato”

Funnel Stage: conversion

Status: ⏳ Pending

📧 Contact Page Events

12. contact_channel_click (Contact Page)

BDD: Scenario “Track clicks on the direct /contact channels”

Trigger: Click on a contact channel on /contact

Additional parameters:

source (string): “contact_page”
channel (string): whatsapp, email, calendly
destination (string): href

Funnel Stage: conversion

Status: ⏳ Pending

13. contact_form_started

BDD: Scenario “Track when the contact form starts being filled”

Trigger: The first valid field is filled

Additional parameters:

form_id (string): “contact_main”

Funnel Stage: conversion

Status: ⏳ Pending

14. contact_form_submit

BDD: Scenario “Track contact form submission”

Trigger: Successful form submission

Additional parameters:

form_id (string): “contact_main”
subject (string): Selected subject
status (string): “success”

Funnel Stage: conversion

Status: ⏳ Pending

15. contact_form_validation_failed

BDD: Scenario “Track contact form submission”

Trigger: Validation failure

Additional parameters:

form_id (string): “contact_main”
status (string): “validation”
error_code (string): Error code

Funnel Stage: conversion

Status: ⏳ Pending

16. contact_form_failed

BDD: Scenario “Track contact form submission”

Trigger: Error while submitting the form

Additional parameters:

form_id (string): “contact_main”
status (string): “error”
error_code (string): Error code

Funnel Stage: conversion

Status: ⏳ Pending

17. contact_self_service_click

BDD: Scenario “Track the self-service (#faq) click”

Trigger: Click on the FAQ link

Additional parameters:

destination (string): ”/[locale]#faq”

Funnel Stage: consideration

Status: ⏳ Pending

🛒 Store Page Events

18. store_filter_applied

BDD: Scenario “Track store filter adjustments”

Trigger: Any filter change

Additional parameters:

filter_name (string): search, category, stack, level, priceType, clear
filter_value (string): Filter value
results_count (number): Number of results after the filter

Funnel Stage: consideration

Status: ⏳ Pending

19. store_template_cta_click

BDD: Scenario “Track template card interactions”

Trigger: Click on a template CTA

Additional parameters:

template_id (string): Template ID
cta_type (string): view_demo, download, buy_now, subscribe
destination (string): href
price_type (string): free/paid

Funnel Stage: conversion

Status: ⏳ Pending

20. store_contact_cta_click

BDD: Scenario “Track the ‘Talk about a project’ CTA”

Trigger: Click on the contact CTA in the store

Additional parameters:

destination (string): ”/[locale]/contato”

Funnel Stage: conversion

Status: ⏳ Pending

🔗 Recommendations Page Events

21. affiliate_link_click

BDD: Scenario “Track affiliate link clicks”

Trigger: Click on “View offer”

Additional parameters:

product_id (string): Product ID
category (string): Product category
affiliate_url (string): Affiliate link

Funnel Stage: consideration

Status: ⏳ Pending

💼 Projects Page Events

22. projects_project_click

BDD: Scenario “Track highlighted project clicks”

Trigger: Click on a project card

Additional parameters:

project_title (string): Project title
destination (string): href
destination_type (string): “external”

Funnel Stage: consideration

Status: ⏳ Pending

23. projects_github_cta_click

BDD: Scenario “Track the ‘View on GitHub’ CTA”

Trigger: Click on the “View on GitHub” button

Additional parameters:

destination (string): “https://github.com/andersonlimahw ”

Funnel Stage: consideration

Status: ⏳ Pending

👣 Footer Events

24. footer_navigation_click

BDD: Scenario “Track footer navigation clicks”

Trigger: Click on a navigation link in the footer

Additional parameters:

link_id (string): Link ID
destination (string): href

Funnel Stage: depends on the destination

Status: ⏳ Pending

25. footer_social_click

BDD: Scenario “Track social network clicks”

Trigger: Click on a social media icon

Additional parameters:

social_id (string): github, twitter, instagram, linkedin
destination (string): Network URL

Funnel Stage: loyalty

Status: ⏳ Pending

✅ Status Summary

Category	Total	Implemented	Pending
Global	3	1	2
Home	8	0	8
Contact	6	0	6
Store	3	0	3
Recommendations	1	0	1
Projects	2	0	2
Footer	2	0	2
TOTAL	25	1	24

🧪 Testing

To validate the GA4 events:

Development: Events are logged to the console
Production: Use GA4 DebugView
Chrome Extension: GA Debugger

📚 References

BDD Spec: contents/prompts/features/08 - analytics-tracking-bdd.md
Analytics Library: src/app/lib/analytics.ts
Hooks: src/app/hooks/use-page-view.ts, use-intersection-tracking.ts, use-click-tracking.ts

Last Update: 2025-10-07 Status: 🟡 In Progress (4% complete)