Google Analytics 4 Event Tracking on Wix

Tracking custom events on Wix requires understanding how Wix's platform interacts with GA4. This guide covers automatic events, custom event implementation with Velo, and Wix-specific event patterns.

Automatic Events from Wix Marketing Integration

When using Wix's native GA4 integration, these events track automatically:

Limitation: You cannot customize these events or their parameters without switching to custom code + Velo implementation.

Single-Page Application (SPA) Navigation Tracking

The Problem

Wix uses AJAX navigation for smooth page transitions, which means:

• Traditional pageview tracking may miss navigations
• GA4 might not detect route changes
• Dynamic content loads without full page reloads

Solution: Track Navigation with Velo

Add this code to your Site Code (not page code):

// File: public/navigation-tracking.js (in Wix Studio Code Files)
// Or in Site tab → Global Code

import wixLocation from 'wix-location';

let lastPath = wixLocation.path.join('/');

wixLocation.onChange(() => {
  const currentPath = wixLocation.path.join('/');

  // Only track if path actually changed
  if (currentPath !== lastPath) {
    lastPath = currentPath;

    // Send pageview to GA4
    if (window.gtag) {
      gtag('event', 'page_view', {
        page_location: wixLocation.url,
        page_path: currentPath,
        page_title: document.title
      });
    }
  }
});

Important: This requires GA4 to be installed via custom code (Method 2 from setup guide), not Marketing Integrations.

Custom Event Tracking with Velo

Basic Custom Event

Track button clicks, form submissions, or custom interactions:

// In your page code or component
import { gtag } from 'public/analytics.js'; // Your helper file

$w('#myButton').onClick(() => {
  // Send custom event to GA4
  gtag('event', 'button_click', {
    button_name: 'Contact Us',
    button_location: 'Hero Section',
    page_path: wixLocation.path.join('/')
  });
});

Form Submission Tracking

Wix Forms can be tracked using Velo's form events:

import wixLocation from 'wix-location';

$w.onReady(function () {
  $w('#contactForm').onWixFormSubmitted((event) => {
    if (window.gtag) {
      gtag('event', 'form_submission', {
        form_id: 'contact_form',
        form_name: 'Contact Us Form',
        form_location: wixLocation.path.join('/'),
        submission_id: event.submissionId
      });
    }
  });
});

Wix Stores Events

Track product interactions in Wix Stores using the wix-stores-frontend module:

import wixStoresFrontend from 'wix-stores-frontend';
import wixLocation from 'wix-location';

$w.onReady(async function () {
  // Track add to cart
  $w('#addToCartButton').onClick(async () => {
    const product = await wixStoresFrontend.product.getProduct();

    if (window.gtag) {
      gtag('event', 'add_to_cart', {
        currency: product.currency,
        value: product.price,
        items: [{
          item_id: product.sku || product.id,
          item_name: product.name,
          price: product.price,
          quantity: 1
        }]
      });
    }
  });
});

See: Full ecommerce tracking guide

Wix Bookings Events

Track appointment bookings and scheduling events:

import wixBookingsFrontend from 'wix-bookings-frontend';

$w.onReady(function () {
  wixBookingsFrontend.onBookingCreated((booking) => {
    if (window.gtag) {
      gtag('event', 'booking_created', {
        service_id: booking.serviceId,
        service_name: booking.serviceName,
        booking_value: booking.price,
        currency: booking.currency,
        booking_date: booking.startDate
      });
    }
  });
});

Wix Members (Site Members) Events

Track member registration and login:

import wixUsers from 'wix-users';

$w.onReady(function () {
  // Track when user logs in
  wixUsers.onLogin((user) => {
    if (window.gtag) {
      gtag('event', 'login', {
        method: 'wix_members',
        user_id: user.id // Consider privacy implications
      });
    }
  });
});

⚠️ Privacy Warning: Be cautious about sending PII (personally identifiable information) to GA4. Consider hashing user IDs or using pseudonymous identifiers.

Scroll Depth Tracking (Custom Thresholds)

The native integration only tracks 90% scroll. For more granular tracking:

// Track multiple scroll depths
let scrollDepths = [25, 50, 75, 90];
let scrollTracked = [];

window.addEventListener('scroll', () => {
  const scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;

  scrollDepths.forEach(depth => {
    if (scrollPercent >= depth && !scrollTracked.includes(depth)) {
      scrollTracked.push(depth);

      if (window.gtag) {
        gtag('event', 'scroll', {
          percent_scrolled: depth,
          page_path: wixLocation.path.join('/')
        });
      }
    }
  });
});

Best Practice: Add throttling to avoid excessive event firing.

Element Visibility Tracking

Track when important elements become visible (e.g., CTA buttons, products):

