Google Analytics plugin for Vue

Last update: Jun 24, 2022

⚠️ 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

GitHub

https://github.com/MatteoGabriele/vue-analytics
Comments
  • 1. 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
    Reviewed by vladimyr at 2020-01-12 15:51
  • 2. Build and distribute ESM, CJS and UMD artifacts

    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.

    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
    Reviewed by vladimyr at 2019-12-15 14:32
  • 3. fix(bootstrap): apply any sets before delivering untracked events

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

    What is the current behavior? (You can also link to an open issue here) https://github.com/MatteoGabriele/vue-analytics/issues/188

    What is the new behavior (if this is a feature change)? All set's get applied before any events get dispatched to google analytics

    Does this PR introduce a breaking change? no

    Please check if the PR fulfills these requirements

    • [X] The commit message follows semantic-release guidelines
    • [ ] Fix/Feature: Docs have been added/updated
    • [ ] Fix/Feature: Tests have been added; existing tests pass

    Other information:

    Reviewed by ericcirone at 2019-01-16 17:21
  • 4. Fix incorrect merge behavior

    Related to #148.

    From the documentation, the id option seems to support the Promise that returns an array of IDs, but the current implementation does not successfully update the id property of config, which results in the following error:

    Uncaught (in promise) TypeError: e.replace is not a function
    

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

    Let's say VueAnalytics is instantiated by id of Promise that will be resolved by an array of IDs:

    Vue.use(VueAnalytics, {
      id: Promise.resolve([ 'UA-XXX-A', 'UA-XXX-B' ])
    })
    

    This ID will be handled by update function, with response[0] having a simple Array [ 'UA-XXX-A', 'UA-XXX-B' ].

    https://github.com/MatteoGabriele/vue-analytics/blob/b2d88c0a15c4afc989e70b5ce1b6d29faae0d29a/src/bootstrap.js#L41-L45

    However, this update weirdly merges this Array instance into the aforementioned Promise in the following line:

    https://github.com/MatteoGabriele/vue-analytics/blob/b2d88c0a15c4afc989e70b5ce1b6d29faae0d29a/src/helpers.js#L31-L41

    As the typeof an instance of Promise is object, the behavior would look like:

    config.id[0] = 'UA-XXX-A';
    config.id[1] = 'UA-XXX-B';
    

    whereas the correct behavior should simply be replacing config.id to the Array instance. This PR detects the type of keys more precisely to avoid unexpected overwrites.

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

    merge merges any kind of objects, including Promise instances.

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

    merge only merges a simple object or a simple Array.

    Does this PR introduce a breaking change?

    This breaks the old behavior to some extent but its effect should be low.

    Please check if the PR fulfills these requirements

    • [x] The commit message follows semantic-release guidelines
    • [ ] Fix/Feature: Docs have been added/updated
    • [x] Fix/Feature: Tests have been added; existing tests pass
    Reviewed by chitoku-k at 2018-12-27 18:45
  • 5. onAnalyticsReady promise now rejects if ga scripts cannot load

    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
    • [ ] Fix/Feature: Tests have been added; existing tests pass

    Other information:

    Reviewed by BenjjinF at 2018-12-07 00:53
  • 6. Extract and export payload types

    What kind of change does this PR introduce? (Bug fix, feature, docs update, ...) Minor feature to export payload types for convenient usage in code. Similar to InstallOptions in #263.

    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

    Other information:

    Reviewed by romansp at 2019-12-16 21:03
  • 7. feat: added typings for vue-analytics

    What kind of change does this PR introduce? (Bug fix, feature, docs update, ...) Added Typings for Vue Analytics, closes #161

    What is the current behavior? (You can also link to an open issue here) There is no TS support #161

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

    Does this PR introduce a breaking change? Nope

    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

    Other information: N/A

    Reviewed by justindra at 2019-12-10 05:12
  • 8. feat(config): Allow setting different fields per ID

    feat(config): Allow setting different fields per ID

    Closes https://github.com/MatteoGabriele/vue-analytics/issues/143.

    Allows setting configuration fields per id.

    Reviewed by phouri at 2018-08-05 14:36
  • 9. Object literal syntax

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

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

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

    Does this PR introduce a breaking change?

    Please check if the PR fulfills these requirements

    • [ ] The commit message follows semantic-release guidelines
    • [x] Fix/Feature: Docs have been added/updated
    • [ ] Fix/Feature: Tests have been added; existing tests pass

    Other information:

    Reviewed by MosheAtOwal at 2018-07-30 19:01
  • 10. Vuex middleware property check

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

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

    What is the new behavior (if this is a feature change)? No more assuming that meta always contains analytics

    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

    Other information:

    Reviewed by Bob-Thomas at 2018-07-23 14:52
  • 11. add option for global hitCallback

    Add an option for a global hitCallback in the configuration that is called after each pageview. If a callback is supplied to a page() call, the global callback is overridden.

    Reviewed by zsalzbank at 2017-05-17 16:35
