Tracklytic

Next.js SDK

Tracklytic Next.js SDK für React-Anwendungen

Next.js SDK ⚡

Das Tracklytic Next.js SDK ist speziell für Next.js und React-Anwendungen optimiert und bietet eine nahtlose Integration mit React-Hooks und Server Components.

Installation

npm install tracklytic-next

Grundlegende Konfiguration

App Router (Next.js 13+)

// app/layout.tsx
import { TracklyticProvider } from 'tracklytic-next';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="de">
      <body>
        <TracklyticProvider
          apiToken="your_api_token_here"
          projectId="your_project_id"
        >
          {children}
        </TracklyticProvider>
      </body>
    </html>
  );
}

Pages Router (Next.js 12)

// pages/_app.tsx
import { TracklyticProvider } from 'tracklytic-next';

export default function App({ Component, pageProps }) {
  return (
    <TracklyticProvider
      apiToken="your_api_token_here"
      projectId="your_project_id"
    >
      <Component {...pageProps} />
    </TracklyticProvider>
  );
}

Erweiterte Konfiguration

<TracklyticProvider
  apiToken="your_api_token_here"
  projectId="your_project_id"
  batchSize={10}
  flushInterval={5000}
  debug={process.env.NODE_ENV === 'development'}
  retryAttempts={3}
  retryDelay={1000}
>
  {children}
</TracklyticProvider>

React Hooks

useTracklytic Hook

import { useTracklytic } from 'tracklytic-next';

function MyComponent() {
  const { track, identify, insight, incrementInsight } = useTracklytic();
  
  const handleClick = () => {
    track('button_click', {
      button: 'cta',
      page: '/home'
    });
  };
  
  return <button onClick={handleClick}>Click me</button>;
}

useTracklyticEvent Hook

import { useTracklyticEvent } from 'tracklytic-next';

function ProductPage({ productId }) {
  // Automatisches Event beim Mount
  useTracklyticEvent('product_viewed', {
    product_id: productId,
    page: '/product'
  });
  
  return <div>Product Page</div>;
}

useTracklyticIdentify Hook

import { useTracklyticIdentify } from 'tracklytic-next';

function UserProfile({ user }) {
  // Automatische Nutzer-Identifikation
  useTracklyticIdentify(user.id, {
    name: user.name,
    email: user.email,
    plan: user.plan
  });
  
  return <div>Welcome, {user.name}!</div>;
}

Server Components

Server-side Tracking

// app/api/track/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { Tracklytic } from 'tracklytic-next/server';

const tracker = new Tracklytic({
  apiToken: process.env.TRACKLYTIC_API_TOKEN!,
  projectId: process.env.TRACKLYTIC_PROJECT_ID!
});

export async function POST(request: NextRequest) {
  const { event, properties } = await request.json();
  
  await tracker.track(event, properties);
  
  return NextResponse.json({ success: true });
}

Middleware Integration

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import { Tracklytic } from 'tracklytic-next/server';

const tracker = new Tracklytic({
  apiToken: process.env.TRACKLYTIC_API_TOKEN!,
  projectId: process.env.TRACKLYTIC_PROJECT_ID!
});

export function middleware(request: NextRequest) {
  // Page View automatisch tracken
  tracker.track('page_view', {
    page: request.nextUrl.pathname,
    referrer: request.headers.get('referer'),
    user_agent: request.headers.get('user-agent')
  });
  
  return NextResponse.next();
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

Event Tracking

Einfaches Event

import { useTracklytic } from 'tracklytic-next';

function ContactForm() {
  const { track } = useTracklytic();
  
  const handleSubmit = (formData) => {
    track('form_submitted', {
      form_name: 'contact',
      page: '/contact'
    });
  };
  
  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
    </form>
  );
}

Event mit Channel

function EcommercePage() {
  const { track } = useTracklytic();
  
  const handlePurchase = (product) => {
    track('purchase', {
      product_id: product.id,
      amount: product.price,
      currency: 'EUR'
    }, 'ecommerce');
  };
  
  return (
    <button onClick={() => handlePurchase(product)}>
      Buy Now
    </button>
  );
}

Event mit erweiterten Optionen

