@vivareal/tracking

Tracking

A set of tracking helpers based on our schemas repository

Usage

// ../tracking.js
import { Tracking } from '@vivareal/tracking';

export default new Tracking({
  getBaseSchema: () => {
    // get info from base schema
    // ...
    return {
      foo: 'bar',
      bar: 'foo',
    };
  },
});

Options

Option	default	Desc
getBaseSchema	() => {}	Get project base schema info

Use as a Vue plugin

import Vue from 'vue';
import { VueTracking } from '@vivareal/tracking';
import tracking from './tracking';

Vue.use(VueTracking, { tracking });

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

import { favoriteClicked } from '@vivareal/tracking';

// foo.js
export default {
  methods: {
    trackEvent() {
      const schema = this.$tracking.getSchemaData(params, 'renameCollection', favoriteClicked);
      this.$clickstream.trackEvent(schema);
    },
  },
};

Use as module

// foo.js
import tracking from './tracking';
import { favoriteClicked } from '@vivareal/tracking';

const schema = tracking.getSchemaData(data, 'renameCollection', favoriteClicked);

Methods

Method	Params	Desc
getSchemaData	data: obj, eventAction: String, schema: obj	Create desired schema

// schema object example
{
  create: (event, data) => {
    const events = { myCustomEvent: { action: 'myCustomEvent' } };
    return { ...data, ...events[event] };
  },
  rules: {
    required: ['id', 'event'],
    event: 'myCustomEvent'
  }
}

Avaliable Schemas

Event	Description	Used In
favoritePanelClicked	Whenever the user open/closes the favorites modal	oz-assets, don-corleone
favoriteClicked	whenever the user actually take an action on favarite modal	oz-assets, don-corleone
favoriteCollectionClicked	whenever the user actually take an action on favorite modal of remove or add a favorite	oz-assets, don-corleone
galleryClicked	whenever the user open/swipes a photo of gallery	oz-assets, don-corleone

Run it locally

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Running on local machine

yarn dev

Running the tests

yarn test
yarn test:watch

Build

Build to dist folder

yarn run build

Code Formatting Guidelines

This project relies on prettier to automatically format the code. In the precommit hook, your code will be checked against eslint and prettier rules to avoid sending bad formatted code to production.

Publish a new version

See root's README file

Debug this module with Vscode

Vscode has some issues with debug in the newest version of ECMA Script. So we need to build first the module and call the functions with an entry point.

To debug create a .vscode folder and launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/dist/entry-point.js"
    }
  ]
}

And then build your package

yarn build

And now you call the modules inside on entry-point.js at dist folder. eg:

const { Tracking } = require('./tracking');
import { favoriteClicked } from '@vivareal/tracking';

const data = {
 ...
};

const tracking = new Tracking({
  getBaseSchema: () => {
    // ..
  },
 });

tracking.getSchemaData(data, 'renameCollection', favoriteClicked);