OnlyAutomator implements a comprehensive analytics system that combines multiple tracking services to monitor user behavior, optimize the application, and improve the user experience. This documentation reflects the actual implementation used across the application.

​
Tracking Services Integration

The application uses four primary analytics and user tracking services:

​
Google Analytics 4 (GA4)

Google Analytics 4 provides core user activity tracking, including:
  • Pageview Tracking: Automatic tracking of page navigation
  • Event Tracking: Monitoring user interactions with the application
  • Conversion Tracking: Measuring goal completions
  • User Journey Analysis: Understanding the user flow through the application
// Set up Google Analytics (GA4)
useEffect(() => {
  if (ANALYTICS_CONFIG.GOOGLE_ANALYTICS_ID) {
    const script = document.createElement('script');
    script.src = `https://www.googletagmanager.com/gtag/js?id=${ANALYTICS_CONFIG.GOOGLE_ANALYTICS_ID}`;
    script.async = true;
    document.head.appendChild(script);

    window.dataLayer = window.dataLayer || [];
    window.gtag = gtag;
    gtag('js', new Date());
    gtag('config', ANALYTICS_CONFIG.GOOGLE_ANALYTICS_ID, {
      page_path: pathname
    });

    // Update GA4 on route changes
    const originalRouteChangeComplete = window.onRouteChangeComplete;
    window.onRouteChangeComplete = () => {
      // Call previous handler if exists
      if (originalRouteChangeComplete) 
        originalRouteChangeComplete();
      
      // Send pageview to GA4
      gtag('config', ANALYTICS_CONFIG.GOOGLE_ANALYTICS_ID, {
        page_path: pathname
      });

      if (ANALYTICS_CONFIG.DEBUG) 
        console.log(`[AnalyticsScripts] GA4 pageview sent for ${pathname}`);
    };
  }
}, [pathname]);

​
Microsoft Clarity

Clarity provides enhanced user behavior analytics through:
  • Session Recording: Visual replay of user interactions
  • Heatmaps: Visualization of click and scroll patterns
  • User Frustration Detection: Identification of rage clicks and dead clicks
  • Performance Metrics: Tracking of page load and interaction times
// Set up Microsoft Clarity
useEffect(() => {
  if (ANALYTICS_CONFIG.CLARITY_PROJECT_ID) {
    const script = document.createElement('script');
    script.src = 'https://www.clarity.ms/tag/' + ANALYTICS_CONFIG.CLARITY_PROJECT_ID;
    script.async = true;
    document.head.appendChild(script);

    // Handle route changes for Clarity
    window.onRouteChangeComplete = () => {
      if (typeof window.clarity === 'function') {
        window.clarity('newPage');
        if (ANALYTICS_CONFIG.DEBUG) 
          console.log('[AnalyticsScripts] Clarity newPage event sent');
      }
    };
  }
}, []);
For marketing performance measurement, the application implements Google Ads tracking:
  • Conversion Tracking: Measuring the effectiveness of ad campaigns
  • Remarketing: Supporting audience targeting for ad campaigns
  • Campaign ROI Analysis: Evaluating the return on ad spend
// Set up Google Ads
useEffect(() => {
  if (ANALYTICS_CONFIG.GOOGLE_ADS_ID) {
    const script = document.createElement('script');
    script.src = `https://www.googletagmanager.com/gtag/js?id=${ANALYTICS_CONFIG.GOOGLE_ADS_ID}`;
    script.async = true;
    document.head.appendChild(script);

    window.dataLayer = window.dataLayer || [];
    window.gtag = gtag;
    gtag('js', new Date());
    gtag('config', ANALYTICS_CONFIG.GOOGLE_ADS_ID);
  }
}, []);

​
Crisp Chat Analytics

Crisp provides both customer support and behavior analytics:
  • Support Conversation Analysis: Tracking of support request patterns
  • User Segmentation: Grouping users based on behavior
  • Engagement Metrics: Measuring response times and satisfaction rates
// Set up Crisp Chat
useEffect(() => {
  if (ANALYTICS_CONFIG.CRISP_WEBSITE_ID) {
    window.$crisp = [];
    window.CRISP_WEBSITE_ID = ANALYTICS_CONFIG.CRISP_WEBSITE_ID;
    
    const script = document.createElement('script');
    script.src = 'https://client.crisp.chat/l.js';
    script.async = true;
    document.head.appendChild(script);
  }
}, []);

​
Configuration Management

The analytics services are configured using environment variables and a centralized configuration object: 
// lib/analytics/config.ts
export const ANALYTICS_CONFIG = {
  // Crisp Chat ID
  CRISP_WEBSITE_ID: '0550dd15-7ce4-4202-852b-90b46b6828ad',
  
  // Microsoft Clarity ID
  CLARITY_PROJECT_ID: 'qpqrx1368c',
  
  // Google Ads ID
  GOOGLE_ADS_ID: 'AW-16748394541',
  
  // Google Analytics ID
  GOOGLE_ANALYTICS_ID: 'G-ZR15YVGJCT',
  
  // Enable debug logs (disable in production)
  DEBUG: process.env.NODE_ENV !== 'production'
};

