https://github.com/tripss/react-tag-manager
Google Tag Manager for React
https://github.com/tripss/react-tag-manager
analytics google manager react tag
Last synced: 12 months ago
JSON representation
Google Tag Manager for React
- Host: GitHub
- URL: https://github.com/tripss/react-tag-manager
- Owner: TriPSs
- License: mit
- Created: 2017-11-19T17:24:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-09-21T02:00:56.000Z (over 4 years ago)
- Last Synced: 2024-04-24T10:25:09.746Z (about 2 years ago)
- Topics: analytics, google, manager, react, tag
- Language: JavaScript
- Size: 808 KB
- Stars: 24
- Watchers: 3
- Forks: 9
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
## Installation
```shell
$ npm install --save react-tag-manager
$ yarn add react-tag-manager
```
## Examples
Enabling and loading the Google Tag Manager
```Javascript
import GTM from 'react-tag-manager'
export const AppContainer = () => (
...
)
```
### Updating / Adding data to the data layer
```Javascript
import DataLayer from 'react-tag-manager/DataLayer'
export const Component = () => (
// All props will be added to the data layer
...
...
)
```
### Trigger a event
```Javascript
import React from 'react'
import { withGTM } from 'react-tag-manager'
@withGTM
export default class extends from React.Component {
handleButtonClick = () => {
const { GTM } = this.props
GTM.api.trigger({
event: 'my-button-click',
bar: 'foo'
})
}
render() {
return (
)
}
}
```
### Trigger a pageview event
```Javascript
import React from 'react'
import { PageView } from 'react-tag-manager'
export default class extends from React.Component {
render() {
return (
...
)
}
}
```
### Trigger a onClick event
```Javascript
import React from 'react'
import { Click } from 'react-tag-manager'
export default class extends from React.Component {
render() {
return (
CLICK ME
...
)
}
}
```
## Development
If you'd like to contribute to this project, all you need to do is clone
this project and run:
```shell
$ npm install
$ npm run build
$ npm run build:watch // To recompile files on file change
```
### Using development version in local project
You can use `npm link` / `yarn link` to use your development version in your own project:
- Go to `react-tag-manager` directory and execute command `npm link` / `yarn link`
- Go to your project directory and execute command `npm link react-tag-manager` / `yarn link react-tag-manager`
## [License](https://github.com/TriPSs/react-tag-manager/blob/master/LICENSE)
React Tag Manager is [MIT licensed](./LICENSE).
## Collaboration
If you have questions or [issues](https://github.com/TriPSs/react-tag-manager/issues), please [open an issue](https://github.com/TriPSs/react-tag-manager/issues/new)!