import type { Router, RouteLocationNormalized } from "vue-router"; import type { ConsentManager } from "../core/consent-manager"; import type { GA4RouteEvent } from "../core/types"; /** * Options for Vue Router tracking middleware */ export interface RouterMiddlewareOptions { /** * Called before tracking. Return `false` to skip tracking for this navigation. * Useful for excluding certain routes or implementing custom logic. */ beforeTrack?: (to: RouteLocationNormalized, from: RouteLocationNormalized) => boolean | void | Promise; /** * Called after tracking completes. * Receives the route and event name (if a ga4Event was fired). * Can be async — rejections are caught and logged. */ afterTrack?: (to: RouteLocationNormalized, eventName?: string) => void | Promise; } /** * Setup automatic page and event tracking with Vue Router. * * Automatically tracks: * - Page views on every navigation * - Custom events defined in route meta (`ga4Event`) * - Custom page titles from route meta (`ga4Title`) * * @example * ```typescript * // main.ts * import { createConsentManager } from '@structured-world/vue-privacy'; * import { setupRouterTracking } from '@structured-world/vue-privacy/vue'; * import router from './router'; * * const manager = createConsentManager({ gaId: 'G-XXX', sendPageView: false }); * await manager.init(); * * setupRouterTracking(router, manager, { * beforeTrack: (to) => { * // Skip tracking for admin routes * if (to.path.startsWith('/admin')) return false; * }, * afterTrack: (to, eventName) => { * console.log('Tracked:', to.path, eventName); * } * }); * ``` * * @example * ```typescript * // router/index.ts — route with auto-event * const routes = [ * { * path: '/signup/complete', * component: SignupComplete, * meta: { * ga4Title: 'Registration Complete', * ga4Event: { name: 'sign_up', params: { method: 'email' } } * } * } * ] * ``` * * @returns Cleanup function to unregister the afterEach hook */ export declare function setupRouterTracking(router: Router, manager: ConsentManager, options?: RouterMiddlewareOptions): () => void; /** * Type augmentation for Vue Router to support GA4RouteMeta. * Import this module to get type hints in route definitions. * * NOTE: This augmentation is only applicable when `vue-router` is installed * and available in your TypeScript project. Because this file imports * `vue-router` types and declares a module augmentation for `"vue-router"`, * you must have `vue-router` installed for type-checking of the router * integration to succeed. * * The base Vue plugin works without `vue-router` at runtime; only the router * tracking integration and these type augmentations require `vue-router`. * * @example * ```typescript * // In your router file, add: * import '@structured-world/vue-privacy/vue'; * * // Now routes will have type hints for GA4 meta: * const routes = [ * { * path: '/', * meta: { * ga4Title: 'Home', // TypeScript knows this! * ga4Event: { name: 'page_view' } * } * } * ] * ``` */ declare module "vue-router" { interface RouteMeta { /** Custom page title for GA4 page_view event */ ga4Title?: string; /** GA4 event to fire on navigation */ ga4Event?: GA4RouteEvent; } }