function PremiumFeature() {
  const { track } = useTracklytic();
  
  const handleUpgrade = () => {
    track('upgrade_clicked', {
      feature: 'premium_analytics',
      page: '/dashboard'
    }, {
      notify: true,
      icon: '⭐',
      tags: {
        user_tier: 'free',
        campaign: 'premium_promotion'
      }
    });
  };
  
  return (
    <button onClick={handleUpgrade}>
      Upgrade to Premium
    </button>
  );
}

User Identification

Automatische Identifikation

import { useTracklyticIdentify } from 'tracklytic-next';

function UserDashboard({ user }) {
  // Automatische Identifikation bei User-Änderung
  useTracklyticIdentify(user.id, {
    name: user.name,
    email: user.email,
    plan: user.plan,
    signup_date: user.createdAt,
    last_login: new Date().toISOString()
  });
  
  return <div>Dashboard für {user.name}</div>;
}

Manuelle Identifikation

function UserSettings() {
  const { identify } = useTracklytic();
  
  const updateProfile = async (userData) => {
    // Profil in der Datenbank aktualisieren
    await updateUserProfile(userData);
    
    // Tracklytic-Profil aktualisieren
    identify(userData.id, {
      name: userData.name,
      email: userData.email,
      preferences: userData.preferences
    });
  };
  
  return (
    <form onSubmit={updateProfile}>
      {/* Form fields */}
    </form>
  );
}

Insights Management

Real-time Insights

function AnalyticsDashboard() {
  const { insight, incrementInsight } = useTracklytic();
  
  useEffect(() => {
    // Dashboard-Öffnung tracken
    incrementInsight('dashboard_views', 1);
  }, []);
  
  const updateMetrics = (metrics) => {
    Object.entries(metrics).forEach(([key, value]) => {
      insight(key, value, { icon: '📊' });
    });
  };
  
  return (
    <div>
      <h1>Analytics Dashboard</h1>
      {/* Dashboard content */}
    </div>
  );
}

Business Metrics

function RevenueTracker() {
  const { insight } = useTracklytic();
  
  const trackRevenue = (amount) => {
    insight('daily_revenue', amount, {
      icon: '💰'
    });
    
    insight('monthly_revenue', amount, {
      icon: '📈'
    });
  };
  
  return (
    <div>
      <button onClick={() => trackRevenue(29.99)}>
        Track Revenue
      </button>
    </div>
  );
}

Performance-Optimierung

Lazy Loading

import { lazy, Suspense } from 'react';

const TracklyticProvider = lazy(() => 
  import('tracklytic-next').then(module => ({
    default: module.TracklyticProvider
  }))
);

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <TracklyticProvider
        apiToken="your_api_token_here"
        projectId="your_project_id"
      >
        <MyApp />
      </TracklyticProvider>
    </Suspense>
  );
}

Conditional Loading

function ConditionalTracking() {
  const { track } = useTracklytic();
  const [isEnabled, setIsEnabled] = useState(false);
  
  const handleEvent = (event, properties) => {
    if (isEnabled) {
      track(event, properties);
    }
  };
  
  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isEnabled}
          onChange={(e) => setIsEnabled(e.target.checked)}
        />
        Enable Tracking
      </label>
      
      <button onClick={() => handleEvent('button_click', { button: 'test' })}>
        Test Event
      </button>
    </div>
  );
}

SSR/SSG Support

Static Site Generation

// pages/products/[id].tsx
import { GetStaticProps } from 'next';
import { useTracklytic } from 'tracklytic-next';

export default function ProductPage({ product }) {
  const { track } = useTracklytic();
  
  useEffect(() => {
    // Client-side Event nach Hydration
    track('product_viewed', {
      product_id: product.id,
      product_name: product.name
    });
  }, [product.id]);
  
  return (
    <div>
      <h1>{product.name}</h1>
      {/* Product content */}
    </div>
  );
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const product = await getProduct(params.id);
  
  return {
    props: { product },
    revalidate: 60
  };
};

Server-side Rendering

// pages/api/track-server/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { Tracklytic } from 'tracklytic-next/server';

const tracker = new Tracklytic({
  apiToken: process.env.TRACKLYTIC_API_TOKEN!,
  projectId: process.env.TRACKLYTIC_PROJECT_ID!
});

