All Projects → ScreamZ → Vue Analytics

ScreamZ / Vue Analytics

Licence: apache-2.0
Google Universal Analytics support in Vue.js

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Analytics

Vue Bootstrap4 Table
Advanced table based on Vue 2 and Bootstrap 4 ⚡️
Stars: ✭ 187 (-12.21%)
Mutual labels:  vuejs2
Vue Blocks
Vue2 dataflow graph editor
Stars: ✭ 201 (-5.63%)
Mutual labels:  vuejs2
Mobile App Landingpage Template
📱 Free to use static generated website template for your mobile app
Stars: ✭ 208 (-2.35%)
Mutual labels:  google-analytics
React Tracker
React specific tracking library, Track user interaction with minimal API!
Stars: ✭ 191 (-10.33%)
Mutual labels:  google-analytics
Feathers Vue
A boiler plate template using Feathers with Email Verification, Vue 2 with Server Side Rendering, stylus, scss, jade, babel, webpack, ES 6-8, login form, user authorization, and SEO
Stars: ✭ 195 (-8.45%)
Mutual labels:  vuejs2
Vue Easytable
🍉 Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox ...
Stars: ✭ 2,501 (+1074.18%)
Mutual labels:  vuejs2
Awesome Vue Storefront
🎉 A curated list of awesome things related to Vue Storefront
Stars: ✭ 186 (-12.68%)
Mutual labels:  vuejs2
Analytics
UNMAINTAINED! - Complete Google Analytics, Mixpanel, KISSmetrics (and more) integration for Meteor
Stars: ✭ 211 (-0.94%)
Mutual labels:  google-analytics
Todo Vue
Code for YouTube series on building a Todo App in Vue.js
Stars: ✭ 199 (-6.57%)
Mutual labels:  vuejs2
Vuent
🎨 Vue.js components implementing Microsoft Fluent Design
Stars: ✭ 207 (-2.82%)
Mutual labels:  vuejs2
Json Schema Editor
JSON Schema Editor is an intuitive editor for JSON schema. It provides a tree view to present the structure of schema, and a property inspector to edit the properties of schema element. Develop with Vue.js 2 and Firebase.
Stars: ✭ 194 (-8.92%)
Mutual labels:  vuejs2
Lvyou
🎒Vue.js 初步进阶案例,路由懒加载,进入页面前登录判断,返回导航判断,RestAPI接口使用,组件封装,Vuex状态封装,keep-alive页面缓存等功能
Stars: ✭ 195 (-8.45%)
Mutual labels:  vuejs2
Easy Dnd
A drag and drop implementation for Vue.js 2 https://codesandbox.io/s/easy-dnd-demo-9mbij https://codesandbox.io/s/easy-dnd-demo-2-xnqbz
Stars: ✭ 202 (-5.16%)
Mutual labels:  vuejs2
Vue Auth
A simple light-weight authentication library for Vue.js
Stars: ✭ 2,272 (+966.67%)
Mutual labels:  vuejs2
Paascloud Login Web
模拟商城,完整的购物流程、后端运营平台,使用 spring cloud + vue 全家桶实现快速搭建企业级微服务项目
Stars: ✭ 207 (-2.82%)
Mutual labels:  vuejs2
Goaccess
GoAccess is a real-time web log analyzer and interactive viewer that runs in a terminal in *nix systems or through your browser.
Stars: ✭ 14,096 (+6517.84%)
Mutual labels:  google-analytics
Vue2vis
A Vuejs 2 adapter for Visjs
Stars: ✭ 201 (-5.63%)
Mutual labels:  vuejs2
Recall App
🖼️ An open-source and decentralized alternative to Google Photos built on top of Blockstack
Stars: ✭ 212 (-0.47%)
Mutual labels:  vuejs2
Magento2 Google Tag Manager
Google Tag Manager is a user-friendly, yet powerful and cost-effective solution that is a must-have integration for every Magento store. It simplifies the process of adding and managing third-party JavaScript tags. With dozens of custom events and hundreds of data points our extensions the #1 GTM solution for Magento.
Stars: ✭ 208 (-2.35%)
Mutual labels:  google-analytics
Vue Generate Component
Vue js component generator
Stars: ✭ 206 (-3.29%)
Mutual labels:  vuejs2

Vue Analytics

Simple implementation of Google Analytics in Vue.js

Standard - JavaScript Style Guide


This plugin will helps you in your common analytics tasks. Dispatching events, register some dimensions, metric and track views from Vue components.

Requirements

  • Vue.js. >= 2.0.0
  • Google Analytics account. To send data to

