Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-tag-manager
Advanced tools
Readme
$ npm install --save react-tag-manager
$ yarn add react-tag-manager
Enabling and loading the Google Tag Manager
import GTM from 'react-tag-manager'
export const AppContainer = () => (
<div>
<GTM
gtm={{
id: 'GTM-12345',
auth: '', // Optional
preview: '', // Optional
}}
settings={{
sendPageView: true, // default false
pageView: { // default null
event: 'pageview', // default
data : {}, // default
settings: {
locationProp: 'pathname', // default
sendAs : 'url', // default
},
}
}}>
...
</GTM>
</div>
)
import DataLayer from 'react-tag-manager/DataLayer'
export const Component = () => (
<div>
// All props will be added to the data layer
<DataLayer
foo={'bar'}
/>
<DataLayer
foo={'bar'}
settings={{
passProps: true, // default false, will pas all the given props to the child components
withGTM: true, // default false, will add GTM to the child components
}}>
...
</DataLayer>
...
</div>
)
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 (
<div>
<button onClick={this.handleButtonClick} />
</div>
)
}
}
import React from 'react'
import { PageView } from 'react-tag-manager'
export default class extends from React.Component {
render() {
return (
<div>
<PageView />
...
</div>
)
}
}
import React from 'react'
import { Click } from 'react-tag-manager'
export default class extends from React.Component {
render() {
return (
<div>
<Click
event={'click'}
data={{
event: 'click',
...
}}>
<button>CLICK ME</button>
</Click>
...
</div>
)
}
}
If you'd like to contribute to this project, all you need to do is clone this project and run:
$ npm install
$ npm run build
$ npm run build:watch // To recompile files on file change
You can use npm link
/ yarn link
to use your development version in your own project:
react-tag-manager
directory and execute command npm link
/ yarn link
npm link react-tag-manager
/ yarn link react-tag-manager
React Tag Manager is MIT licensed.
If you have questions or issues, please open an issue!
FAQs
Google Tag Manager for React
The npm package react-tag-manager receives a total of 27 weekly downloads. As such, react-tag-manager popularity was classified as not popular.
We found that react-tag-manager demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.