lib-tracking

A tracking connector, that will serve as a wrapper for all tracking services (Google Analytics, Amplitude, Intercom, Optimizely) including the coming Doodle Data Layer. It also provides various helper functions that can be used for tracking in all React JS frontends.

This connector is a proof of concept for the new convention that all connectors should be written in vanilla JS. Therefore you won't find any react and redux in here. @doodle/tracking provides all its code uncompiled.

Usage

Installation

Add the private registry:

echo "registry=https://npm-proxy.fury.io/mfsTqYdDz3bsKFQJuMAR/tmf/" >> .npmrc

Add the package to your package.json:

yarn add @doodle/tracking

Click Tracking Setup

To add click tracking to your frontend you need to add a new watcher with a new channel that listens to click events. You can either create a new saga for this or add it to an existing one. We provide a helper function to do so:

import { getTrackingClickChannel } from '@doodle/tracking';
import { eventChannel } from 'redux-saga'

export function* watchTrackingClicks(options) {
  const channel = getTrackingClickChannel(eventChannel);
  yield takeEvery(channel, onTrackingClick, options);
}

export default function* clickTrackingSaga(options = {}) {
  yield all([call(watchTrackingClicks, options)]);
}

In this example, onTrackingClick is a function taking care of the actual tracking and it needs to be set up in the frontends for now. In the future this connector will provide those tracking generators as well.

export function* onTrackingClick(options, { href, isSameTabLink, valuesToTrack }) {
   // actual tracking
}

To add tracking attributes to DOM elements conveniently, you can use setTrackingAttributes like this:

import { setTrackingAttributes } from '@doodle/tracking';

  const trackingAttributes = {
    ga: {
      eventPage: 'Page',
      eventAction: 'Action',
      eventCategory: 'Categroy,
      eventLabel: 'Label',
    },
    amplitude: {
      eventType: 'Type',
      eventName: 'Name',
      eventProperties: {
        'Some-Prop': 'Prop',
      },
    },
  };

  <div {...setTrackingAttributes(trackingAttribute)} />

Development of this package

Install the dependencies

yarn install

Publishing of this package

This library is published to the registry using https://github.com/DoodleScheduling/lib-tagflow.

Publish release candidate:

git tag pub.1.0.0-rc.0
git push origin pub.1.0.0-rc.0

Publish release:

git tag pub.1.0.0
git push origin pub.1.0.0