Google Analytics plugin for Vue

Overview

⚠️ This plugin will stop receiving feature requests. I will only spend time for important bug fixes. Google moved from analytics.js to its new gtag.js library and I've created a new plugin called vue-gtag. I suggest you to start using that one if you are about to create a new project.



vue-analytics

Vue plugin for Google Analytics

Why should I use it?

The plugin isn't just a wrapper of the Google Analytics API, but provides a solution to issues that most of the time you don't want to deal with or you not even know you have to deal with.

For example:

  • Automatic Google Analytics script loading
  • Automatic page tracking
  • Event batching
  • Opt-out from Google Analytics with promise support
  • Multiple domain ID tracking system
  • Vuex support
  • E-commerce API
  • Vue error exception tracking system
  • Debugging API

Requirements

Vue ^2.0.0

Articles

Google Analytics, GDPR and Vuejs

Vuejs and Google Analytics

Tips & tricks for vue-analytics

Install

npm install vue-analytics

User guide

Issues and features requests

Please drop an issue, if you find something that doesn't work, or a feature request at https://github.com/MatteoGabriele/vue-analytics/issues

Follow me on twitter @matteo_gabriele

Issues
  • New Sessions generated constantly

    New Sessions generated constantly

    Description

    Hi there,

    I'm not sure where this is coming from and as I've exhausted my resources I'm turning to you. What I'm seeing is some very weird behavior. Please take a look at this Google Analytics evaluation: screenshot 2018-02-08 14 46 39 screenshot 2018-02-08 14 46 57

    This is one user, but essentially all our user profile look the same: new session after new session after new session. Do you have any idea @MatteoGabriele ? The one thing that we didn't do so far, is give our routes names in VueRouter. I'm also not so sure why you'd need them in the first place, as the documentation doesn't give any explanation. Could that be it?

    Expected behavior

    Not have a lot of new session per user in a very small time frame.

    Actual behavior

    See above

    Environment

    [email protected]

    Reproducible Demo

    --

    Cheers, Chris

    P1: Urgent help wanted high priority need more info 
    opened by cspeer 33
  • window.ga is not a function

    window.ga is not a function

    Description

    vue-analytics causes a window.ga is not a function error. No tracking is taking place.

    Expected behavior

    No error

    Actual behavior

    Error

    Environment

    Run this command in the project folder and fill in their results:

    -- [email protected]

    Then, specify:

    1. Operating system: Windows 10
    2. Browser and version: Chrome 68.0.3440.106

    Reproducible Demo

    import Vue from 'vue'
    import Router from 'vue-router'
    
    import HelloWorld from '@/components/HelloWorld'
    
    import VueAnalytics from 'vue-analytics'
    
    Vue.use(Router)
    
    var router = new Router({
      routes: [
        {
          path: '/',
          name: 'home',
          component: HelloWorld
        }
      ]
    })
    
    Vue.use(VueAnalytics, {
      id: 'UA-XXXXXXX-X',
      router: router
    })
    
    export default router
    
    invalid 
    opened by sebastian-raubach 23
  • Lighthouse performance

    Lighthouse performance

    Description

    Lighthouse told me that Google analytics is not well loaded when I use your plugin.

    Actual behavior

    Here is the Lighthouse "error":

    Preconnect to required origins
    Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. 
    

    Here is the Google documentation: https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect

    They told us to "just" add preconnect attribute like this:

    <link rel="preconnect" href="https://example.com">
    

    Thank you if someone can fix it. If I have the time I will try to make a PR.

    feature released 
    opened by lludol 22
  • 137:1 Uncaught (in promise) Error: [vue-analytics] Route name is mandatory when using screenview.

    137:1 Uncaught (in promise) Error: [vue-analytics] Route name is mandatory when using screenview.

    Description

    It reminds me of 137:1 Uncaught (in promise) Error: [vue-analytics] Route name is mandatory when using screenview. unexpectedly.

    Expected behavior

    export function createApp (store, router ,axios) {
    
      // sync the router with the vuex store.
      // this registers `store.state.route`
      sync(store, router)
    
      // create the app instance.
      // here we inject the router, store and ssr context to all child components,
      // making them available everywhere as `this.$router` and `this.$store`.
      Vue.prototype.$axios = axios
      VueAnalyticsConfig.router = router
      let isDebug = process.env.NODE_ENV === 'production'
      Vue.use(VueAnalytics, Vue.prototype.$lodash.merge(VueAnalyticsConfig,{
        autoTracking: {
          screenview: true
        },
        debug: {
          sendHitTask: isDebug,
          enabled: isDebug,
        }
      }))
    
    

    I did it as above and I don't expect any errors in console.

    Actual behavior

    It reminds me of 137:1 Uncaught (in promise) Error: [vue-analytics] Route name is mandatory when using screenview. unexpectedly.

    Environment

    Run this command in the project folder and fill in their results:

    npm ls vue-analytics: [email protected]

    Then, specify:

    1. Operating system: OS X 10.11.3 (15D21)
    2. Browser and version:Version 68.0.3440.106 (Official Build) (64-bit)

    Reproducible Demo

    Please take the time to create a new app that reproduces the issue or at least some code example

    Demonstrable issues gets fixed faster.

    third-party issue 
    opened by NoraGithub 19
  • Screenview tracking metrics are set to zero

    Screenview tracking metrics are set to zero

    <Apologies. I accidentally closed the previous issue>

    I'm having issues implementing the screen tracking. Current setup: Vue + Electron (Electron to Chromium). Google Analytics setup: Mobile App Tracking (currently tracking using localhost/standalone in Electron)

    What are you reporting? Whilst it can track and record, the number of hits on screen views is set to zero. Here's a sample screenshot: image

    Operating system: Windows 10 Browser and version: Electron 1.3.64

    in confirm 
    opened by thepepperone 16
  • Newbie quickstart

    Newbie quickstart

    Hello, I'm a newbie in VueJS and I am on a constant learning. I need to integrate this to my App, but find it hard to get it working. I created a file called vue-analytics.js and try to call it on the router, but it's not tracking.

    One thing that helps me get started with new packages are the demos, on an actual App.vue or router/index.js on how to insert it. Please help me, after creating the file with all settings (trackingId, etc) and calling it into vue-router as: import VueAnalytics from '../services/vue-analytics.js'.

    Thanks!

    opened by mateomorrison 16
  • Best way to call opt-out function in a component

    Best way to call opt-out function in a component

    Hi,

    I have a own component for a cookie message warning (regarding GDPR).

    In this component I have a method "accept()" which sets a localStorage item and should also set the opt-out function from your plugin.

    Would be this the correct way to do it?

    accept() {
        this.setGDPR();
        this.isOpen = false;
        this.$emit('accept');
        Vue.use(VueAnalytics, {
            id: 'UA-XXX-X',
            disabled: false
        })
    }
    

    In my main.js file I initialize your plugin like it is described in the README.

    Thank you!

    P3: Important feature in confirm 
    opened by markusdanek 15
  • Doesn't work within Cordova

    Doesn't work within Cordova

    I am using vue-analytics within cordova. App runs on localhost, works well with analytics but when app install and run from play/app store, it doesn't show any results in analytics report?

    need more info 
    opened by asifkilwani 15
  • window.ga is not a function in Mobile Safari

    window.ga is not a function in Mobile Safari

    Hi,

    I'm running on the latest version 2.3. and I get the following error from a few iOS 10.2.1 devices with Mobile Safari 10: window.ga is not a function. (In 'window.ga("create",i.id,"auto",r)', 'window.ga' is undefined)

    Otherwise everything is fine.

    Thanks, Chris

    bug low priority refactor 
    opened by cspeer 15
  • Build library using bili

    Build library using bili

    What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

    This PR brings in changes in build system & accompanying documentation updates in order to produce and support ESM, CJS and UMD build artifacts. (continuation of #264)

    What is the current behavior? (You can also link to an open issue here)

    Currently only UMD build is produced.

    What is the new behavior (if this is a feature change)?

    ESM, CJS and UMD build artifacts are being created and distributed together with sourcemaps.

    Does this PR introduce a breaking change?

    No.

    Please check if the PR fulfills these requirements

    • [x] The commit message follows semantic-release guidelines
    • [x] Fix/Feature: Docs have been added/updated
    • [x] Fix/Feature: Tests have been added; existing tests pass
    stale 
    opened by vladimyr 14
  • ga.disable() and ga.enable() are not working

    ga.disable() and ga.enable() are not working

    If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

    Description

    Hello there, I initialized Vue analytics with disabled: true and in the effort to be compliant with GDPR, want to invoke ga.enable() once the user gives consent. To test this out, I tried putting a $ga.event("Hi") right after the enable, and I see that the event is not being triggered. I'm using [email protected]

    Expected behavior

    Enabling Ga during runtime should work

    Actual behavior

    Enabling Ga during runtime doesn't work

    Environment

    Run this command in the project folder and fill in their results:

    npm ls vue-analytics:

    Then, specify:

    1. Operating system: Mac OS Big Sur
    2. Browser and version: Google Chrome

    Reproducible Demo

    Please take the time to create a new app that reproduces the issue or at least some code example

    Demonstrable issues gets fixed faster.

    opened by seanggani 3
  • build(deps): bump y18n from 3.2.1 to 3.2.2

    build(deps): bump y18n from 3.2.1 to 3.2.2

    Bumps y18n from 3.2.1 to 3.2.2.

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for y18n since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies stale 
    opened by dependabot[bot] 1
  • Error when building (missing vuex)

    Error when building (missing vuex)

    If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

    Description

    I installed, set the main.ts file with required (tracking router)... and when build...

    Expected behavior

    Well I expect it to work

    Actual behavior

    ERROR Failed to compile with 1 errors 10:21:25 AM error in C:/DEVELOPMENT/xxx/node_modules/vue-analytics/vue-analytics.d.ts

    ERROR in C:/DEVELOPMENT/xxx/node_modules/vue-analytics/vue-analytics.d.ts(5,25): 5:25 Cannot find module 'vuex'. 3 | import _Vue, { PluginFunction } from 'vue'; 4 | import VueRouter, { Route } from 'vue-router';

    5 | import { Store } from 'vuex'; | ^ 6 | 7 | interface EventPayload { 8 | eventCategory: string;

    ERROR Build failed with errors. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: vue-cli-service build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in: npm ERR! C:\Users...\AppData\Roaming\npm-cache_logs\2020-02-11T10_21_25_590Z-debug.log

    Environment

    -- [email protected] win10 (latest) Chrome (latest)

    bug 
    opened by demiro 3
  • Tracker is created twice

    Tracker is created twice

    If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

    Description

    I have a html page that includes Google Analytics and a vue.js app that uses vue-analytics. When I test the page I see that vue-analytics tries to create a second tracker and analytics shows a warning that the second call will be ignored.

    image

    Is this an issue when I leave it as it is?

    I expected that disableScriptLoader: true would also prevent creating a new tracker.

    Environment

    npm ls vue-analytics: `-- [email protected]

    Then, specify:

    1. Operating system: Windows 10
    2. Browser and version: Chrome 70.0.3538.77
    P4: Nice To Have feature help wanted 
    opened by theindra 7
  • [Suggestion] Offline Analytics

    [Suggestion] Offline Analytics

    opened by goatandsheep 6
Releases(v5.22.1)
Owner
Matteo Gabriele
Building things that might help other developers to build other things.
Matteo Gabriele
Google Universal Analytics support in Vue.js

Vue Analytics Simple implementation of Google Analytics in Vue.js This plugin will helps you in your common analytics tasks. Dispatching events, regis

Andréas Hanss 215 May 5, 2021
Simple implementation of Google Tag Manager in Vue.js 2.0

Vue Google Tag Manager *** Maintainers & Contributors welcome *** Simple implementation of Google Tag Manager in Vue.js This plugin will help you in y

Manish Kumar 234 May 29, 2021
Global Site Tag plugin for Vue (gtag.js)

vue-gtag Global Site Tag plugin for Vue The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to

Matteo Gabriele 502 Jun 14, 2021