SITE123 GA4 Event Tracking: Setup Guide

Track Site123-specific events in GA4 including form submissions, button clicks, ecommerce events, and custom interactions.

Learn how to track Site123-specific events in Google Analytics 4, including form submissions, button clicks, ecommerce events, and custom user interactions.

Prerequisites

Before implementing event tracking:

GA4 installed on Site123
Access to Site123's code injection settings
Basic understanding of JavaScript (for custom events)

Implementation Methods

Method	Best For	Customization
Enhanced Measurement	Quick setup, standard events	Low - automatic
Manual gtag.js Events	Custom tracking needs	Medium - code required
Google Tag Manager	Complex tracking, multiple events	High - visual interface

Enhanced Measurement (Automatic Events)

GA4's Enhanced Measurement tracks common interactions automatically. No code required!

Enable Enhanced Measurement

In GA4, go to Admin → Data Streams
Click your Web stream
Toggle Enhanced Measurement ON
Configure which events to track:
- ✓ Page views (always on)
- ✓ Scrolls (90% depth)
- ✓ Outbound clicks
- ✓ Site search
- ✓ Video engagement (YouTube, Vimeo)
- ✓ File downloads (PDF, DOC, etc.)

Events Tracked Automatically

page_view - Every page load

scroll - User scrolls 90% of page

click - Outbound link clicks (external domains)

file_download - Downloads of: pdf, doc, docx, txt, rtf, csv, xls, xlsx, ppt, pptx, zip

video_start, video_progress, video_complete - YouTube/Vimeo embeds

view_search_results - If Site123 search is detected

Custom Event Tracking

Track Site123-specific interactions with custom events.

Form Submissions

Track contact form and lead form submissions.

Method 1: Generic Form Tracking

Add to Site123's Body Code or Footer Code section:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Track all form submissions
  const forms = document.querySelectorAll('form');

  forms.forEach(function(form) {
    form.addEventListener('submit', function(e) {
      const formName = this.getAttribute('name') ||
                       this.getAttribute('id') ||
                       'contact_form';

      gtag('event', 'form_submission', {
        'form_name': formName,
        'form_location': window.location.pathname,
        'form_destination': this.action || 'site123_default'
      });
    });
  });
});
</script>

Method 2: Specific Form Tracking

For tracking specific forms by ID or class:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Track contact form specifically
  const contactForm = document.querySelector('#contact-form');

  if (contactForm) {
    contactForm.addEventListener('submit', function(e) {
      gtag('event', 'contact_form_submit', {
        'form_type': 'contact',
        'page_path': window.location.pathname
      });
    });
  }

  // Track newsletter signup
  const newsletterForm = document.querySelector('.newsletter-form');

  if (newsletterForm) {
    newsletterForm.addEventListener('submit', function(e) {
      gtag('event', 'newsletter_signup', {
        'method': 'footer_form',
        'page_path': window.location.pathname
      });
    });
  }
});
</script>

Button Click Tracking

Track important button clicks (CTA buttons, etc.):

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Track all buttons with specific class
  const ctaButtons = document.querySelectorAll('.cta-button, .s123-button-primary');

  ctaButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      gtag('event', 'button_click', {
        'button_text': this.textContent.trim(),
        'button_location': window.location.pathname,
        'button_class': this.className
      });
    });
  });

  // Track "Get Started" buttons specifically
  const getStartedButtons = document.querySelectorAll('[data-action="get-started"]');

  getStartedButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      gtag('event', 'get_started_click', {
        'button_text': this.textContent,
        'page_location': window.location.href
      });
    });
  });
});
</script>

Phone Number Clicks (Click-to-Call)

Track when users click phone numbers:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const phoneLinks = document.querySelectorAll('a[href^="tel:"]');

  phoneLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      const phoneNumber = this.getAttribute('href').replace('tel:', '');

      gtag('event', 'phone_call', {
        'phone_number': phoneNumber,
        'page_location': window.location.pathname,
        'link_text': this.textContent
      });
    });
  });
});
</script>

Email Link Clicks

Track mailto link clicks:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const emailLinks = document.querySelectorAll('a[href^="mailto:"]');

  emailLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      gtag('event', 'email_click', {
        'email_to': this.getAttribute('href').replace('mailto:', ''),
        'page_location': window.location.pathname
      });
    });
  });
});
</script>