Optionnals dependencies

  • Vue Router >= 2.x - In order to use auto-tracking of screens

Configuration

npm install vue-ua -S or yarn add vue-ua if you use Yarn package manager

Here is an example of configuration, compose with it on your own :

import VueAnalytics from 'vue-ua'
import VueRouter from 'vue-router'
const router = new VueRouter({routes, mode, linkActiveClass})

Vue.use(VueAnalytics, {
  appName: '<app_name>', // Mandatory
  appVersion: '<app_version>', // Mandatory
  trackingId: '<your_tracking_id>', // Mandatory
  debug: true, // Whether or not display console logs debugs (optional)
  vueRouter: router, // Pass the router instance to automatically sync with router (optional)
  ignoredViews: ['homepage'], // If router, you can exclude some routes name (case insensitive) (optional)
  trackPage: true|false, // Whether you want page changes to be recorded as pageviews (website) or screenviews (app), default: false
  createOptions: { // Optional, Option when creating GA tracker, ref: https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference
    siteSpeedSampleRate: 10, 
  },
  globalDimensions: [ // Optional
    {dimension: 1, value: 'MyDimensionValue'},
    {dimension: 2, value: 'AnotherDimensionValue'}
  ],
  globalMetrics: [ // Optional
      {metric: 1, value: 'MyMetricValue'},
      {metric: 2, value: 'AnotherMetricValue'}
    ]
})

Documentation

Once the configuration is completed, you can access vue analytics instance in your components like that :

export default {
    name: 'MyComponent',
    data () {
      return {
        someData: false
      }
    },
    methods: {
      onClick: function() {
        this.$ua.trackEvent('Banner', 'Click', 'I won money!')
        // OR
        this.$analytics.trackEvent('Banner', 'Click', 'I won money!')
      }
    },
    mounted () {
      this.$ua.trackView('MyScreenName')
    }
}

You 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 somewhere else than a component's scope.

Sync analytics with your router

Thanks to vue-router guards, you can automatically dispatch new screen views on router change ! To use this feature, you just need to inject the router instance on plugin initialization.

This feature will generate the view name according to a priority rule :

  • If you defined a meta field for you route named analytics this will take the value of this field for the view name.
  • Otherwise, if the plugin don't have a value for the meta.analytics it will fallback to the internal route name.

Most 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.

Example :

const myRoute = {
  path: 'myRoute',
  name: 'MyRouteName',
  component: SomeComponent,
  meta: {analytics: 'MyCustomValue'}
}

This will use MyCustomValue as the view name.

API reference

trackEvent (category, action = null, label = null, value = null)

  /**
   * Dispatch an analytics event.
   * Format is the same as analytics classical values.
   *
   * @param category
   * @param action
   * @param label
   * @param value
   */

trackView (screenName, trackPage = false)

 /**
   * Dispatch a view using the screen name
   * 
   * @param screenName {string}
   * @param trackPage {boolean} - Whether you want the dispatched view to be recorded as pageview (website) or screenview (app)
   */

trackTiming (timingCategory, timingVar, timingValue, timingLabel = null)

/**
   * Track an user timing to measure periods of time.
   *
   * @param {string} timingCategory - A string for categorizing all user timing variables into logical groups (e.g. 'JS Dependencies').
   * @param {string} timingVar -  A string to identify the variable being recorded (e.g. 'load').
   * @param {number} timingValue - The number of milliseconds in elapsed time to report to Google Analytics (e.g. 20).
   * @param {string|null} timingLabel -  A string that can be used to add flexibility in visualizing user timings in the reports (e.g. 'Google CDN').
   */

injectGlobalDimension (dimensionNumber, value)

  /**
   * Inject a new GlobalDimension that will be sent every time.
   *
   * Prefer inject through plugin configuration.
   *
   * @param {int} dimensionNumber
   * @param {string|int} value
   * 
   * @throws Error - If already defined
   */

injectGlobalMetric (metricNumber, value)

 /**
   * Inject a new GlobalMetric that will be sent every time.
   *
   * Prefer inject through plugin configuration.
   *
   * @param {int} metricNumber
   * @param {string|int} value
   * 
   * @throws Error - If already defined
   */

trackException (description, isFatal = false)

  /**
   * Track an exception that occurred in the application.
   *
   * @param {string} description - Something describing the error (max. 150 Bytes)
   * @param {boolean} isFatal - Specifies whether the exception was fatal
   */

changeSessionLanguage (code)

  /**
   * Set the current session language, use this if you change lang in the application after initialization.
   *
   * @param {string} code - Must be like in that : http://www.lingoes.net/en/translator/langcode.htm
   */
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].