https://github.com/bkwld/data-layer-events

Push clean events onto Google Tag Manager's dataLayer
https://github.com/bkwld/data-layer-events

Last synced: about 1 year ago
JSON representation

Push clean events onto Google Tag Manager's dataLayer

• Host: GitHub
• URL: https://github.com/bkwld/data-layer-events
• Owner: BKWLD
• License: mit
• Created: 2016-08-19T22:51:45.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-10-25T20:01:33.000Z (over 8 years ago)
• Last Synced: 2025-06-12T21:56:42.569Z (about 1 year ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# data-layer-events

This package pushes [Google Analytics type events](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) onto [Google Tag Manager's dataLayer variable](https://developers.google.com/tag-manager/devguide#datalayer).  It cleans up after each push by `null`-ing keys that aren't used and supports `nonInteraction` events.

## Setup

Setup Google Tag Manager Variables for:

- `genericCategory`

- `genericAction`

- `genericLabel`

- `genericValue`

- `genericNonInteraction`

For example:

![Variable configuration for category](https://user-images.githubusercontent.com/2195815/31870598-76725210-b7fa-11e7-999d-e1e48a12c5f6.png)

![Variable configuration for action](https://user-images.githubusercontent.com/2195815/31870578-5aca8244-b7fa-11e7-86d2-29d011643295.png)

Then create a Trigger for `genericEvent`.  Like this:

![Trigger configuration example](https://user-images.githubusercontent.com/2195815/31870614-8fb5b0e6-b7fa-11e7-83ea-1968ffc7328c.png)

Finally create Tag that combines all of these.  Like this:

![Tag configuration example](https://user-images.githubusercontent.com/2195815/31870519-2c0fd5e4-b7fa-11e7-8531-0fcd726c5532.png)

## Usage

```js

dataLayer = require('data-layer-events');

// Fire a normal, interaction event

dataLayer.event('Category', 'Action', 'Label', 'Value');

// Fire a non-interaction event

dataLayer.nonInteractionEvent('Category', 'Action', 'Label', 'Value');

```

A React Component example:

![A React Component example](https://user-images.githubusercontent.com/2195815/31870518-2bbde11c-b7fa-11e7-9d88-f5f19d961e92.png)