Ember CLI segment

Ember CLI addons that provides a clean and easy way to integrate your Ember application with Segment.com.

Installation

ember install ember-cli-segment

v2.1+ is compatible with Ember v1.13+

Configuration/Logging

Add your Segment WRITE_KEY to the segment config object for Analytics.js to be loaded and configured automatically.

There is an option available to configure the events log tracking, the default value is false. This option is optional, but recommended.

In your config/environment.js

ENV['segment'] = {
  WRITE_KEY: 'your_segment_write_key',
  LOG_EVENT_TRACKING: true
};

There is an option available to disable the default page tracking on the application.didTransition event. If you do not disable this option then tracking events will by default be sent to Segment.

ENV['segment'] = {
  defaultPageTrack: false
};

There is an option available to disable the default identify function on the application.didTransition event. If you do not disable this option then identify events will by default be sent to Segment.

ENV['segment'] = {
  defaultIdentifyUser: false
};

Usage

The addon exposes a service that you can inject in routes, components and more.

// app/components/some-awsome-component.js
import Ember from 'ember';

const { inject: { service } } = Ember;

export default Ember.Component.extend({
  segment: service()
});

Tracking Page Views

Your router will automatically send a page view event to Segment using the method page under window.analytics everytime the URL changes.

If you need to call it manually for some reason, you can do it using the following method in the service.

this.get('segment').trackPageView();

The method trackPageView can receive a parameter that's the page url, if not provided it will fetch from window.location.

Tracking Other Events

You will probabily need to track other events manually as well. We got you covered! Since we have the service, it's really straightforward to do it.

Let's say that you need to track an event when the user submits an form in your router.

// File: app/routes/posts/new.js
import Ember from 'ember'

const { inject: { service } } = Ember;

export default Ember.Route.extend({
	segment: service(),

  actions: {
    submit: function() {
      this.get('segment').trackEvent('Creates a new post');
    }
  }
});

trackEvent can receive additional properties as well:

this.get('segment').trackEvent('Creates a new post', { title: "Creating a Ember CLI application" });

All the parameters you can provide are: event, properties, options, callback in this order.

Identifying the User

We will automatically call identifyUser method from your application route everytime the URL changes. Inside this method, you should call this.get('segment').identifyUser passing the parameters that you want to send to Segment.

// File: app/routes/application.js
import Ember from 'ember';

const { inject: { service } } = Ember;

export default Ember.Route.extend({
	segment: service(),

  identifyUser: function() {
    this.get('segment').identifyUser(1, { name: 'Josemar Luedke' });
  }
});

You should have in mind that you should make a conditional validation to check if the user is currently logged in. For example:

import Ember from 'ember';

const { inject: { service } } = Ember;

export default Ember.Route.extend({
	segment: service(),

  identifyUser: function() {
    if (this.get('currentUser')) {
      this.get('segment').identifyUser(this.get('currentUser.id'), this.get('currentUser')));
    }
  }
});

All the parameters you can provide are: userId, traits, options, callback in this order.

ember test
ember test --server

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

License

Licensed under the MIT license.

isabella232 / ember-cli-segment Goto Github PK