@vivareal/gtm-tracker

@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