https://github.com/deanpienaar/gtm-vue
A easy way of using Google Tag Manager (https://tagmanager.google.com/) with Vue.
https://github.com/deanpienaar/gtm-vue
google-tag-manager gtm typescript vue vue-plugin vue2
Last synced: 7 months ago
JSON representation
A easy way of using Google Tag Manager (https://tagmanager.google.com/) with Vue.
- Host: GitHub
- URL: https://github.com/deanpienaar/gtm-vue
- Owner: deanpienaar
- Created: 2018-11-27T13:42:02.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-11T04:34:33.000Z (about 4 years ago)
- Last Synced: 2024-04-29T05:42:15.082Z (over 1 year ago)
- Topics: google-tag-manager, gtm, typescript, vue, vue-plugin, vue2
- Language: TypeScript
- Homepage:
- Size: 30.3 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gtm-vue
(Currently in Beta until testing is added. Use with care.)
An easy way of using [Google Tag Manager](https://tagmanager.google.com/) with Vue.
Heavily inspired by the package [vue-gtm](https://github.com/mib200/vue-gtm/) by
[mib200](https://github.com/mib200). This package merely adds some extra things like a useful
tracking directive (`v-track`), and types. It will also feature testing soon.
## Installation
```bash
yarn add gtm-vue
```
```typescript
import GTMVue from 'gtm-vue';
// Passing in your instance of vue-router here will setup automatic view tracking
Vue.use(GTMVue, {...GTMVueOptions})
```
Possible options are defined by the GTMVueOptions interface
```typescript
interface GTMVueOptions {
id: string;
enabled?: boolean;
debug?: boolean;
router?: VueRouter;
ignoredViews?: string[];
trackOnNextTick?: boolean;
disableDirective?: boolean;
directiveName?: string;
}
```
### The v-track directive
```vue
```
Options are
```typescript
interface TrackEventOptions {
event?: string;
category: string;
action: string;
label: string;
value: string | number;
noninteraction?: boolean;
[key: string]: any;
}
```