Multi-Tenant Analytics Configuration

Configure a Nuxt.js application to support Google Analytics tracking for a multi-tenant SaaS platform where each client organization has its own tracking ID.

Requirements

The application needs to:

1. Load the appropriate analytics tracking ID dynamically based on the current tenant
2. Retrieve the tenant information from an API endpoint during application initialization
3. Configure the analytics module to use the dynamically loaded tracking ID
4. Ensure the tracking works correctly for different tenants without hardcoding IDs

Context

You're building a multi-tenant SaaS application where multiple client organizations use the same codebase. Each organization needs their own Google Analytics tracking to monitor their users' behavior independently. The tenant information, including the analytics tracking ID, is stored in a database and needs to be fetched at runtime.

An API service is already available with the following method:

// services/tenant-api.js
export async function fetchTenantConfig(tenantId) {
  // Returns: { analyticsId: 'UA-XXXXXX-X', name: 'Client Name', ... }
  const response = await fetch(`/api/tenant/${tenantId}/config`);
  return response.json();
}

The tenant ID is available in the Nuxt context via context.route.query.tenant or can be read from context.$config.tenantId.

Implementation Tasks

1. Configure the analytics module in nuxt.config.js to support dynamic tracking ID loading
2. Implement the logic to fetch the tenant's tracking ID asynchronously
3. Write a test to verify the configuration works correctly for different tenant IDs

Test Cases

• Given a tenant with ID "client-a" and tracking ID "UA-123456-1", the analytics should initialize with "UA-123456-1" @test
• Given a tenant with ID "client-b" and tracking ID "UA-789012-2", the analytics should initialize with "UA-789012-2" @test

Constraints

• The tracking ID must be loaded dynamically at runtime, not hardcoded in the configuration
• The solution should work in production environments where tenant IDs vary by deployment
• You must use the provided API service to fetch tenant configuration

Dependencies { .dependencies }

@nuxtjs/google-analytics { .dependency }

Provides Google Analytics integration for Nuxt.js applications with support for dynamic configuration.

@satisfied-by

@generates