@dewsign/vue-gtm/README.md

Google Tag Manager implementation in Vue application

<h1 align="center">
  Vue Google Tag Manager
  <br>
  <br>
</h1>

<h4 align="center">Simple implementation of Google Tag Manager in Vue.js</h4>

<p align="center">
  <a href="https://github.com/feross/standard"><img src="https://cdn.rawgit.com/feross/standard/master/badge.svg" alt="Standard - JavaScript Style Guide"></a>
</p>
<br>

This plugin will helps you in your common GTM tasks.

**Note: If you are looking to track all Vuex mutations, you can use [Vuex GTM plugin](https://gist.github.com/matt-e-king/ebdb39088c50b96bbbbe77c5bc8abb2b)**

# Requirements

* **Vue.js.** >= 2.0.0
* **Google Tag Manager account.** To send data to

**Optionnals dependencies**

* **Vue Router** >= 2.x - In order to use auto-tracking of screens

# Configuration

`npm install @dewsign/vue-gtm -S` or `yarn add @dewsign/vue-gtm` if you use [Yarn package manager](https://yarnpkg.com/)

Here is an example of configuration, compose with it on your own :

```javascript
import VueGtm from '@dewsign/vue-gtm';
import VueRouter from 'vue-router';
const router = new VueRouter({ routes, mode, linkActiveClass });

Vue.use(VueGtm, {
  id: 'GTM-xxxxxxx', // Your GTM ID
  enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
  debug: true, // Whether or not display console logs debugs (optional)
  loadScript: true, // Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components) (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)
});
```

This injects the tag manager script in the page, except when `enabled` is set to `false`. 
In that case it will be injected when calling `this.$gtm.enable(true)` for the first time.

# Documentation

Once the configuration is completed, you can access vue gtm instance in your components like that :

```javascript
export default {
  name: 'MyComponent',
  data() {
    return {
      someData: false
    };
  },
  methods: {
    onClick: function() {
      this.$gtm.trackEvent({
        event: null, // Event type [default = 'interaction'] (Optional)
        category: 'Calculator',
        action: 'click',
        label: 'Home page SIP calculator',
        value: 5000,
        noninteraction: false // Optional
      });
    }
  },
  mounted() {
    this.$gtm.trackView('MyScreenName', 'currentpath');
  }
};
```

The passed variables are mapped with GTM data layer as follows

```
dataLayer.push({
	'event': event || 'interaction',
	'target': category,
	'action': action,
	'target-properties': label,
	'value': value,
	'interaction-type': noninteraction,
	...rest
});
```

You can also access the instance anywhere whenever you imported `Vue` by using `Vue.gtm`. It is especially useful when you are in a store module or
somewhere else than a component's scope.

## Sync gtm 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 `gtm` this will take the value of this field for the view name.
* Otherwise, if the plugin don't have a value for the `meta.gtm` 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 :

```javascript
const myRoute = {
  path: 'myRoute',
  name: 'MyRouteName',
  component: SomeComponent,
  meta: { gtm: 'MyCustomValue' }
};
```

> This will use `MyCustomValue` as the view name.

## Methods

### Enable plugin

Check if plugin is enabled

```
this.$gtm.enabled()
```

Enable plugin

```
this.$gtm.enable(true)
```

Disable plugin

```
this.$gtm.enable(false)
```

### Debug plugin

Check if plugin is in debug mode

```
this.$gtm.debugEnabled()
```

Enable debug mode

```
this.$gtm.debug(true)
```

Disable plugin

```
this.$gtm.debug(false)
```

## Credits

[mib200 (Original Author)](https://github.com/mib200/vue-gtm)

[ScreamZ vue-analytics](https://github.com/ScreamZ/vue-analytics)