Migrate all analytics usages to useAnalytics composable and remove legacy plugin

[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 exposing $analytics globally via this.$analytics in components and Vue.$analytics in Vuex actions. The useAnalytics composable exists from Phase 1 but is not yet used.

Desired behavior

All analytics tracking should use the useAnalytics() composable. The legacy plugin should be completely removed. Full test suite should pass with no regressions.

Deliverables

Migration:

• update ~50 files to replace this.$analytics.* and Vue.$analytics.* with the composable pattern
• update shared/app.js to remove the analytics plugin initialization
• delete shared/analytics/plugin.js
• verify useToken.js composable compatibility (it currently accesses $analytics)

Files to update include:

• Vuex actions: channelEdit/vuex/currentChannel/actions.js, channelList/vuex/channelList/actions.js
• Channel edit components: QuickEditModal, EditModal, EditView, DetailsTabView, EditList, AssessmentEditor, AnswersEditor, HintsEditor
• Clipboard components: index.vue, ContentNodeOptions.vue
• File components: FileUpload.vue, SubtitlesList.vue
• Channel list components: ChannelStar, ChannelList, StudioMyChannels, ChannelListIndex
• Shared components: AppBar, MainNavigationDrawer, CopyToken, ChannelDetailsModal
• Other: NodePanel, CurrentTopicView, TreeViewBase, SearchOrBrowseWindow, ContentNodeOptions, CompletionOptions

Testing:

• all existing unit tests must pass
• manual verification of key user flows (channel editing, clipboard, file uploads, channel list)
• GTM dataLayer should receive events correctly in browser dev tools

Technical context

Usage pattern change:

Before:

this.$analytics.trackClick('clipboard', 'Copy');

After:

import useAnalytics from 'shared/composables/useAnalytics';

export default {
  setup() {
    const { trackClick } = useAnalytics();
    return { trackClick };
  },
  methods: {
    handleClick() {
      this.trackClick('clipboard', 'Copy');
      // other event handling -- do not create extra methods just to call `trackClick` unless necessary
    }
  }
}

Prerequisites:

• Phase 1 must be complete: useAnalytics.js exists and is tested
• Full test suite passing before starting migration

Notes

• This is Phase 2 - depends on completion of Phase 1
• Consider batching PRs by functional area (e.g., channel edit, clipboard, channel list) to reduce review burden
• Vuex actions need special handling since they don't have setup()
• The composable can coexist with the plugin temporarily if gradual migration is needed
• Rollback plan: restore plugin from git history if critical issues arise

Value add

• Completes the migration to modern Vue 3 patterns
• Removes legacy plugin code, reducing maintenance burden
• Improves code consistency across the codebase
• Better testability for future analytics enhancements

Possible tradeoffs

• Large surface area (~50 files) increases risk of merge conflicts
• May require multiple PRs for manageable review
• Components using Options API need setup() added, which changes their structure
• Vuex actions accessing composables requires careful handling

AI Usage

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

[bjester]

We may not wish to remove the analytics plugin too soon. The composable refactored the existing analytics class into itself, so they both share the same analytics core. #5847