@vivareal/gtm-tracker

Tracker to populate the GTM dataLayer and add clickstream global method

Usage

// ../gtm-tracker.js
import { GtmTracker } from '@vivareal/gtm-tracker';

export default new GtmTracker({
  id: 'GTM-XXXXX',
  dataLayerName: 'dataLayerClickstream',
  trackerEndpoint: '', // clickstream URL
  enabled: true,
  debug: false,
});

Options

| Option | default | Desc | | --------------- | ---------------------- | --------------------------------------------------- | | id | null | GTM Id | | dataLayerName | dataLayerClickstream | same name as you used when importing the GTM plugin | | trackerEndpoint | '' | Your tracking server endpoint | | enabled | true | Start enabled/disabled | | debug | false | Debug enabled |

Install as a Vue plugin

import Vue from 'vue';
import { VueGtm } from '@vivareal/gtm-tracker';
import tracker from './gtm-tracker';

Vue.use(VueGtm, { tracker });

This will enable in your project to use the tracker directly in components in a "Vue-way"

// App.js
export default {
  watch: {
    // If using vue-router
    $route(to) {
      this.$gtm.pageView(to);
    },
  },
};

Please note that you don't need to add it as a plugin, you can simply import the tracker directly in components, and use it, but this removes the need to import it in every component that you want to track something

Methods

| Method | Desc | | ------------------ | ----------------------------------------------------------------------------- | | trackEvent(Obj) | Object to populate dataLayer, it demands a event key | | pageView(Obj) | Will populate dataLayer with an object containing { event: 'pageRendered' } | | pushDataLayer(Obj) | Directly input any object into the dataLayer | | enable(Boolean) | Enable or disable tracking | | debug(Boolean) | Enable or disable debugging | | dataLayer() | Retrieves current dataLayer array |