@thrivehive/segment

v1.3.1

Published

2 years ago

Implements segment.io tracking to @thrivehive projects

Downloads

0High
0Medium
0Low

`@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 <head>.

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

Installation

npm install @thrivehive/segment

Setup

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

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

setup('<YOUR WRITE KEY>');

Tracking methods

identity

Wrapper for analytics.identity:

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

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

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

trackEvent

Wrapper for analytics.track:

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

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

trackPageView

Wrapper for analytics.page:

// 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.

Setup Vue plugin

Setup the plugin:

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

Vue.use(VueSegment, {
  key: '<YOUR WRITE KEY>'
});

Argument

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

Example using button:

<template>
  <button v-segment:click="'User clicked button'">
    Click me
  </button>
</template>

Value

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

<string>
- description: Message to send to segment.io
<object>
- message
  - type: <string>
  - description: Message to send to segment.io
- data
  - type: <object>
  - description: Data to send to segment.io, must be an object, data that may change should be a reference to a computed property that returns an object.

Example usage with message only:

<template>
  <div v-segment:mouseenter="'User hovered over div'"></div>
</template>

Example usage with verbose syntax:

<template>
  <div>
    <form
      v-segment:submit="{
        message: 'User submitted form',
        data: trackingInfo
      }"
    >
      <input type="text" v-model="value" />
    </form>
  </div>
</template>

<script>
export default {
  data: () => ({
    value: null
  }),
  computed: {
    trackingInfo() {
      return {
        value: this.value
      }
    }
  }
}
</script>

Modifier

It is also possible to listen to a native event instead of a Vue event. Just like with normal Vue event listeners, you can use the .native modifier to use the native event listener:

<template>
  <button v-segment:click.native="'User clicked button'">
    Click me
  </button>
</template>