Screen View Tracking Plugin

Build a Nuxt.js plugin that implements screen view tracking for different sections of an application. The plugin should track when users navigate to key application screens such as user profiles, settings pages, and help documentation.

Requirements

Your implementation should:

1. Create a plugin that provides screen view tracking functionality
2. Track screen views using simple string names (e.g., "Profile", "Settings")
3. Track screen views with detailed metadata including screen name
4. Provide helper methods accessible throughout the application for manual screen tracking
5. Use the plugin in components to track screen transitions

Test Cases

• When the tracking helper is called with a screen name string, it logs a screen view @test
• When the tracking helper is called with a screen object containing metadata, it logs the screen view with all provided details @test
• The tracking functionality is accessible in Vue components through the plugin injection @test

Implementation

@generates

API

/**
 * Nuxt plugin that provides screen view tracking functionality
 * @param {Object} context - Nuxt context
 * @param {Function} inject - Nuxt inject function
 */
export default function (context, inject) {
  // IMPLEMENTATION HERE

  /**
   * Tracks a screen view with a simple screen name
   * @param {string} screenName - Name of the screen
   */
  const trackScreenView = (screenName) => {
    // IMPLEMENTATION HERE
  };

  /**
   * Tracks a screen view with detailed metadata
   * @param {Object} screenData - Screen information object
   */
  const trackScreenViewWithData = (screenData) => {
    // IMPLEMENTATION HERE
  };

  // Inject methods into context
  inject('trackScreen', trackScreenView);
  inject('trackScreenData', trackScreenViewWithData);
}

Dependencies { .dependencies }

@nuxtjs/google-analytics { .dependency }

Provides Google Analytics integration with screen view tracking capabilities.