@dfds-platform/tracking

@dfds-platform/tracking

Installation

npm install @dfds-platform/tracking
yarn add @dfds-platform/tracking

Setup Google Tag Manager

When using the Tracking Package client side, tracking events are being dispatched to the dataLayer which is where Google Tag Manager picks up events. You have to setup Google Tag Manager to pick up evnets automatically from the dataLayer. You can follow these instructions. Alternatively, you can use an existing package to set up GTM. For example you can use this plugin in a Gatsby applicaiton. **GTM-WZLN3V4** is the Google Tag Manager ID you should use in both development and production.

Tracking events

You can track events multiple ways:

1. Use the general tracking function track<Event>( {event: 'eventName' ...payload })

2. ⚠️ THIS METHOD IS BEING DEPRECATED Use the old server tracking functions found within ./src/server/tracking-methods/events see this

Creating a new tracking event

New events should be created by the following method:

1. Create an event in Stoplight
2. Export Tracking.json
3. Overwrite DataContract.json with the downloaded .json
4. Run yarn run compile:schema within packages/tracking
5. Create PR; merge; and publish changes

This will update the general tracking function to accept the new event.

Data contract

The data contract is a JSON schema which represents all the events that is accepted. The goal is that no tracking event should ever be instantiated within DFDS which is not defined within this schema. The schema is compiled into a TypeScript function type signature. This can be done by running:

yarn run compile:schema # within packages/tracking

This type contract is only being, and should only be, used by the general tracking function in this repository.

General tracking function

The general tracking function is responsible for two tasks:

1. Making sure that events being triggered are correctly formatted by using the TypeScript function type signature which is derived from the JSON schema data contract.
2. Dispatching events to two locations:
   • To the dataLayer if in a browser
   • To our Server Google Tag Manger server regardless of being in a browser or on a server

In the future all events will be dispatched to Kafka as well.

See deprecation events through linting

Every library consuming the tracking package should have eslint-plugin-deprecation installed such that deprecated events will be shown as follows:

track<Event>({ event: 'fizz' })

The strikethrough will be accompanied with a message on when the event will be obsolete and how change it to complie with a new version of the event, if any.

Developing using yarn link

It can be handy to use developing functionality in the context of an existing app. yarn link can be used in that case.

webpack

If you are using webpack you can try setting resolve.symlinks to false in your webpack.config.js to only resolve dependencies from the apps node_modules folder.

Gatsby

Gatsby uses webpack under the hood, so in order to set resolve.symlinks add the following to the gatsby-node.js file

exports.onCreateWebpackConfig = ({ getConfig, actions, stage }) => {
  const config = getConfig()
  config.resolve.symlinks = false
  actions.replaceWebpackConfig(config)
}

Setting up the link

cd ./packages/tracking # Navigate to the packages/tracking folder
yarn run build # Run build which will create a dist folder
yarn run watch # Run watch to watch for changes and re-build
cd ./dist # Navigate into the dist folder
yarn link # Run `yarn link`

You are now ready to use the linked package from within you app while developing. Change to you app source folder, where the package.json file is located, and use the linked version of the @dfds-platform/tracking package

yarn link @dfds-platform/tracking

Publishing new releases

This should always be done the GitHub repositories release page. Create a release here and an automized pipeline will do the rest for you.

Cypress tests for verify tracking

See docs for testing tracking here