​
Analytics Component Integration

All analytics scripts are managed by a centralized component that handles script injection and event tracking: 
// components/analytics/AnalyticsScripts.tsx
'use client';

import { useEffect } from 'react';
import { usePathname } from 'next/navigation';
import { ANALYTICS_CONFIG } from '@/lib/analytics/config';

/**
 * Component that centralizes various analytics scripts
 * These scripts are designed to load only on the client-side
 */

// Type definitions for window extensions
declare global {
  interface Window {
    clarity: (command: string) => void;
    $crisp: unknown[];
    CRISP_WEBSITE_ID: string;
    dataLayer: unknown[];
    onRouteChangeComplete?: () => void;
    gtag?: (...args: unknown[]) => void;
  }
}

// Utility function for Google Tag Manager
const gtag = (...args: unknown[]): void => {
  if (typeof window !== 'undefined') {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push(args);
  }
};

export function AnalyticsScripts() {
  const pathname = usePathname();

  // Set up Microsoft Clarity
  useEffect(() => {
    // Implementation...
  }, []);

  // Set up Crisp Chat
  useEffect(() => {
    // Implementation...
  }, []);

  // Set up Google Ads
  useEffect(() => {
    // Implementation...
  }, []);

  // Set up Google Analytics (GA4)
  useEffect(() => {
    // Implementation...
  }, [pathname]);

  return null;
}

​
Event Tracking Implementation

The application tracks various user events to gather insights on behavior and optimize the experience:

​
Page Views

Page views are automatically tracked when users navigate between pages: 
// Track page view in Google Analytics
gtag('config', ANALYTICS_CONFIG.GOOGLE_ANALYTICS_ID, {
  page_path: pathname
});

// Track page view in Clarity
window.clarity('newPage');

​
Custom Events

For specific user actions, custom events are tracked: 
// Example: Track a subscription event
function trackSubscription(plan: string, price: number) {
  // Google Analytics event
  gtag('event', 'subscription', {
    event_category: 'ecommerce',
    event_label: plan,
    value: price
  });
  
  // Clarity custom tag
  if (window.clarity) {
    window.clarity('set', 'subscription_plan', plan);
    window.clarity('set', 'subscription_price', price.toString());
  }
}

​
User Identification

For authenticated users, the analytics system associates behavior with user profiles: 
// Identify user in Crisp
export function identifyUser(userId: string, email: string, name: string) {
  if (window.$crisp) {
    window.$crisp.push(['set', 'user:email', email]);
    window.$crisp.push(['set', 'user:nickname', name]);
    window.$crisp.push(['set', 'session:data', [
      ['userId', userId],
      ['plan', userSubscriptionPlan]
    ]]);
  }
}

​
Privacy Compliance

The analytics implementation includes privacy features to comply with regulations:
  • Consent Management: Cookie consent banner with opt-out options
  • Data Anonymization: PII is anonymized in analytics data
  • Data Retention: Limited storage period for user data
  • GDPR Compliance: Data processing agreements with all services
function CookieConsentBanner() {
  const [consent, setConsent] = useState<boolean | null>(null);
  
  useEffect(() => {
    // Check for existing consent
    const savedConsent = localStorage.getItem('analytics-consent');
    if (savedConsent !== null) {
      setConsent(savedConsent === 'true');
    }
  }, []);
  
  const acceptCookies = () => {
    localStorage.setItem('analytics-consent', 'true');
    setConsent(true);
    
    // Initialize analytics only after consent
    initializeAnalytics();
  };
  
  const declineCookies = () => {
    localStorage.setItem('analytics-consent', 'false');
    setConsent(false);
    
    // Disable analytics tracking
    window['ga-disable-' + ANALYTICS_CONFIG.GOOGLE_ANALYTICS_ID] = true;
  };
  
  if (consent !== null) {
    return null; // Banner already responded to
  }
  
  return (
    <div className="cookie-banner">
      <p>We use cookies to improve your experience.</p>
      <div className="actions">
        <button onClick={acceptCookies}>Accept</button>
        <button onClick={declineCookies}>Decline</button>
      </div>
    </div>
  );
}

​
Analytics Dashboard

The collected data is visualized in dashboards accessible through:
  1. Google Analytics Dashboard: For overall site metrics
  2. Microsoft Clarity Portal: For user behavior analysis
  3. Crisp Dashboard: For support-related analytics
  4. Custom Admin Dashboard: For integrated metrics visualization

​
Integration with Other Systems

The analytics system integrates with other components of the OnlyAutomator platform:
  • Web Application: Script injection and event tracking
  • Chrome Extension: Usage metrics and feature adoption tracking
  • Microservice: Server-side event tracking and processing
  • Email System: Campaign performance measurement