tmf / @doodle/tagmanager js

Repository URL to install this package:

Details

src

state

views

package.json

index.js

README.md

@doodle/tagmanager

A redux/redux-saga connector that provides actions, reducers and sagas for interacting with Google Tag Manager. It communicates with the Tag Manager through the "Data Layer".

CI/CD: https://builder.internal.doodle-test.com/job/stack/job/web-tagmanager/

Installation

yarn install @doodle/tagmanager

Add tagmanager script:

<html>
  <head>
    <!-- other head stuff -->

    <%- include(`${nodeModulesPath}/@doodle/tagmanager/views/head.ejs`); %>
  </head>
  <body>
    <%- include(`${nodeModulesPath}/@doodle/tagmanager/views/body.ejs`); %>

    <!-- other body stuff -->
  </body>
</html>

Usage

Include the tagManagerSaga in your app‘s rootSaga:

// root saga
import { all, call } from 'redux-saga/effects';

import { tagManagerSaga } from '@doodle/tagmanager';

export default function* rootSaga(options = {}) {
  yield all([
    /* ... other sagas */
    call(tagManagerSaga, options.tagManager),
  ]);
}

Push data to dataLayer

Dispatch action that pushes values into the dataLayer:

dispatch(
  pushDataLayer({
    event: 'gtmEvent',
    eventCategory: 'userInteraction',
    eventNonInteraction: 'False',
    eventAction: 'userLogin',
  }, {
    pageType: 'somePage'
  })
);

Push data to dataLayer and wait until tracking is finished

If you want to wait until the tracking actually finished before moving on, you can wait for the tracking call.

This is especially useful when you want to track clicks to links that cause navigation to another page (since the tracking might potentially get lost if the new page is loaded before the tracking call has finished).

dispatch(
  pushDataLayerAndWait({
    event: 'gtmEvent',
    eventCategory: 'userInteraction',
    eventNonInteraction: 'False',
    eventAction: 'userLogin',
  }, {
    pageType: 'somePage'
  })
);

See also the JSDoc in the action definitions.

Development

Install dependencies

yarn

Build library

For development, in watch mode

yarn start

Production build

yarn build

Run tests

yarn test

Publish new version

Note: This requires a globally installed gulp (e.g. via yarn global add gulp).

The publish task does two things:

Bump the version
Publish the package via npm publish.

For bumping version, there are three different options:

(1) Per default, the patch version will be bumped:

# e.g. 2.1.7 → 2.1.8
gulp publish

(2) You can define which type of version bump you want to do:

# e.g. 2.1.7 → 3.0.0
gulp publish --type major

(3) Define the exact version to bump to:

# e.g. 2.1.7 → 4.0.2
gulp publish --pkg-version 4.0.2