Create useAnalytics composable with comprehensive tests

[bjester]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Current behavior

The analytics system uses a Vue 2 plugin pattern (shared/analytics/plugin.js) that exposes $analytics globally. This doesn't align with Vue 3 Composition API patterns used elsewhere in the codebase.

Desired behavior

Create a modern Vue 3 composable (useAnalytics) that provides identical functionality to the current plugin, with comprehensive unit tests achieving >90% code coverage.

Deliverables

The useAnalytics composable should:

• export all 6 methods from the existing plugin: trackEvent, trackAction, trackClick, trackCurrentChannel, push, reset
• maintain identical method signatures and behavior for drop-in replacement
• use Vue 3's getCurrentInstance() to access the Vue context
• access the GTM dataLayer through Vue context or window fallback
• include the 5-minute automatic reset interval from the original plugin
• be located at shared/composables/useAnalytics.js

Unit tests should:

• be located at shared/composables/__tests__/useAnalytics.spec.js
• test all 6 public methods with various inputs
• mock the dataLayer for isolation
• test the reset interval behavior
• verify the window.dataLayer fallback works
• achieve >90% code coverage

Technical context

Current plugin: contentcuration/contentcuration/frontend/shared/analytics/plugin.js (187 lines)

Existing composable patterns to follow:

• useSnackbar.js - Simple store wrapper pattern
• useToken.js - Uses getCurrentInstance() for Vue context access (line 8)

Test patterns:

• Tests located in __tests__/ directories alongside source files
• Jest framework with Vue Test Utils

Notes

• This is Phase 1 of a 2-phase refactor
• Phase 2 will migrate all 50+ usage sites and delete the old plugin
• The composable should coexist with the plugin temporarily
• Method signatures must match exactly for easy migration in Phase 2
• The reset interval should be cleaned up on component unmount

Value add

• Aligns analytics with Vue 3 Composition API patterns used throughout the codebase
• Improves testability - composables are easier to unit test than plugins
• Better tree-shaking and code organization
• Sets foundation for Phase 2 migration

Possible tradeoffs

• Components using Options API will need to add setup() functions in Phase 2
• Vuex actions need special handling (no setup() available)
• ~50 files will need updates in Phase 2
• The reset interval management is more complex in a composable pattern

AI Usage

This issue was written by AI under the guidance and review of @bjester