Track social media clicks:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const socialLinks = document.querySelectorAll('a[href*="facebook.com"], a[href*="twitter.com"], a[href*="instagram.com"], a[href*="linkedin.com"], a[href*="youtube.com"]');

  socialLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      let platform = 'unknown';

      if (this.href.includes('facebook.com')) platform = 'facebook';
      else if (this.href.includes('twitter.com')) platform = 'twitter';
      else if (this.href.includes('instagram.com')) platform = 'instagram';
      else if (this.href.includes('linkedin.com')) platform = 'linkedin';
      else if (this.href.includes('youtube.com')) platform = 'youtube';

      gtag('event', 'social_click', {
        'social_network': platform,
        'link_url': this.href,
        'page_location': window.location.pathname
      });
    });
  });
});
</script>

Ecommerce Tracking (Site123 Store)

If you have Site123's ecommerce/online store features enabled.

View Item (Product Page)

Add to product pages using page-specific code injection:

<script>
gtag('event', 'view_item', {
  'currency': 'USD',
  'value': 29.99,
  'items': [{
    'item_id': 'SKU_12345',
    'item_name': 'Product Name',
    'item_category': 'Category Name',
    'price': 29.99,
    'quantity': 1
  }]
});
</script>

Note: Replace values with actual product data. You may need to use Site123's template variables or extract from page content.

Add to Cart

Track add to cart button clicks:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const addToCartButtons = document.querySelectorAll('.add-to-cart-btn');

  addToCartButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      // Extract product data from page
      const productName = document.querySelector('.product-name')?.textContent;
      const productPrice = parseFloat(
        document.querySelector('.product-price')?.textContent.replace(/[^0-9.]/g, '')
      );

      gtag('event', 'add_to_cart', {
        'currency': 'USD',
        'value': productPrice,
        'items': [{
          'item_name': productName,
          'price': productPrice,
          'quantity': 1
        }]
      });
    });
  });
});
</script>

Begin Checkout

Track when users proceed to checkout:

<script>
// Add to cart page or checkout button
document.querySelector('.checkout-button')?.addEventListener('click', function() {
  gtag('event', 'begin_checkout', {
    'currency': 'USD',
    'value': 99.99, // Total cart value
    'items': [
      // Cart items array
    ]
  });
});
</script>

Purchase Event

Add to order confirmation/thank you page using page-specific code injection:

<script>
gtag('event', 'purchase', {
  'transaction_id': 'ORDER_123456', // Unique order ID
  'affiliation': 'Site123 Store',
  'value': 99.99,
  'currency': 'USD',
  'tax': 8.99,
  'shipping': 5.99,
  'items': [{
    'item_id': 'SKU_001',
    'item_name': 'Product Name',
    'item_category': 'Category',
    'price': 85.00,
    'quantity': 1
  }]
});
</script>

Important: Only fire this event once per purchase. Use unique transaction IDs.

Blog Engagement Tracking

Track blog post interactions:

Time on Article

<script>
// Track engaged time on blog posts
let startTime = Date.now();
let engagementSent = false;

window.addEventListener('beforeunload', function() {
  const timeSpent = Math.round((Date.now() - startTime) / 1000); // seconds

  if (timeSpent > 30 && !engagementSent) {
    gtag('event', 'article_engagement', {
      'time_spent': timeSpent,
      'article_title': document.title,
      'engaged': timeSpent > 60 ? 'yes' : 'no'
    });
    engagementSent = true;
  }
});

// Also track at 60 second mark
setTimeout(function() {
  if (!engagementSent) {
    gtag('event', 'article_engagement', {
      'time_spent': 60,
      'article_title': document.title,
      'engaged': 'yes'
    });
    engagementSent = true;
  }
}, 60000);
</script>

<script>
// Track social share button clicks on blog posts
document.querySelectorAll('.share-button').forEach(function(button) {
  button.addEventListener('click', function() {
    const platform = this.getAttribute('data-platform') || 'unknown';

    gtag('event', 'share', {
      'method': platform,
      'content_type': 'blog_post',
      'item_id': window.location.pathname
    });
  });
});
</script>

Video Tracking (Custom Players)

If using custom video players (not YouTube/Vimeo):

<script>
// Track video interactions
const video = document.querySelector('video');

if (video) {
  video.addEventListener('play', function() {
    gtag('event', 'video_start', {
      'video_url': this.currentSrc,
      'video_title': this.title || 'Untitled Video'
    });
  });

  video.addEventListener('ended', function() {
    gtag('event', 'video_complete', {
      'video_url': this.currentSrc,
      'video_title': this.title || 'Untitled Video'
    });
  });
}
</script>

Multi-Language Event Tracking

For multi-language Site123 sites:

<script>
// Detect and include language in events
const siteLanguage = document.documentElement.lang || 'en';

