loading...

Using Segment with Ember.js

mblayman profile image Matt Layman Originally published at mattlayman.com ・2 min read

I've been working on College Conductor to help serve Independent Educational Consultants (like this one :) and high school guidance counselors. To find product market fit, I'm using Segment which gets the data I need to decide how to improve the service. In this post, I'll describe how I connected Segment to College Conductor's Ember.js frontend.

Working with Segment in Ember can be done with ember-cli-segment, an Ember addon that provides an Ember service to communicate with Segment. The first thing I did was install the addon with:

$ ember install ember-cli-segment

ember-cli-segment has a solid README on their GitHub page that instructs users what to do at a very detailed level. Before getting buried in details, I had two initial goals with this addon.

  1. Connect to Segment to record basic analytics.
  2. Utilize the identify API to connect users to their actions.

Once these two goals were completed, I could monitor enough behavior to make data based decisions about what to improve in the product.

Connect to Segment

Connecting the Ember app to Segment involved adding my Segment write key to the app's configuration. The result in my environment.js file was something like:

ENV['segment'] = {
  WRITE_KEY: 'my_segment_write_key'
}

With that much configuration, data started flowing from College Conductor to Segment. Exciting!

Identifying users

My second goal of identifying users was done with an application route hook. If you create a method named identifyUser in your application route, then ember-cli-segment will make the identify API call on your behalf.

I had to supply a user ID and whatever other information I wanted. At this stage in my product development, including the account username is all the extra data I want.

My code in app/application/route.js looks like:

identifyUser() {
  const user = this.get('currentUser.user');
  if (user) {
    this.get('segment').identifyUser(
      user.get('id'), {username: user.get('username')});
  }
}

This code grabs the authenticated user from the currentUser service that I created and identifies that user with Segment.

Thankful

By the time I finished with this work, I was very grateful for ember-cli-segment. The addon made my job much easier. This is one of the things that I really like about the Ember community. Ember CLI addons can take out some of the very heavy development work. That means I can spend more time on College Conductor and less time on the nuts and bolts of service integration.

This article first appeared on mattlayman.com.

Discussion

pic
Editor guide
Collapse
jonnydubowsky profile image
Jonny Dubowsky

Hey great posts. I have been getting into Ember.js as I have been working on cardstack developing plugins that use Ember.. I wanted to just let you know that the college conductor website is currently down. Getting a connection error.

Collapse
mblayman profile image
Matt Layman Author

Thanks Jonny. I appreciate you reaching out. This articles is one from my archives that I'm reposting to DEV for people who might have missed it (like yourself, I guess).

I made the decision to shut down College Conductor and turned the site off last week. I streamed on Twitch about what I learned and posted the learnings to YouTube (mattlayman.com/building-saas/faile...).