vue-gtag
Global Site Tag plugin for Vue (gtag.js)
Notes before you install this package
The package is maybe not ready yet for production, has no tests yet and might have limited features and lacks in documentation compared to vue-analytics.
In case you need more flexibility and reliability, right now I still suggest you to install vue-analytics as your main tracking system.
Requirements
Vue ^2.0.0
Install
npm install vue-gtag
Make sure to also give a read at the official gtag.js documentation
User guide
DOCUMENTATION: COMING SOON...
For now this is all I got time to write :D
Start using it your Vue application
import Vue from 'vue'
import VueGtag from 'vue-gtag'
const options = {
config: {
id: 'GA_MEASUREMENT_ID'
}
}
Vue.use(VueGtag, options)
Start automatic routing track by passing your VueRouter instance
import Vue from 'vue'
import VueGtag from 'vue-gtag'
import VueRouter from 'vue-router'
const router = new VueRouter({
routes: [{...}]
})
const options = {
config: {
id: 'GA_MEASUREMENT_ID'
}
}
Vue.use(VueGtag, options, router)
new Vue({
router,
render: h => h(App)
}).$mount("#app");
plugin default options
{
enabled: true,
globalObjectName: "gtag",
pageTrackerTemplate: () => null,
pageTrackerEnabled: false,
pageTrackerScreenviewEnabled: false,
config: {
id: null,
params: {
send_page_view: true
}
}
}
available methods within the $gtag object
it works mostly like vue-analytics structure, but with some different namings
- query,
- config,
- event,
- pageview,
- screenview,
- customMap,
- time,
- exception,
- linker,
- purchase,
- set,
- optIn,
- optOut,
- $getOptions
Example Usage
export default {
name: "Example",
methods: {
recordEvent() {
var callback = function() {
console.log("Conversion Recorded")
};
this.$gtag.event("conversion", {
send_to: "your-id-here",
event_callback: callback
});
}
}
};
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-gtag/issues
Follow me on twitter @matteo_gabriele