Analytics Event Tracker Component

Build a Nuxt.js component that tracks multiple user interactions efficiently using batched event tracking to optimize network usage.

Requirements

Create a user activity tracking component for a Nuxt.js application that monitors and reports user interactions on a dashboard page. The component should:

1. Track multiple types of user interactions including button clicks, filter changes, and tab switches
2. Use batched analytics events to minimize network overhead when reporting these interactions
3. Ensure all tracked events share the same category ("Dashboard Interaction")
4. Track the following specific actions:
   • Button clicks with the action "button_click" and the button label
   • Filter selections with the action "filter_change" and the filter name
   • Tab switches with the action "tab_switch" and the tab name

Implementation Guidelines

• Create a Vue component named DashboardTracker.vue that implements the tracking functionality
• The component should provide methods to track each type of interaction
• All analytics events should be sent in batches for optimal performance
• Include a simple UI with at least 2 buttons, 1 filter dropdown, and 2 tabs to demonstrate the tracking

Test Cases

• Tracking a button click sends a batched event with category "Dashboard Interaction", action "button_click", and the button label @test
• Tracking multiple interactions in sequence uses event batching @test
• Filter changes are tracked with category "Dashboard Interaction" and action "filter_change" @test

Dependencies { .dependencies }

@nuxtjs/google-analytics { .dependency }

Provides Google Analytics integration for Nuxt.js applications with event tracking and batching capabilities.

Output

@generates

The component should be a single-file Vue component that demonstrates the use of batched event tracking for multiple user interactions.