@thrivehive/segment


Implements Segment.io identify, page, and track methods, and adds a setup function to inject the segment script into your page with your write key.

Also removes the need to paste the segment JS snippet into .

A Vue directive is also included to make event tracking easier.

Installation

``bash
npm install @thrivehive/segment
`

Setup

Inject the official segment.js script into the page with your write key:

`js
import { setup } from '@thrivehive/segment';

setup('');
`

Tracking methods

$3

Wrapper for analytics.identity:

`js
// Foo.vue
import { identify } from '@thrivehive/segment';

const user = {
name: 'Jane Doe',
active: true
}

export default {
mounted() {
identify(user.name, {
active: user.active
});
}
}
`

$3

Wrapper for analytics.track:

`js
// Foo.vue
import { trackEvent } from '@thrivehive/segment';

export default {
methods: {
foo() {
trackEvent('Button clicked', properties);
}
}
}
`

$3

Wrapper for analytics.page:

`js
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import { trackPageView } from '@thrivehive/segment';

Vue.use(Router);

const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'search',
component: Search
}
]
});

router.afterEach((to) => {
trackPageView(to.name, to.query);
});

`

Vue plugin

@thrivehive/segment also includes a Vue plugin. The plugin will handle the setup function for you, and adds a Vue directive for easy event tracking. More info about Vue directives.

$3

Setup the plugin:

`js
import Vue from 'vue';
import { VueSegment } from '@thrivehive/segment';

Vue.use(VueSegment, {
key: ''
});
`

$3

The directive accepts a single argument, the eventName to listen for. By default, this is a Vue event listener, not native.

Example using button:

`html

`

$3

The expression passed to the directive may one of the following:

-
- description: Message to send to segment.io
-