React adapter for metrics services like Google Analytics, Tealium or Comcast.
First create your metrics-service module (eg. using google analytics) in the file my-metrics.js:
// my-metrics.js
import { createClient, googleAnalytics } from 'react-metrics-service'
const client = createClient()
client.addDispatcher(googleAnalytics({ trackingID: 'UA-000000-01' }))
export default clientYou can create your own metrics-service module, check some examples in src/dispatchers
Use the service directly like:
import myClient from 'my-metrics'
export default () => {
// ...
myClient.callDispatchers('gaSend', 'event', 'Video', 'play')
// ...
}With Proxy support you can also write:
import myClient from 'my-metrics'
export default () => {
// ...
myClient.gaSend('event', 'Video', 'play')
// ...
}Add metricsServiceContext high order component to your app root component:
import { metricsServiceContext } from 'react-metrics-service'
import myClient from 'my-metrics'
const App = (
// ... your app here
)
export default metricsServiceContext({ client: myClient })(App)Then you can use the withMetricsServiceClient HOC:
import { withMetricsServiceClient } from 'react-metrics-service'
const Component = ({
metricsServiceClient
}) => {
// ...
metricsServiceClient.gaSend('event', 'Video', 'play')
// ...
}
export default withMetricsServiceClient()(Component)Or the metricsServiceClick HOC:
import { metricsServiceClick } from 'react-metrics-service'
import MyComponent from 'my-component.js'
export default metricsServiceClick('gaSend', 'event', 'Video', 'play')(MyComponent)- google analytics
- google analytics legacy
- google tag manager
- tealium
- debug log
import {
createClient,
googleAnalytics,
googleAnalyticsLegacy,
googleTagManager,
tealium,
debugLog
} from 'react-metrics-service'
const client = createClient()
client.addDispatcher(googleAnalytics({ trackingID: 'UA-000000-01' }))
client.addDispatcher(googleAnalyticsLegacy({ trackingID: 'UA-000000-01' }))
client.addDispatcher(googleTagManager({ containerID: 'GTM-0000', dataLayer: {} }))
client.addDispatcher(tealium({ account: 'acc', profile: 'pro', env: 'dev', utag_data: {} }))
client.addDispatcher(debugLog)- Event pool that can wait for dispatchers to boot
- Render hook support on dispatchers
- Standardize a isReady call on dispatchers
First of all, thank you for wanting to help!
- Fork it.
- Create a feature branch -
git checkout -b more_magic - Add tests and make your changes
- Check if tests are ok -
npm test - Commit changes -
git commit -am "Added more magic" - Push to Github -
git push origin more_magic - Send a pull request! ❤️ 💖 ❤️