feat/vue-mixins

[tamer-mohamed]

Enable mixins in @ichnos/vue

Setup Vue mixin

you may need to tracking html elements using data-track* attributes.
find example below to track html elements and format gtm event before sending the event using beforeSend hook

import Vue from 'vue'
import {mixinFactory} from '@ichnos/vue'


new Vue({
    mixins: [
      mixinFactory({
        events: [
          {
            elements: ['a', 'button'],
            eventListeners: ['click'],
            mapTagNameToGTMEventName: {
              button: 'button',
              a: 'link',
            },
          },
          {
            elements: ['input', 'textarea', 'checkbox', 'radio'],
            eventListeners: ['focusin', 'focusout'],
            mapTagNameToGTMEventName: 'input',
          },
        ],
        beforeSend: (event) => ({
          event: 'gtmEvent',
          gtmEventCategory: event.category, // -> interpolated from data-trackcategory
          gtmEventLabel: event.label,
          gtmEventValue: event.value,
          gtmEventAction: event.action,
        }),
      }),
    ],
});

mixinFactory params

interface IMixinFactory {
  event: {
    elements: string[]
    eventListeners: string[]
    mapTagNameToGTMEventName: any
  },
  beforeSend(event: any): any
}