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);