// Requires Intersection Observer API (supported in modern browsers)
const observeElement = (selector, eventName) => {
  const element = document.querySelector(selector);

  if (!element) return;

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        if (window.gtag) {
          gtag('event', eventName, {
            element_id: selector,
            page_path: wixLocation.path.join('/')
          });
        }
        observer.unobserve(entry.target); // Track only once
      }
    });
  }, { threshold: 0.5 }); // 50% visible

  observer.observe(element);
};

$w.onReady(function () {
  observeElement('#pricingSection', 'pricing_viewed');
  observeElement('#ctaButton', 'cta_viewed');
});

Click Tracking (Enhanced)

Track specific button or link clicks beyond automatic outbound tracking:

// Track internal navigation clicks
$w('#navigationMenu').onClick((event) => {
  const linkText = event.target.text;
  const linkUrl = event.target.link;

  if (window.gtag) {
    gtag('event', 'navigation_click', {
      link_text: linkText,
      link_url: linkUrl,
      link_location: 'main_menu'
    });
  }
});

// Track CTA button clicks
$w('#heroCtaButton').onClick(() => {
  if (window.gtag) {
    gtag('event', 'cta_click', {
      cta_text: $w('#heroCtaButton').label,
      cta_location: 'hero_section',
      page_path: wixLocation.path.join('/')
    });
  }
});

Wix Events API Integration

Access Wix's platform events for more advanced tracking:

// Import Wix Events (available in Wix Studio and with Velo)
import { events } from 'wix-events-frontend';

// Example: Track product quick view
events.onProductQuickView((event) => {
  if (window.gtag) {
    gtag('event', 'view_item', {
      currency: event.product.currency,
      value: event.product.price,
      items: [{
        item_id: event.product.sku || event.product.id,
        item_name: event.product.name,
        price: event.product.price
      }]
    });
  }
});

Note: Available Wix Events depend on your Wix plan and installed apps.

Error and Exception Tracking

Track JavaScript errors and custom exceptions:

// Global error handler
window.addEventListener('error', (event) => {
  if (window.gtag) {
    gtag('event', 'exception', {
      description: event.message,
      fatal: false,
      error_file: event.filename,
      error_line: event.lineno
    });
  }
});

// Custom exception tracking
try {
  // Your code
  performRiskyOperation();
} catch (error) {
  if (window.gtag) {
    gtag('event', 'exception', {
      description: error.message,
      fatal: false
    });
  }
}

User Timing / Performance Tracking

Track custom performance metrics:

// Track time to interactive for custom components
const startTime = Date.now();

$w.onReady(async function () {
  // Your initialization code
  await loadCustomData();

  const loadTime = Date.now() - startTime;

  if (window.gtag) {
    gtag('event', 'timing_complete', {
      name: 'custom_component_load',
      value: loadTime,
      event_category: 'performance'
    });
  }
});

Recommended Events for Wix Sites

Lead Generation Sites

// Newsletter signup
gtag('event', 'generate_lead', {
  lead_type: 'newsletter',
  value: 5.00 // Estimated lead value
});

// Contact form submission
gtag('event', 'generate_lead', {
  lead_type: 'contact_form',
  value: 10.00
});

// Phone number click
gtag('event', 'generate_lead', {
  lead_type: 'phone_click',
  value: 8.00
});

Service Businesses

// Service inquiry
gtag('event', 'view_service', {
  service_name: 'Web Design',
  service_category: 'Digital Services'
});

// Quote request
gtag('event', 'begin_quote', {
  service_name: 'Web Design',
  value: 500.00
});

Portfolio Sites

// Project view
gtag('event', 'view_project', {
  project_name: 'Brand Redesign',
  project_category: 'Branding',
  project_year: '2024'
});

// Download portfolio PDF
gtag('event', 'download_portfolio', {
  file_type: 'pdf',
  portfolio_type: 'full'
});

Event Naming Best Practices

1. Use GA4 recommended events when possible (add_to_cart, purchase, login, etc.)
2. Use lowercase with underscores (e.g., button_click, not buttonClick)
3. Be consistent across your site
4. Avoid PII in event names or parameters
5. Document your events in a measurement plan

Testing Custom Events

1. GA4 DebugView

Enable debug mode in your GA4 installation:

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

Then check Admin → DebugView in GA4.

2. Browser Console

Log events to console for debugging:

function trackEvent(eventName, params) {
  console.log('GA4 Event:', eventName, params);

  if (window.gtag) {
    gtag('event', eventName, params);
  }
}

3. Google Tag Assistant

Use the Tag Assistant Chrome extension to verify events in real-time.

Common Issues and Solutions

Wix Plan Requirements

Next Steps

• Set up ecommerce tracking
• Configure GTM data layer
• Troubleshoot events not firing

Additional Resources

• GA4 Event Reference
• Wix Velo API Reference
• Wix Events Frontend API