Simple implementation of Google Tag Manager in Vue.js 2.0
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

Jun 23, 2022
Global Site Tag plugin for Vue (gtag.js)
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

Jul 4, 2022
vue-google-api - A wrapper for easy integration of the Google's APIs client in any vue.js 2 project, based on promises, with built-in Oauth2 "Sign In with Google" facilities.

vue-google-api This project is outdated and no longer maintained, I can't find time to do what should be done here. Really sorry, if someone wants to

Apr 24, 2022
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

Mar 10, 2022
A directive for accessing the Google Analytics window.ga object by using params/attributes

vue-ga-directive A directive for accessing the Google Analytics window.ga object by using attributes. Install Available through npm as vue-ga-directiv

Jul 20, 2020
A wrapper for Google Analytics to be used in web clients, oriented to single page applications

This is a wrapper for Google Analytics to be used in web clients, oriented to single page applications (something that google doesn't do oob), like automatically reporting requests performance, navigation links, redux plugin etc

Mar 22, 2022
🔌 A simple Vue plugin for Fathom Analytics

vue-fathom A simple Vue plugin for Fathom Analytics. npm i -s @ubclaunchpad/vue-fathom import Vue from 'vue'; import VueFathom from '@ubclaunchpad/vue

Oct 6, 2020
Google-onetap-signin-client-vue - Vue 3 Demo of using the Google One-Tap Signin in a modular way (Client Code)

vue-google-onetap-signin Project setup npm install Compiles and hot-reloads for

Jun 3, 2022
A dashboard for Google Wi-Fi, using the google-wifi-api-node wrapper.

google-wifi-dashboard A dashboard for Google Wi-Fi, using the google-wifi-api-node wrapper. Check it out here: wifi.jameshawkins.dev Requirements You'

May 23, 2022
Big & fun NEAR account analytics!

stats.gallery Project setup npm install Compiles and hot-reloads for development npm run serve Note: some macOS users may need to use a different po

Jun 23, 2022
Icpscan is a Block Explorer and Analytics Platform for Dfinity, ICP is a global computing platform.

Icpscan is a Block Explorer and Analytics Platform for Dfinity Project includes: Transactions (Search) Project (Project) Rank (ICP Holder Address Rank

May 10, 2022
A Vue.JS plugin for Snackbars based on Google Material
A Vue.JS plugin for Snackbars based on Google Material

Vue Snackbar A Vue.JS plugin for creating and displaying snackbars following the material design policies created by Google. Install Install from npm:

Jan 18, 2022
A lightweight Google Maps plugin for Vue
A lightweight Google Maps plugin for Vue

x5-gmaps (Live Demo) This is a lightweight Google Maps plugin for Vue. Samples/examples/tutorials Tutorial creating a COVID Heatmap Address Autocomple

Apr 22, 2022
🔐 A simple Vue plugin to include a Google sign-in button into your web app.
🔐 A simple Vue plugin to include a Google sign-in button into your web app.

vue-google-signin-button A simple Vue plugin to include a Google sign-in button into your web app. Install This plugin can be installed as a module $

Jun 21, 2022
🔐 A simple Vue plugin to include a Google sign-in button into your web app.
🔐 A simple Vue plugin to include a Google sign-in button into your web app.

vue-google-signin-button A simple Vue plugin to include a Google sign-in button into your web app. Install This plugin can be installed as a module $

Jun 21, 2022
Google Charts plugin for Vue.js

vue-charts Google Charts plugin for Vue.js Demo Basic Line Chart Multiple Sets of Data, with auto-update Events Redraw on window resize Installation n

Apr 11, 2022
Vue Component to Make Google Material Design Ripple Effect. http://bosnaufal.github.io/vue-ripple/

Vue Ripple Vue Component to Make Google Material Design Ripple Effect. It's adopted from angular-ripple DEMO Install You can import vue-ripple to your

May 11, 2022
Dead easy, Google Material Icons for Vue

vue-ico Dead easy, Google Material Icons for Vue. This package's aim is to get icons into your Vue.js project as quick as possible, at the cost of all

Nov 13, 2021
Material design icons by Google for Vue.js & Nuxt.js (server side support & inline svg with path)
Material design icons by Google for Vue.js & Nuxt.js (server side support & inline svg with path)

Material Design Icons by Google for Vue.js & Nuxt.js (inline SVG with path) This library should grant an easy-to-use interface to icons from Material

Apr 28, 2022