Initial commit
This commit is contained in:
Zhongwei Li
@@ -0,0 +1,806 @@
|
||||
/**
|
||||
* GA4 Event Structure Examples
|
||||
*
|
||||
* Comprehensive code examples for all four event categories:
|
||||
* 1. Automatically Collected Events
|
||||
* 2. Enhanced Measurement Events
|
||||
* 3. Recommended Events
|
||||
* 4. Custom Events
|
||||
*
|
||||
* Note: These examples assume gtag.js is already installed on the page.
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// CATEGORY 1: AUTOMATICALLY COLLECTED EVENTS
|
||||
// ============================================================================
|
||||
// These fire automatically when GA4 is installed - no code needed
|
||||
// Listed here for reference only
|
||||
|
||||
/*
|
||||
Automatic Events (No implementation needed):
|
||||
- session_start
|
||||
- first_visit
|
||||
- user_engagement
|
||||
- page_view (when enhanced measurement enabled)
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// CATEGORY 2: ENHANCED MEASUREMENT EVENTS
|
||||
// ============================================================================
|
||||
// These are configured in GA4 Admin (Data Streams → Enhanced measurement)
|
||||
// Toggle on/off for automatic collection
|
||||
|
||||
/*
|
||||
Enhanced Measurement Events (Configured in GA4 Admin):
|
||||
- page_view
|
||||
- scroll
|
||||
- click (outbound links)
|
||||
- file_download
|
||||
- video_start, video_progress, video_complete
|
||||
- view_search_results
|
||||
- form_start, form_submit
|
||||
|
||||
Enable in: Admin → Data Streams → Web Stream → Enhanced measurement (gear icon)
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// CATEGORY 3: RECOMMENDED EVENTS
|
||||
// ============================================================================
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Engagement Events
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Login Event
|
||||
gtag('event', 'login', {
|
||||
'method': 'google' // or 'email', 'facebook', 'phone'
|
||||
});
|
||||
|
||||
// Sign Up Event
|
||||
gtag('event', 'sign_up', {
|
||||
'method': 'email' // or 'google', 'facebook'
|
||||
});
|
||||
|
||||
// Search Event
|
||||
gtag('event', 'search', {
|
||||
'search_term': 'blue widgets'
|
||||
});
|
||||
|
||||
// Select Content
|
||||
gtag('event', 'select_content', {
|
||||
'content_type': 'article',
|
||||
'item_id': 'A123'
|
||||
});
|
||||
|
||||
// Share Event
|
||||
gtag('event', 'share', {
|
||||
'method': 'twitter',
|
||||
'content_type': 'article',
|
||||
'item_id': 'A123'
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Ecommerce Recommended Events
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// View Item (Product Page)
|
||||
gtag('event', 'view_item', {
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'affiliation': 'Google Merchandise Store',
|
||||
'coupon': 'SUMMER_FUN',
|
||||
'discount': 2.22,
|
||||
'index': 0,
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_category2': 'Adult',
|
||||
'item_category3': 'Shirts',
|
||||
'item_category4': 'Crew',
|
||||
'item_category5': 'Short sleeve',
|
||||
'item_list_id': 'related_products',
|
||||
'item_list_name': 'Related Products',
|
||||
'item_variant': 'green',
|
||||
'location_id': 'ChIJIQBpAG2ahYAR_6128GcTUEo',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
}
|
||||
],
|
||||
'currency': 'USD',
|
||||
'value': 30.03
|
||||
});
|
||||
|
||||
// View Item List (Product Listing Page)
|
||||
gtag('event', 'view_item_list', {
|
||||
'item_list_id': 'related_products',
|
||||
'item_list_name': 'Related products',
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'affiliation': 'Google Merchandise Store',
|
||||
'coupon': 'SUMMER_FUN',
|
||||
'discount': 2.22,
|
||||
'index': 0,
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_list_id': 'related_products',
|
||||
'item_list_name': 'Related Products',
|
||||
'item_variant': 'green',
|
||||
'location_id': 'ChIJIQBpAG2ahYAR_6128GcTUEo',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Select Item (Item Clicked from List)
|
||||
gtag('event', 'select_item', {
|
||||
'item_list_id': 'related_products',
|
||||
'item_list_name': 'Related products',
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_variant': 'green',
|
||||
'price': 10.01,
|
||||
'index': 0
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Add to Wishlist
|
||||
gtag('event', 'add_to_wishlist', {
|
||||
'currency': 'USD',
|
||||
'value': 30.03,
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_variant': 'green',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Add to Cart
|
||||
gtag('event', 'add_to_cart', {
|
||||
'currency': 'USD',
|
||||
'value': 30.03,
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_variant': 'green',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Remove from Cart
|
||||
gtag('event', 'remove_from_cart', {
|
||||
'currency': 'USD',
|
||||
'value': 10.01,
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_variant': 'green',
|
||||
'price': 10.01,
|
||||
'quantity': 1
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// View Cart
|
||||
gtag('event', 'view_cart', {
|
||||
'currency': 'USD',
|
||||
'value': 30.03,
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_variant': 'green',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Begin Checkout
|
||||
gtag('event', 'begin_checkout', {
|
||||
'currency': 'USD',
|
||||
'value': 30.03,
|
||||
'coupon': 'SUMMER_FUN',
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_variant': 'green',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Add Shipping Info
|
||||
gtag('event', 'add_shipping_info', {
|
||||
'currency': 'USD',
|
||||
'value': 30.03,
|
||||
'coupon': 'SUMMER_FUN',
|
||||
'shipping_tier': 'Ground',
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_variant': 'green',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Add Payment Info
|
||||
gtag('event', 'add_payment_info', {
|
||||
'currency': 'USD',
|
||||
'value': 30.03,
|
||||
'coupon': 'SUMMER_FUN',
|
||||
'payment_type': 'Credit Card',
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_variant': 'green',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Purchase (MOST IMPORTANT)
|
||||
gtag('event', 'purchase', {
|
||||
'transaction_id': 'T_12345',
|
||||
'affiliation': 'Google Merchandise Store',
|
||||
'value': 142.52,
|
||||
'tax': 10.00,
|
||||
'shipping': 5.00,
|
||||
'currency': 'USD',
|
||||
'coupon': 'SUMMER_SALE',
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'affiliation': 'Google Merchandise Store',
|
||||
'coupon': 'SUMMER_FUN',
|
||||
'discount': 2.22,
|
||||
'index': 0,
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_category2': 'Adult',
|
||||
'item_category3': 'Shirts',
|
||||
'item_category4': 'Crew',
|
||||
'item_category5': 'Short sleeve',
|
||||
'item_list_id': 'related_products',
|
||||
'item_list_name': 'Related Products',
|
||||
'item_variant': 'green',
|
||||
'location_id': 'ChIJIQBpAG2ahYAR_6128GcTUEo',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
},
|
||||
{
|
||||
'item_id': 'SKU_12346',
|
||||
'item_name': 'Google Grey Women\'s Tee',
|
||||
'affiliation': 'Google Merchandise Store',
|
||||
'coupon': 'SUMMER_FUN',
|
||||
'discount': 3.33,
|
||||
'index': 1,
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_category2': 'Adult',
|
||||
'item_category3': 'Shirts',
|
||||
'item_category4': 'Crew',
|
||||
'item_category5': 'Short sleeve',
|
||||
'item_list_id': 'related_products',
|
||||
'item_list_name': 'Related Products',
|
||||
'item_variant': 'gray',
|
||||
'location_id': 'ChIJIQBpAG2ahYAR_6128GcTUEo',
|
||||
'price': 20.99,
|
||||
'quantity': 2
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Refund
|
||||
gtag('event', 'refund', {
|
||||
'transaction_id': 'T_12345',
|
||||
'value': 30.03,
|
||||
'tax': 4.90,
|
||||
'shipping': 5.99,
|
||||
'currency': 'USD',
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'affiliation': 'Google Merchandise Store',
|
||||
'coupon': 'SUMMER_FUN',
|
||||
'discount': 2.22,
|
||||
'index': 0,
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_variant': 'green',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Promotion Events
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// View Promotion
|
||||
gtag('event', 'view_promotion', {
|
||||
'creative_name': 'Summer Banner',
|
||||
'creative_slot': 'featured_app_1',
|
||||
'promotion_id': 'P_12345',
|
||||
'promotion_name': 'Summer Sale',
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'affiliation': 'Google Merchandise Store',
|
||||
'coupon': 'SUMMER_FUN',
|
||||
'discount': 2.22,
|
||||
'index': 0,
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_variant': 'green',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Select Promotion
|
||||
gtag('event', 'select_promotion', {
|
||||
'creative_name': 'Summer Banner',
|
||||
'creative_slot': 'featured_app_1',
|
||||
'promotion_id': 'P_12345',
|
||||
'promotion_name': 'Summer Sale',
|
||||
'items': [
|
||||
{
|
||||
'item_id': 'SKU_12345',
|
||||
'item_name': 'Stan and Friends Tee',
|
||||
'affiliation': 'Google Merchandise Store',
|
||||
'coupon': 'SUMMER_FUN',
|
||||
'discount': 2.22,
|
||||
'index': 0,
|
||||
'item_brand': 'Google',
|
||||
'item_category': 'Apparel',
|
||||
'item_variant': 'green',
|
||||
'price': 10.01,
|
||||
'quantity': 3
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Other Recommended Events
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Generate Lead
|
||||
gtag('event', 'generate_lead', {
|
||||
'value': 99.99,
|
||||
'currency': 'USD'
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// CATEGORY 4: CUSTOM EVENTS
|
||||
// ============================================================================
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// SaaS / Software Examples
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Feature Activation
|
||||
gtag('event', 'feature_activated', {
|
||||
'feature_name': 'advanced_analytics',
|
||||
'feature_tier': 'enterprise',
|
||||
'activation_source': 'settings_page',
|
||||
'first_time_use': true
|
||||
});
|
||||
|
||||
// Product Tour Completion
|
||||
gtag('event', 'product_tour_completed', {
|
||||
'tour_name': 'onboarding_v2',
|
||||
'tour_version': '2.1',
|
||||
'completion_time_seconds': 180,
|
||||
'steps_completed': 7,
|
||||
'steps_skipped': 2
|
||||
});
|
||||
|
||||
// Trial Signup
|
||||
gtag('event', 'trial_started', {
|
||||
'plan_type': 'professional',
|
||||
'trial_duration_days': 14,
|
||||
'source': 'landing_page',
|
||||
'variation': 'b'
|
||||
});
|
||||
|
||||
// Account Upgrade
|
||||
gtag('event', 'account_upgraded', {
|
||||
'previous_tier': 'basic',
|
||||
'new_tier': 'premium',
|
||||
'upgrade_value': 99.99,
|
||||
'currency': 'USD',
|
||||
'billing_frequency': 'monthly'
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// E-Learning Examples
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Course Enrollment
|
||||
gtag('event', 'course_enrollment', {
|
||||
'course_id': 'GA4_101',
|
||||
'course_name': 'GA4 Fundamentals',
|
||||
'instructor': 'John Doe',
|
||||
'price': 99.99,
|
||||
'currency': 'USD',
|
||||
'level': 'beginner',
|
||||
'enrollment_method': 'direct'
|
||||
});
|
||||
|
||||
// Lesson Completion
|
||||
gtag('event', 'lesson_completed', {
|
||||
'course_id': 'GA4_101',
|
||||
'lesson_id': 'lesson_3',
|
||||
'lesson_title': 'Event Tracking Basics',
|
||||
'time_spent_minutes': 15,
|
||||
'quiz_score': 85,
|
||||
'attempts': 1
|
||||
});
|
||||
|
||||
// Certificate Earned
|
||||
gtag('event', 'certificate_earned', {
|
||||
'course_id': 'GA4_101',
|
||||
'course_name': 'GA4 Fundamentals',
|
||||
'completion_date': '2025-11-10',
|
||||
'final_score': 92,
|
||||
'certificate_id': 'CERT_12345'
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Media / Publishing Examples
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Article Read Complete
|
||||
gtag('event', 'article_read_complete', {
|
||||
'article_id': 'A123',
|
||||
'article_title': 'Complete GA4 Guide',
|
||||
'category': 'analytics',
|
||||
'author': 'Jane Smith',
|
||||
'word_count': 2500,
|
||||
'time_to_read_minutes': 10,
|
||||
'scroll_depth_percent': 100
|
||||
});
|
||||
|
||||
// Content Shared
|
||||
gtag('event', 'content_shared', {
|
||||
'content_type': 'article',
|
||||
'content_id': 'A123',
|
||||
'content_title': 'Complete GA4 Guide',
|
||||
'share_method': 'twitter',
|
||||
'share_location': 'article_footer'
|
||||
});
|
||||
|
||||
// Newsletter Subscription
|
||||
gtag('event', 'newsletter_subscribed', {
|
||||
'newsletter_type': 'weekly',
|
||||
'subscription_source': 'article_inline',
|
||||
'article_id': 'A123',
|
||||
'email_domain': 'gmail.com'
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// E-Commerce Examples (Custom Beyond Recommended)
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Product Comparison
|
||||
gtag('event', 'product_comparison_viewed', {
|
||||
'comparison_type': 'feature_matrix',
|
||||
'products_compared': 3,
|
||||
'product_ids': 'SKU_123,SKU_124,SKU_125',
|
||||
'category': 'electronics'
|
||||
});
|
||||
|
||||
// Wishlist Shared
|
||||
gtag('event', 'wishlist_shared', {
|
||||
'wishlist_id': 'WL_123',
|
||||
'item_count': 5,
|
||||
'share_method': 'email',
|
||||
'total_value': 499.95,
|
||||
'currency': 'USD'
|
||||
});
|
||||
|
||||
// Size Chart Viewed
|
||||
gtag('event', 'size_chart_viewed', {
|
||||
'product_id': 'SKU_123',
|
||||
'product_name': 'Blue T-Shirt',
|
||||
'category': 'apparel',
|
||||
'view_location': 'product_page'
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Video Tracking Examples (Custom)
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Video Tutorial Watched
|
||||
gtag('event', 'video_tutorial_watched', {
|
||||
'video_id': 'VID_123',
|
||||
'video_title': 'GA4 Event Tracking',
|
||||
'video_duration': 1200,
|
||||
'completion_percent': 100,
|
||||
'difficulty_level': 'beginner',
|
||||
'category': 'analytics',
|
||||
'language': 'en',
|
||||
'watch_time_seconds': 1180
|
||||
});
|
||||
|
||||
// Video Quality Changed
|
||||
gtag('event', 'video_quality_changed', {
|
||||
'video_id': 'VID_123',
|
||||
'previous_quality': 'sd',
|
||||
'new_quality': 'hd',
|
||||
'auto_switched': false,
|
||||
'playback_time_seconds': 120
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Form Tracking Examples (Custom)
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Multi-Step Form Progress
|
||||
gtag('event', 'form_step_completed', {
|
||||
'form_id': 'registration_form',
|
||||
'form_name': 'Account Registration',
|
||||
'step_number': 2,
|
||||
'step_name': 'contact_information',
|
||||
'total_steps': 4,
|
||||
'time_on_step_seconds': 45
|
||||
});
|
||||
|
||||
// Form Field Interaction
|
||||
gtag('event', 'form_field_focused', {
|
||||
'form_id': 'contact_form',
|
||||
'field_name': 'email',
|
||||
'field_type': 'email',
|
||||
'field_required': true,
|
||||
'field_position': 2
|
||||
});
|
||||
|
||||
// Form Validation Error
|
||||
gtag('event', 'form_validation_error', {
|
||||
'form_id': 'contact_form',
|
||||
'error_field': 'email',
|
||||
'error_type': 'invalid_format',
|
||||
'error_message': 'Please enter a valid email address'
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Calculator / Tool Examples
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Calculator Used
|
||||
gtag('event', 'calculator_used', {
|
||||
'calculator_type': 'roi',
|
||||
'calculator_name': 'ROI Calculator',
|
||||
'inputs_entered': 5,
|
||||
'calculation_performed': true,
|
||||
'result_value': 15000
|
||||
});
|
||||
|
||||
// Pricing Calculator
|
||||
gtag('event', 'pricing_calculator_used', {
|
||||
'plan_selected': 'enterprise',
|
||||
'users_count': 50,
|
||||
'billing_frequency': 'annual',
|
||||
'calculated_price': 4999.99,
|
||||
'currency': 'USD'
|
||||
});
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Error Tracking Examples
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Error Encountered
|
||||
gtag('event', 'error_encountered', {
|
||||
'error_type': 'api_error',
|
||||
'error_code': '500',
|
||||
'error_message': 'Internal Server Error',
|
||||
'error_page': '/checkout',
|
||||
'user_action': 'submit_payment'
|
||||
});
|
||||
|
||||
// Payment Failed
|
||||
gtag('event', 'payment_failed', {
|
||||
'payment_method': 'credit_card',
|
||||
'failure_reason': 'insufficient_funds',
|
||||
'transaction_value': 99.99,
|
||||
'currency': 'USD',
|
||||
'retry_available': true
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// ADVANCED PATTERNS
|
||||
// ============================================================================
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Dynamic Parameter Population
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Get product data from page
|
||||
function trackProductView() {
|
||||
const productId = document.querySelector('[data-product-id]').textContent;
|
||||
const productName = document.querySelector('.product-title').textContent;
|
||||
const productPrice = parseFloat(document.querySelector('.product-price').textContent);
|
||||
|
||||
gtag('event', 'view_item', {
|
||||
'items': [{
|
||||
'item_id': productId,
|
||||
'item_name': productName,
|
||||
'price': productPrice,
|
||||
'item_category': 'Electronics',
|
||||
'quantity': 1
|
||||
}],
|
||||
'value': productPrice,
|
||||
'currency': 'USD'
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Event with Conditional Parameters
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
function trackCheckout(userTier, couponCode) {
|
||||
const eventParams = {
|
||||
'items': getCartItems(),
|
||||
'value': getCartTotal(),
|
||||
'currency': 'USD'
|
||||
};
|
||||
|
||||
// Add optional parameters if they exist
|
||||
if (userTier) {
|
||||
eventParams.user_tier = userTier;
|
||||
}
|
||||
|
||||
if (couponCode) {
|
||||
eventParams.coupon = couponCode;
|
||||
}
|
||||
|
||||
gtag('event', 'begin_checkout', eventParams);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Event with Calculated Parameters
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
function trackVideoComplete(videoElement) {
|
||||
const duration = videoElement.duration;
|
||||
const watchedTime = videoElement.currentTime;
|
||||
const completionPercent = Math.round((watchedTime / duration) * 100);
|
||||
|
||||
gtag('event', 'video_complete', {
|
||||
'video_id': videoElement.id,
|
||||
'video_duration': Math.round(duration),
|
||||
'watch_time_seconds': Math.round(watchedTime),
|
||||
'completion_percent': completionPercent,
|
||||
'engagement_rate': completionPercent
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// User Property Setting
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Set user properties (user-scoped)
|
||||
function setUserProperties(userId, userTier, accountAge) {
|
||||
gtag('set', {
|
||||
'user_id': userId,
|
||||
'subscription_tier': userTier,
|
||||
'account_age_days': accountAge,
|
||||
'account_status': 'active'
|
||||
});
|
||||
}
|
||||
|
||||
// Clear user properties on logout
|
||||
function clearUserProperties() {
|
||||
gtag('set', {
|
||||
'user_id': null // MUST be null, not empty string
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Event Callback (for SPAs)
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
function trackFormSubmitAndNavigate(destination) {
|
||||
gtag('event', 'form_submit', {
|
||||
'form_id': 'contact-form',
|
||||
'form_destination': destination,
|
||||
'eventCallback': function() {
|
||||
// Navigate after event is sent
|
||||
window.location.href = destination;
|
||||
},
|
||||
'eventTimeout': 2000 // Timeout fallback
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// DEBUGGING EXAMPLES
|
||||
// ============================================================================
|
||||
|
||||
// Enable debug mode for testing
|
||||
gtag('config', 'G-XXXXXXXXXX', {
|
||||
'debug_mode': true
|
||||
});
|
||||
|
||||
// Or for specific events
|
||||
gtag('event', 'test_event', {
|
||||
'test_parameter': 'test_value',
|
||||
'debug_mode': true
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// NOTES & BEST PRACTICES
|
||||
// ============================================================================
|
||||
|
||||
/*
|
||||
Best Practices:
|
||||
1. Use snake_case for event and parameter names
|
||||
2. Keep event names under 40 characters
|
||||
3. Keep parameter names under 40 characters
|
||||
4. Keep parameter values under 100 characters (exceptions noted)
|
||||
5. Maximum 25 parameters per event
|
||||
6. Use ISO currency codes (USD, EUR, GBP) not symbols ($)
|
||||
7. Send numeric values as numbers, not strings
|
||||
8. Test in DebugView before deploying to production
|
||||
9. Register custom parameters as custom dimensions in GA4 Admin
|
||||
10. Document all custom events in tracking plan
|
||||
|
||||
Common Mistakes to Avoid:
|
||||
1. Missing currency parameter on value events
|
||||
2. Using $ instead of USD for currency
|
||||
3. Exceeding 25 parameters per event
|
||||
4. Sending PII (personally identifiable information)
|
||||
5. Using generic event names (click, event, data)
|
||||
6. Not testing in DebugView
|
||||
7. Forgetting to register custom dimensions
|
||||
|
||||
Character Limits:
|
||||
- Event name: 40 characters
|
||||
- Parameter name: 40 characters
|
||||
- Parameter value: 100 characters (standard)
|
||||
- page_title: 300 characters
|
||||
- page_referrer: 420 characters
|
||||
- page_location: 1000 characters
|
||||
*/
|
||||
Reference in New Issue
Block a user