// Example: Form submission with language
document.querySelector('form')?.addEventListener('submit', function() {
  gtag('event', 'form_submission', {
    'form_name': 'contact',
    'site_language': siteLanguage
  });
});
</script>

Using Google Tag Manager for Events

For complex event tracking, GTM is recommended.

Advantages of GTM for Site123

No code changes needed after GTM installation
Visual interface for creating triggers
Built-in variables for clicks, forms, etc.
Easy to test with Preview mode
Version control and collaboration

Example: Form Submission via GTM

1. Create Form Submission Trigger

Type: Form Submission
Wait for Tags: Enable
Check Validation: Enable
Trigger fires on: All Forms

2. Create GA4 Event Tag

Type: Google Analytics: GA4 Event
Event Name: form_submission
Event Parameters:
- form_id: \{\{Form ID\}\}
- form_classes: \{\{Form Classes\}\}
- page_path: \{\{Page Path\}\}
Trigger: Form Submission trigger

3. Test and Publish

Use GTM Preview mode
Submit a form
Verify event fires in Tag Assistant
Check in GA4 DebugView
Publish when confirmed

Testing & Debugging

1. GA4 DebugView

Enable debug mode temporarily:

gtag('config', 'G-XXXXXXXXXX', {
  'debug_mode': true
});

Then check Admin → DebugView in GA4 to see events in real-time with all parameters.

2. Browser Console Testing

Test events manually in browser console:

// Open browser console (F12)
// Test an event:
gtag('event', 'test_event', {
  'test_parameter': 'test_value'
});

// Then check GA4 Realtime or DebugView

3. Verify Event Parameters

Common parameter issues:

value must be numeric (no currency symbols)
currency must be ISO 4217 code (USD, EUR, etc.)
items array must be properly formatted
Event names should use snake_case (e.g., form_submit, not formSubmit)

Event Naming Best Practices

Recommended Event Names

Use GA4's recommended event names when possible:

view_item - Product views
add_to_cart - Add to cart
begin_checkout - Start checkout
purchase - Completed purchase
search - Site search
share - Content sharing
sign_up - Account creation
login - User login

Custom Event Naming

For custom events, follow these guidelines:

Use lowercase
Use underscores (snake_case)
Be descriptive but concise
Examples: phone_call, newsletter_signup, pricing_view

Common Issues

Events Fire Multiple Times

Cause: Event listeners added multiple times or duplicate code

Fix:

// Add 'once' option to event listeners
button.addEventListener('click', function() {
  gtag('event', 'button_click');
}, { once: true });

// OR use flags
let eventSent = false;
button.addEventListener('click', function() {
  if (!eventSent) {
    gtag('event', 'button_click');
    eventSent = true;
  }
});

Events Don't Fire

Causes:

Element selector doesn't match
Event listener added before DOM ready
JavaScript error preventing execution

Fix:

Wrap code in DOMContentLoaded
Check browser console for errors
Use correct selectors (inspect element to verify)

Form Submissions Track Page View Instead

Cause: Form submits and reloads page before event sends

Fix:

form.addEventListener('submit', function(e) {
  e.preventDefault(); // Stop default submission

  // Send event
  gtag('event', 'form_submission', {
    'event_callback': function() {
      // Submit form after event sent
      this.submit();
    }.bind(this)
  });
});

Next Steps

Install GTM - For easier event management
Troubleshoot Events - Debug tracking issues
GA4 Setup - Initial GA4 installation

For general event tracking concepts, see GA4 Event Tracking Guide.

返回顶部

SITE123 GA4 Event Tracking: Setup Guide

Prerequisites

Implementation Methods

Enhanced Measurement (Automatic Events)

Enable Enhanced Measurement

Events Tracked Automatically

Custom Event Tracking

Form Submissions

Method 1: Generic Form Tracking

Method 2: Specific Form Tracking

Button Click Tracking

Phone Number Clicks (Click-to-Call)

Email Link Clicks

Social Media Link Tracking

Ecommerce Tracking (Site123 Store)

View Item (Product Page)

Add to Cart

Begin Checkout

Purchase Event

Blog Engagement Tracking

Time on Article

Social Share Clicks

Video Tracking (Custom Players)

Multi-Language Event Tracking

Using Google Tag Manager for Events

Advantages of GTM for Site123

Example: Form Submission via GTM

Testing & Debugging

1. GA4 DebugView

2. Browser Console Testing

3. Verify Event Parameters

Event Naming Best Practices

Recommended Event Names

Custom Event Naming

Common Issues

Events Fire Multiple Times

Events Don't Fire

Form Submissions Track Page View Instead

Next Steps