Giter Club home page Giter Club logo

vue-analytics's Introduction

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
   */

vue-analytics's People

Contributors

dependabot[bot] avatar edmundyipll avatar nemoalex avatar r-portas avatar reverland avatar screamz avatar tarciosaraiva avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

vue-analytics's Issues

Add information to documentation

By default the views tracker sends the name of the route when it is integrated with vue-router. The doc mentions the possibility of customizing the name of the view but not how to indicate the path of the route. Based on your code I used the usePathAnalytics parameter to fix this problem. It's the best pratice ? thanks for your help

Question on SPA at a segment

Hello! Thanks for your work on this plugin ๐Ÿ‘๐Ÿผ

I was wondering if you could help me with a question on usage in my app. I have a Vue + Vue Router app that is loaded at https://example.com/dashboard#/. When I use vue-analytics to automatically pass data to Google Analytics, the only page that exists in Google Analytics is /dashboard.

screenshot 2017-05-17 11 48 23

Should I be seeing different pages in my GA reporting? And if so, do you have any advice on what I might be doing wrong?

Thank you!

Only works for Applications

Could the readme be made clearer that this only supports applications, or alternatively a change be made to support website sends (pageviews) as well as application sends (screenviews)?

Failing to load minified js

Having a weird issue with loading this into my project.

Uncaught TypeError: n.afterEach is not a function at d (vue-analytics.min.js?394b:1)

I am including the plugin as directed in the readme but when i run my main application it crashes on the above error.

Hope you can help. Let me know what else you would like to see.

IP Anonymization

Hello,
Thanks for the library, how can we set IP Anonymization for the tracking?

Pass router parameters?

Hi. Great plugin, thanks for making it. Installation was very easy.

My current issue, though, is that, if I just use the default router integration which passes the route name to GA, none of the route parameters are sent. e.g. visiting /#/users/1 only sends /users to GA, instead of /users/1. Is there a way to make it pass the params, too, other than manually calling this.$ua.trackView(constructedScreenName) myself?

Path of the active page is always '/' if router mode is 'hash' ?

Hi,

First, thanks for you plugin :)

When browse my Vuejs App, and checking my GG analytics real time dashboard on a second panel, the active path is always '/', even if my app real path is '/#/my-page'

My vue-router configuration mode is set to 'hash'.
Is it the issue ?

Best regards,

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.