WOGAA Documentation

Appearance

Web SDK ​

Welcome to the Web WOGAA Documentation. This SDK enables you to integrate analytics, user tracking, and sentiment collection into your web applications.

Overview ​

The Web SDK provides:

  • 📊 Analytics: Automatic page view and custom event tracking
  • 💬 Sentiments: Customizable feedback widget
  • 🔄 Transactions: Transaction lifecycle tracking
  • 👤 User Tracking: User identification and segmentation
  • 🔒 Security: Built-in data encryption and privacy controls

Getting Started ​

Service Types ​

Features ​

Release Information ​

Installation ​

bash
npm install @your-org/web-sdk
bash
yarn add @your-org/web-sdk
html
<script src="https://cdn.your-org.com/sdk/v1/sdk.min.js"></script>

Basic Usage ​

Initialize SDK ​

javascript
import SDK from "@your-org/web-sdk";

const sdk = new SDK({
  apiKey: "your-api-key",
  environment: "production",
  serviceType: "informational",
});

sdk.initialize();

Track Custom Events ​

javascript
sdk.trackEvent("button_click", {
  button_id: "signup",
  page: "homepage",
});

Identify Users ​

javascript
sdk.setUser({
  userId: "user123",
  attributes: {
    role: "citizen",
    department: "health",
  },
});

Framework Integration ​

React ​

jsx
import { useEffect } from "react";
import SDK from "@your-org/web-sdk";

function App() {
  useEffect(() => {
    const sdk = new SDK({
      apiKey: process.env.REACT_APP_SDK_KEY,
      environment: "production",
    });

    sdk.initialize();

    return () => sdk.destroy();
  }, []);

  return <div>My App</div>;
}

Vue ​

vue
<script setup>
import { onMounted, onUnmounted } from "vue";
import SDK from "@your-org/web-sdk";

let sdk;

onMounted(() => {
  sdk = new SDK({
    apiKey: import.meta.env.VITE_SDK_KEY,
    environment: "production",
  });

  sdk.initialize();
});

onUnmounted(() => {
  sdk?.destroy();
});
</script>

Angular ​

typescript
import { Component, OnInit, OnDestroy } from "@angular/core";
import SDK from "@your-org/web-sdk";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit, OnDestroy {
  private sdk: any;

  ngOnInit() {
    this.sdk = new SDK({
      apiKey: environment.sdkKey,
      environment: "production",
    });

    this.sdk.initialize();
  }

  ngOnDestroy() {
    this.sdk?.destroy();
  }
}

Browser Support ​

BrowserVersion
ChromeLast 2 versions
FirefoxLast 2 versions
SafariLast 2 versions
EdgeLast 2 versions
IE11+ (with polyfills)

Bundle Size ​

  • Full: ~45KB (15KB gzipped)
  • Core only: ~25KB (8KB gzipped)
  • Tree-shakeable: Import only what you need

TypeScript Support ​

Full TypeScript definitions included:

typescript
import SDK, {
  SDKConfig,
  EventData,
  UserData,
  TransactionConfig,
} from "@your-org/web-sdk";

const config: SDKConfig = {
  apiKey: "key",
  environment: "production",
};

const sdk = new SDK(config);

Features Overview ​

Informational Service ​

Perfect for content sites, information portals, and documentation.

Key Features:

  • Automatic page view tracking
  • Custom event tracking
  • User session management
  • Real-time analytics

Learn more →

Transactional Service ​

Ideal for applications with user transactions and completions.

Key Features:

  • Transaction lifecycle tracking
  • Step-by-step progress monitoring
  • Completion rate analytics
  • Abandonment tracking

Learn more →

Sentiments Widget ​

Collect user feedback and satisfaction ratings.

Key Features:

  • Customizable appearance
  • Event-triggered surveys
  • Real-time webhook notifications
  • Behavioral flows

Learn more →

Configuration Options ​

javascript
const sdk = new SDK({
  // Required
  apiKey: "your-api-key",

  // Optional
  environment: "production", // 'test' | 'production'
  serviceType: "informational", // 'informational' | 'transactional'

  // Analytics
  autoTrack: true, // Auto-track page views
  trackSPA: true, // Track SPA navigation

  // Privacy
  anonymizeIP: true,
  respectDNT: true, // Respect Do Not Track

  // Performance
  batchSize: 10,
  batchInterval: 5000, // ms

  // Debug
  debug: false,
  verbose: false,
});

Performance Tips ​

  1. Lazy Load: Load SDK asynchronously
  2. Tree Shake: Import only needed modules
  3. Batch Events: Events are batched automatically
  4. Use CDN: Use CDN for faster global delivery

Security ​

  • 🔒 HTTPS-only transmission
  • 🔐 API key authentication
  • 🛡️ CORS protection
  • 🔏 Data encryption
  • 🚫 XSS protection

Security Guidelines →

Need Help? ​

Examples ​

Browse our example implementations:

Released under the MIT License.

Copyright © 2024-present