export async function POST(request: NextRequest) {
  try {
    const { event, properties, user_id } = await request.json();
    
    // Server-side Event
    await tracker.track(event, {
      ...properties,
      server_side: true,
      timestamp: new Date().toISOString()
    });
    
    // User-Identifikation falls vorhanden
    if (user_id) {
      await tracker.identify(user_id, {
        last_activity: new Date().toISOString()
      });
    }
    
    return NextResponse.json({ success: true });
  } catch (error) {
    return NextResponse.json(
      { error: 'Tracking failed' },
      { status: 500 }
    );
  }
}

TypeScript Support

Typisierte Events

// types/tracking.ts
interface TrackingEvents {
  page_view: {
    page: string;
    title?: string;
    referrer?: string;
  };
  button_click: {
    button: string;
    page: string;
    position?: string;
  };
  purchase: {
    product_id: string;
    amount: number;
    currency: string;
    payment_method?: string;
  };
}

// hooks/useTypedTracklytic.ts
import { useTracklytic } from 'tracklytic-next';

export function useTypedTracklytic() {
  const { track, identify, insight } = useTracklytic();
  
  const typedTrack = <K extends keyof TrackingEvents>(
    event: K,
    properties: TrackingEvents[K]
  ) => {
    track(event, properties);
  };
  
  return { track: typedTrack, identify, insight };
}

Typisierte Komponenten

// components/TrackingButton.tsx
import { useTypedTracklytic } from '@/hooks/useTypedTracklytic';

interface TrackingButtonProps {
  event: keyof TrackingEvents;
  properties: TrackingEvents[keyof TrackingEvents];
  children: React.ReactNode;
  className?: string;
}

export function TrackingButton({ 
  event, 
  properties, 
  children, 
  className 
}: TrackingButtonProps) {
  const { track } = useTypedTracklytic();
  
  const handleClick = () => {
    track(event, properties);
  };
  
  return (
    <button onClick={handleClick} className={className}>
      {children}
    </button>
  );
}

Best Practices

Event-Namen

// ✅ Gut - Beschreibend und konsistent
track('user_signup_completed');
track('product_added_to_cart');
track('payment_processed');

// ❌ Schlecht - Vage und inkonsistent
track('click');
track('action');
track('event');

Performance-Optimierung

// Batch-Events für bessere Performance
const { track } = useTracklytic();

const handleMultipleEvents = useCallback(() => {
  // Events sammeln und in einem Batch senden
  track('page_view', { page: '/checkout' });
  track('button_click', { button: 'proceed' });
  track('form_started', { form: 'checkout' });
}, [track]);

Error Handling

function SafeTrackingComponent() {
  const { track } = useTracklytic();
  
  const safeTrack = useCallback((event, properties) => {
    try {
      track(event, properties);
    } catch (error) {
      console.error('Tracking error:', error);
      // Fallback-Logik oder Retry-Mechanismus
    }
  }, [track]);
  
  return (
    <button onClick={() => safeTrack('button_click', { button: 'safe' })}>
      Safe Tracking
    </button>
  );
}

Nächste Schritte: Schauen Sie sich das Swift SDK an oder erkunden Sie praktische Beispiele.

JavaScript SDK

Tracklytic JavaScript SDK für Web-Anwendungen und Node.js

Swift SDK

Tracklytic Swift SDK für iOS und macOS Anwendungen

On this page

Next.js SDK ⚡InstallationGrundlegende KonfigurationApp Router (Next.js 13+)Pages Router (Next.js 12)Erweiterte KonfigurationReact HooksuseTracklytic HookuseTracklyticEvent HookuseTracklyticIdentify HookServer ComponentsServer-side TrackingMiddleware IntegrationEvent TrackingEinfaches EventEvent mit ChannelEvent mit erweiterten OptionenUser IdentificationAutomatische IdentifikationManuelle IdentifikationInsights ManagementReal-time InsightsBusiness MetricsPerformance-OptimierungLazy LoadingConditional LoadingSSR/SSG SupportStatic Site GenerationServer-side RenderingTypeScript SupportTypisierte EventsTypisierte KomponentenBest PracticesEvent-NamenPerformance-OptimierungError Handling