Integration with ChurnZero for analytics
This analytics plugin will load ChurnZero's client side tracking script into your application and send custom events, page views, and identify visitors inside ChurnZero.
Click to expand
Install analytics and @analytics/churn-zero packages
npm install analytics
npm install @analytics/churn-zeroThe @analytics/churn-zero package works in the browser and server-side in Node.js. To use, install the package, include in your project and initialize the plugin with analytics.
Below is an example of how to use the browser plugin.
import Analytics from 'analytics'
import churnZeroPlugin from '@analytics/churn-zero'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
churnZeroPlugin({
appKey: '1234578',
subdomain: 'mycompanydomain'
})
]
})
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})After initializing analytics with the churnZeroPlugin plugin, data will be sent into ChurnZero whenever analytics.track, or analytics.identify are called.
See additional implementation examples for more details on using in your project.
The @analytics/churn-zero package works in the browser and server-side in Node.js
The ChurnZero client side browser plugin works with these analytic api methods:
- analytics.identify - Identify visitors and send details to ChurnZero
- analytics.track - Track custom events and send to ChurnZero
import Analytics from 'analytics'
import churnZeroPlugin from '@analytics/churn-zero'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
churnZeroPlugin({
appKey: '1234578',
subdomain: 'mycompanydomain'
})
]
})| Option | description |
|---|---|
appKey required - string |
ChurnZero AppKey |
subdomain required - string |
ChurnZero AppKey |
whitelistedEvents required - string |
An optional list of events to track |
The ChurnZero server-side node.js plugin works with these analytic api methods:
- analytics.track - Track custom events and send to ChurnZero
- analytics.identify - Identify visitors and send details to ChurnZero
import Analytics from 'analytics'
import churnZeroPlugin from '@analytics/churn-zero'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
churnZeroPlugin({
appKey: '1234578',
subdomain: 'mycompanydomain'
})
]
})| Option | description |
|---|---|
appKey required - string |
ChurnZero API key |
subdomain required - string |
ChurnZero AppKey |
whitelistedEvents required - string |
An optional list of events to track |
Below are additional implementation examples.
Server-side ES6
import Analytics from 'analytics'
import churnZeroPlugin from '@analytics/churn-zero'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
churnZeroPlugin({
appKey: '1234578',
subdomain: 'mycompanydomain'
})
// ...other plugins
]
})
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})Server-side Node.js with common JS
If using node, you will want to import the .default
const analyticsLib = require('analytics').default
const churnZeroPlugin = require('@analytics/churn-zero').default
const analytics = analyticsLib({
app: 'my-app-name',
plugins: [
churnZeroPlugin({
appKey: '1234578',
subdomain: 'mycompanydomain'
})
]
})
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})Using in HTML
Below is an example of importing via the unpkg CDN. Please note this will pull in the latest version of the package.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/churn-zero in HTML</title>
<script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
<script src="https://unpkg.com/@analytics/churn-zero/dist/@analytics/churn-zero.min.js"></script>
<script type="text/javascript">
/* Initialize analytics */
var Analytics = _analytics.init({
app: 'my-app-name',
plugins: [
analyticsChurnzero({
appKey: '1234578',
subdomain: 'mycompanydomain'
})
]
})
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})
</script>
</head>
<body>
....
</body>
</html>Using in HTML via ES Modules
Using @analytics/churn-zero in ESM modules.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/churn-zero in HTML via ESModules</title>
<script>
// Polyfill process.
// **Note**: Because `import`s are hoisted, we need a separate, prior <script> block.
window.process = window.process || { env: { NODE_ENV: 'production' } }
</script>
<script type="module">
import analytics from 'https://unpkg.com/analytics/lib/analytics.browser.es.js?module'
import analyticsChurnzero from 'https://unpkg.com/@analytics/churn-zero/lib/analytics-plugin-churn-zero.browser.es.js?module'
/* Initialize analytics */
const Analytics = analytics({
app: 'analytics-html-demo',
debug: true,
plugins: [
analyticsChurnzero({
appKey: '1234578',
subdomain: 'mycompanydomain'
})
// ... add any other third party analytics plugins
]
})
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})
</script>
</head>
<body>
....
</body>
</html>