Basic Integration

Introduction

This tutorial will guide you through the process of integrating Techsstuff Analytics into your application. By the end, you'll have a fully functional analytics implementation that tracks page views, events, and user interactions.

Step 1: Install the SDK

First, install the Techsstuff SDK using your preferred package manager:

npm install @techsstuff/sdk

For CDN usage, you can include the following script tag in your HTML:

<script src="https://cdn.techsstuff.com/sdk/v1/techsstuff.min.js"></script>

Step 2: Initialize the SDK

Once installed, you need to initialize the SDK with your API key. You can find your API key in the Techsstuff Dashboard under Settings > API Keys.

import { TechsstuffClient } from '@techsstuff/sdk';

// Initialize the client
const client = new TechsstuffClient({
  apiKey: 'YOUR_API_KEY',
  environment: 'production' // or 'sandbox' for testing
});

// Now you can use the client to track events, etc.

For CDN usage, initialize the SDK as follows:

<script>
  window.techsstuff.init({
    apiKey: 'YOUR_API_KEY',
    environment: 'production'
  });
</script>

Step 3: Tracking Page Views

The SDK automatically tracks page views in most cases. However, for single-page applications (SPAs), you'll need to manually track page changes.

// Call this whenever the page changes in your SPA
client.trackPageView({
  url: window.location.href,
  title: document.title,
  referrer: document.referrer
});

Step 4: Tracking Custom Events

Custom events allow you to track specific user interactions with your application. Here's how to track a custom event:

// Track a button click
client.trackEvent({
  name: 'button_click',
  properties: {
    button_id: 'signup',
    page: '/landing'
  }
});

// Track a form submission
client.trackEvent({
  name: 'form_submit',
  properties: {
    form_id: 'contact',
    success: true
  }
});

Step 5: Identifying Users

To associate events with specific users, you can identify them using the SDK:

// Call this when a user logs in
client.identify({
  userId: 'user-123',
  traits: {
    name: 'John Doe',
    email: '[email protected]',
    plan: 'premium',
    signupDate: new Date('2023-01-15')
  }
});

After identifying a user, all subsequent events will be associated with this user until they log out or the session expires.

Step 6: Verifying Your Implementation

To verify that your implementation is working correctly, you can enable debug mode during development:

// Enable debug mode
const client = new TechsstuffClient({
  apiKey: 'YOUR_API_KEY',
  environment: 'production',
  debug: true // Logs all tracking events to the console
});

You can also check the Techsstuff Dashboard to see if events are being recorded. There might be a slight delay before events appear in the dashboard.

Conclusion

Congratulations! You've successfully integrated Techsstuff Analytics into your application. You can now track page views, custom events, and identify users to gain valuable insights into user behavior.

For more advanced usage, check out our other tutorials on funnel analysis, cohort analysis, and custom dashboards.

Next Steps