Analytics Event Tracker

Build a Nuxt.js plugin that provides a utility for tracking user interactions in a Nuxt application with Google Analytics. The utility should be accessible throughout the application and track various types of user events.

Requirements

Create a plugin that provides an EventTracker class with the following capabilities:

1. Button Click Tracking: Track button clicks with custom event data including the button label and page location
2. Form Submission Tracking: Track form submissions with the form name and submission status
3. Video Interaction Tracking: Track video play/pause events with video title and current timestamp

The EventTracker should be instantiated once and made available throughout the Nuxt application via a plugin injection. It should leverage the analytics integration already configured in the application.

Capabilities

Button Click Tracking

• When tracking a button with label "Subscribe" clicked on the "/pricing" page, it records an event with category "Button", action "click", and label "Subscribe - /pricing" @test

Form Submission Tracking

• When tracking a form named "Contact Form" with status "success", it records an event with category "Form", action "submit", and label "Contact Form - success" @test

Video Interaction Tracking

• When tracking a video titled "Product Demo" with action "play" at 30 seconds, it records an event with category "Video", action "play", label "Product Demo", and value 30 @test

Implementation

@generates

API

/**
 * EventTracker class for tracking various user interactions
 */
class EventTracker {
  /**
   * Tracks a button click event
   * @param {string} buttonLabel - The label/text of the button
   * @param {string} currentPage - The current page path where the button was clicked
   */
  trackButtonClick(buttonLabel, currentPage) {}

  /**
   * Tracks a form submission event
   * @param {string} formName - The name of the form
   * @param {string} status - The submission status (e.g., 'success', 'error')
   */
  trackFormSubmit(formName, status) {}

  /**
   * Tracks a video interaction event
   * @param {string} videoTitle - The title of the video
   * @param {string} action - The action performed (e.g., 'play', 'pause')
   * @param {number} timestamp - The current video timestamp in seconds
   */
  trackVideoInteraction(videoTitle, action, timestamp) {}
}

/**
 * Nuxt plugin that injects the EventTracker instance
 * Makes tracker available as $eventTracker in Vue components and ctx.app.$eventTracker in Nuxt contexts
 */
export default function (context, inject) {}

Dependencies { .dependencies }

@nuxtjs/google-analytics { .dependency }

Provides Google Analytics integration for Nuxt.js applications with the $ga instance accessible throughout the application.

@satisfied-by