Analytics Dashboard Component

Overview { .overview }

Build a Nuxt.js 2 application that tracks user interactions and page navigation across different parts of the application lifecycle. The application should demonstrate analytics tracking in components, middleware, and plugins.

Requirements { .requirements }

Create a user dashboard page with the following features:

1. Dashboard Component (pages/dashboard.vue):

   • Display a welcome message with the user's name
   • Include a button labeled "Track Feature Usage" that records a button click event
   • When the page loads, track a page view for the dashboard

2. Navigation Middleware (middleware/analytics.js):

   • Create middleware that tracks navigation events
   • For each route visited, record a custom event indicating route navigation
   • The middleware should run on every page

3. Analytics Plugin (plugins/analytics-helper.js):

   • Create a plugin that provides a helper function to track errors
   • The helper should be accessible globally as $trackError
   • When called with an error message, it should track an event with category "error"

4. Error Tracking:

   • In the dashboard component, add a button labeled "Simulate Error"
   • When clicked, use the $trackError helper to track an error event with the message "Test error triggered"

Technical Requirements { .requirements }

• Use Nuxt.js 2 framework
• Implement proper component lifecycle hooks
• Access analytics functionality in middleware and plugins
• Ensure all tracking calls use the appropriate analytics API

Dependencies { .dependencies }

@nuxtjs/google-analytics { .dependency }

Provides Google Analytics integration for Nuxt.js applications.

Test Cases { .tests }

Test 1: Dashboard page displays correctly @test { .test }

File: pages/dashboard.test.js { .test-file-name }

import { mount } from '@vue/test-utils'
import Dashboard from './dashboard.vue'

describe('Dashboard Page', () => {
  test('displays welcome message and buttons', () => {
    const wrapper = mount(Dashboard, {
      mocks: {
        $ga: {
          page: jest.fn(),
          event: jest.fn()
        },
        $trackError: jest.fn()
      }
    })

    expect(wrapper.text()).toContain('Welcome')
    expect(wrapper.find('button').exists()).toBe(true)
  })
})

Test 2: Middleware tracks navigation @test { .test }

File: middleware/analytics.test.js { .test-file-name }

import analyticsMiddleware from './analytics.js'

describe('Analytics Middleware', () => {
  test('tracks route navigation', () => {
    const mockContext = {
      route: { path: '/dashboard' },
      $ga: {
        event: jest.fn()
      }
    }

    analyticsMiddleware(mockContext)

    expect(mockContext.$ga.event).toHaveBeenCalled()
  })
})

Test 3: Error tracking plugin works @test { .test }

File: plugins/analytics-helper.test.js { .test-file-name }

describe('Analytics Helper Plugin', () => {
  test('trackError helper is available and tracks errors', () => {
    const mockContext = {
      $ga: {
        event: jest.fn()
      }
    }

    // Simulate plugin injection
    const trackError = (message) => {
      mockContext.$ga.event({
        eventCategory: 'error',
        eventAction: message
      })
    }

    trackError('Test error')

    expect(mockContext.$ga.event).toHaveBeenCalledWith(
      expect.objectContaining({
        eventCategory: 'error'
      })
    )
  })
})