{"id":13563885,"url":"https://github.com/ScreamZ/vue-analytics","last_synced_at":"2025-04-03T20:32:04.810Z","repository":{"id":55150668,"uuid":"73803666","full_name":"ScreamZ/vue-analytics","owner":"ScreamZ","description":"Google Universal Analytics support in Vue.js","archived":false,"fork":false,"pushed_at":"2022-12-06T20:16:30.000Z","size":183,"stargazers_count":216,"open_issues_count":11,"forks_count":26,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T10:06:20.603Z","etag":null,"topics":["google-analytics","vue","vue-analytics","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ScreamZ.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-15T10:39:15.000Z","updated_at":"2024-06-14T08:52:39.000Z","dependencies_parsed_at":"2023-01-23T17:00:37.345Z","dependency_job_id":null,"html_url":"https://github.com/ScreamZ/vue-analytics","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScreamZ%2Fvue-analytics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScreamZ%2Fvue-analytics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScreamZ%2Fvue-analytics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScreamZ%2Fvue-analytics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ScreamZ","download_url":"https://codeload.github.com/ScreamZ/vue-analytics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247075099,"owners_count":20879386,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-analytics","vue","vue-analytics","vuejs","vuejs2"],"created_at":"2024-08-01T13:01:24.258Z","updated_at":"2025-04-03T20:32:04.442Z","avatar_url":"https://github.com/ScreamZ.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","积分","Components \u0026 Libraries","Integrations [🔝](#readme)","Integrations"],"sub_categories":["Libraries \u0026 Plugins","付款","Integrations","Vue CLI 3 Plugins","Miscellaneous"],"readme":"\u003ch1 align=\"center\"\u003e\n  Vue Analytics\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eSimple implementation of Google Analytics in Vue.js\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/feross/standard\"\u003e\u003cimg src=\"https://cdn.rawgit.com/feross/standard/master/badge.svg\" alt=\"Standard - JavaScript Style Guide\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\nThis plugin will helps you in your common analytics tasks. Dispatching events, register some dimensions, metric and track views from Vue components.\n\n# Requirements\n\n- **Vue.js.** \u003e= 2.0.0\n- **Google Analytics account.** To send data to\n\n**Optionnals dependencies**\n\n- **Vue Router** \u003e= 2.x - In order to use auto-tracking of screens\n\n\n# Configuration\n\n`npm install vue-ua -S` or `yarn add vue-ua` if you use [Yarn package manager](https://yarnpkg.com/)\n\nHere is an example of configuration, compose with it on your own :\n\n```javascript\nimport VueAnalytics from 'vue-ua'\nimport VueRouter from 'vue-router'\nconst router = new VueRouter({routes, mode, linkActiveClass})\n\nVue.use(VueAnalytics, {\n  appName: '\u003capp_name\u003e', // Mandatory\n  appVersion: '\u003capp_version\u003e', // Mandatory\n  trackingId: '\u003cyour_tracking_id\u003e', // Mandatory\n  debug: true, // Whether or not display console logs debugs (optional)\n  vueRouter: router, // Pass the router instance to automatically sync with router (optional)\n  ignoredViews: ['homepage'], // If router, you can exclude some routes name (case insensitive) (optional)\n  trackPage: true|false, // Whether you want page changes to be recorded as pageviews (website) or screenviews (app), default: false\n  createOptions: { // Optional, Option when creating GA tracker, ref: https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference\n    siteSpeedSampleRate: 10, \n  },\n  globalDimensions: [ // Optional\n    {dimension: 1, value: 'MyDimensionValue'},\n    {dimension: 2, value: 'AnotherDimensionValue'}\n  ],\n  globalMetrics: [ // Optional\n      {metric: 1, value: 'MyMetricValue'},\n      {metric: 2, value: 'AnotherMetricValue'}\n    ]\n})\n```\n\n# Documentation\n\nOnce the configuration is completed, you can access vue analytics instance in your components like that :\n\n```javascript\nexport default {\n    name: 'MyComponent',\n    data () {\n      return {\n        someData: false\n      }\n    },\n    methods: {\n      onClick: function() {\n        this.$ua.trackEvent('Banner', 'Click', 'I won money!')\n        // OR\n        this.$analytics.trackEvent('Banner', 'Click', 'I won money!')\n      }\n    },\n    mounted () {\n      this.$ua.trackView('MyScreenName')\n    }\n}\n```\n\nYou can also access the instance anywhere whenever you imported `Vue` by using `Vue.analytics`. It is especially useful when you are in a store module or\nsomewhere else than a component's scope.\n\n## Sync analytics with your router\n\nThanks to vue-router guards, you can automatically dispatch new screen views on router change !\nTo use this feature, you just need to inject the router instance on plugin initialization.\n\nThis feature will generate the view name according to a priority rule :\n- If you defined a meta field for you route named `analytics` this will take the value of this field for the view name.\n- Otherwise, if the plugin don't have a value for the `meta.analytics` it will fallback to the internal route name.\n\nMost of time the second case is enough, but sometimes you want to have more control on what is sent, this is where the first rule shine.\n\nExample : \n```javascript\nconst myRoute = {\n  path: 'myRoute',\n  name: 'MyRouteName',\n  component: SomeComponent,\n  meta: {analytics: 'MyCustomValue'}\n}\n```\n\n\u003e This will use `MyCustomValue` as the view name.\n\n## API reference\n\n### trackEvent (category, action = null, label = null, value = null)\n```javascript\n  /**\n   * Dispatch an analytics event.\n   * Format is the same as analytics classical values.\n   *\n   * @param category\n   * @param action\n   * @param label\n   * @param value\n   */\n```\n\n### trackView (screenName, trackPage = false)\n```javascript\n /**\n   * Dispatch a view using the screen name\n   * \n   * @param screenName {string}\n   * @param trackPage {boolean} - Whether you want the dispatched view to be recorded as pageview (website) or screenview (app)\n   */\n```\n\n### trackTiming (timingCategory, timingVar, timingValue, timingLabel = null)\n```javascript\n/**\n   * Track an user timing to measure periods of time.\n   *\n   * @param {string} timingCategory - A string for categorizing all user timing variables into logical groups (e.g. 'JS Dependencies').\n   * @param {string} timingVar -  A string to identify the variable being recorded (e.g. 'load').\n   * @param {number} timingValue - The number of milliseconds in elapsed time to report to Google Analytics (e.g. 20).\n   * @param {string|null} timingLabel -  A string that can be used to add flexibility in visualizing user timings in the reports (e.g. 'Google CDN').\n   */\n```\n### injectGlobalDimension (dimensionNumber, value)\n```javascript\n  /**\n   * Inject a new GlobalDimension that will be sent every time.\n   *\n   * Prefer inject through plugin configuration.\n   *\n   * @param {int} dimensionNumber\n   * @param {string|int} value\n   * \n   * @throws Error - If already defined\n   */\n```\n\n### injectGlobalMetric (metricNumber, value)\n```javascript\n /**\n   * Inject a new GlobalMetric that will be sent every time.\n   *\n   * Prefer inject through plugin configuration.\n   *\n   * @param {int} metricNumber\n   * @param {string|int} value\n   * \n   * @throws Error - If already defined\n   */\n```\n\n### trackException (description, isFatal = false)\n```javascript\n  /**\n   * Track an exception that occurred in the application.\n   *\n   * @param {string} description - Something describing the error (max. 150 Bytes)\n   * @param {boolean} isFatal - Specifies whether the exception was fatal\n   */\n```\n\n### changeSessionLanguage (code)\n```javascript\n  /**\n   * Set the current session language, use this if you change lang in the application after initialization.\n   *\n   * @param {string} code - Must be like in that : http://www.lingoes.net/en/translator/langcode.htm\n   */\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FScreamZ%2Fvue-analytics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FScreamZ%2Fvue-analytics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FScreamZ%2Fvue-analytics/lists"}