User Interaction Tracker

A Nuxt.js component that tracks various user interactions on a blog post page.

Requirements

Create a Vue component named BlogPost.vue that tracks the following user interactions using analytics events:

1. Video playback: When a user clicks the play button on an embedded video, track an event with:

   • A category for the content type
   • An action for the interaction
   • A label with the video title
   • A numeric value for the video duration in seconds

2. File downloads: When a user clicks a download button, track an event with:

   • A category for the interaction type
   • An action for the behavior
   • A label with the file name

3. Form submissions: When a user submits the newsletter subscription form, track an event with:

   • A category for the form type
   • An action for the submission
   • A label describing the form

4. Reading engagement: When a user scrolls to the end of the article, track an event with:

   • A category for content engagement
   • An action for completion
   • A label with the article title
   • A numeric value for engagement score (time spent in seconds divided by 10, rounded down)

The component should include:

• A video player section with a play button
• A download button for a resource file
• A newsletter subscription form with a submit button
• Content that can be scrolled
• Event tracking for all four interaction types

Test Cases

• Playing a video titled "Introduction to Analytics" with duration 120 seconds triggers an event @test
• Clicking the download button for "guide.pdf" triggers an event @test
• Submitting the newsletter form triggers an event @test
• Reaching article end after 250 seconds triggers an event with engagement score 25 @test

Implementation

@generates

Dependencies { .dependencies }

@nuxtjs/google-analytics { .dependency }

Provides Google Analytics integration for Nuxt.js applications, enabling event tracking through the $ga instance.