Adding segment.io identify to community app for Chameleon

[harshitmehta15]

For chameleon implementation we need to track specific event segments identify. We need to add analytics.identify segment script to the community app. @birdofpreyru is this something you can help us with? cc: @ajefts @dmessing

[birdofpreyru]

@harshitmehta123 sure. So, I just add the script from the page you referrenced, and populate user data from TC profile into initialization parameters of that script? Is there anything else this think needs to work? Should be present on all pages, or just selected ones, should it track any user, or only depending on their roles?

[harshitmehta15]

Yeah, we need to add the script and auto populate from TC Profile parameters. It should be present on all the pages. Should be ignored when no user is logged in. Didn't understand "track any user"?

[birdofpreyru]

@harshitmehta123 @ajefts e.g. Wipro's community and employees. Are they fine with this tracking code? I mean, moat probably they won't notice it, but just in case wanna double-check

[birdofpreyru]

@harshitmehta123 I've added the call to analytics.identify(..) to the app version deployed to https://community-app.topcoder-dev.com/

It looks to me, though, that we also should call analytics.load(..), and probably analytics.page(..) as shown in these quick start article: https://segment.com/docs/sources/website/analytics.js/quickstart/ Did not have these added yet. If we need them, then analytics.load(..) should receive Segment.io API key (they call it Write Key), so I need key values for dev and prod.

[vikasrohit]

@birdofpreyru yes, we definitely need to call analytics.load i.e. we need to bootstrap segment on page load. I was under impression that we are already using segment for community-app as I can it as a source in segment dashboard. Here is sample code for bootstrapping segment. I can add the segment key as environment variable to the circle build of the community app.

However, I would request you to check once again if we are already bootstrapping the segment somewhere in community-app.

[birdofpreyru]

@vikasrohit oh, you are right! Found the initialization code here: https://github.com/topcoder-platform/community-app/blob/develop/src/server/renderer.jsx#L127 Though, is it fine that now it is called everywhere with the same API key, which is also plain text in HTML? I would move that init code into https://github.com/topcoder-platform/community-app/blob/develop/src/client/client.jsx and the key itself into Circle CI vars (and then we can have different keys for dev/prod, or just use only for prod).

[vikasrohit]

I would move that init code into https://github.com/topcoder-platform/community-app/blob/develop/src/client/client.jsx and the key itself into Circle CI vars (and then we can have different keys for dev/prod, or just use only for prod).

That would be great.

@birdofpreyru I guess, if we are already loading the segment script and now as you have added identify call as well, so it should be all done. Let me check on segment dashboard if we are getting the events.

[vikasrohit]

@birdofpreyru Just checked. Right now it is tracking the dev environment events into production segment source because, as you mentioned above, right now api key is hard coded. I have also checked that it is not tracking the identify event yet on that source, may be it didn't deploy on dev with your changes?

So, I guess, we need two things to be done:

1. Use separate keys for dev and prod environments
2. Deploy the change with identify call and verify it for dev segment source.

Please ping me on Slack, if you need key for dev environment.

[harshitmehta15]

Hi @birdofpreyru Were you able to work on this?

[birdofpreyru]

Hey @harshitmehta123 , I have not done anything else about it yet, but I'll look into this today/tomorrow. Thanks for reminding!

[birdofpreyru]

@harshitmehta123 @vikasrohit Updated version is deployed to dev environment (https://community-app.topcoder-dev.com/), I need your help to verify whether it works, or still has problems: the analytics.js library, recommended by Segment.io, lacks documentation on initialization in the setup we use (when we bundle it completely into our code, rather than load client-side from their cdn). I believe, I set it up correctly just looking at their code, but sure could do some mistakes on the way.

[vikasrohit]

@birdofpreyru Thanks for confirming. However, I checked it again and it seems somehow we are not getting the 'identify' event yet into segment. We are getting the 'page' event though. Is it possible that because of certain condition or check in if block here it is not making the identify call?

One more thing, it is still pointing to production segment source instead of dev one for dev environment(blockchain.topcoder-dev.com) as well.

[birdofpreyru]

@vikasrohit my bad: when doing the changes, I forgot to remove the old code for Segment.io initialization. I am not sure, though whether with two calls to init the latter one was effectively cancelled (and thus the identity event, depending on the second init was not sent), or I just have not set the second init properly, and it was not sent because of that. Please, check again with the current version in dev: do you see any events from that into dev Segment.io, or none?

Also, should we sent page event each time a visitor moves between routes inside the app, or we are fine if it is called only on the initial load of the app?

[vikasrohit]

@birdofpreyru Thanks for looking into it, however, it seems it is still not fixed. I am not seeing any event in dev segment source. In fact, I think now page event (for dev env) is not being recorded in production source as well. Only event I can see in the segment (and that too on production source) is for logout or first time landing on home page (blockchain.topcoder-dev.com).

[birdofpreyru]

@vikasrohit oh... Will you provide me access to the dev segment io, so that I can debug it all efficiently?

[birdofpreyru]

Actually, no need to access it, I just registered my own dev account at segment.io, and I hope to sort this thing out till the end of this week

[birdofpreyru]

@vikasrohit @harshitmehta123 now I am pretty sure I have fixed it in dev. At the moment identity(..) sends user IDs as the name, if you prefer, I change to user handles. Also, as page(..) event is sent only once when the app is loaded, and not when the pages are changed without reloading the app. Tell me if you need to really call it on each page transition. And if these two are fine for you, we can close the ticket.

[vikasrohit]

Great!!! @birdofpreyru it worked this time. I checked and found identify event logged for blockchain.topcoder-dev.com. However, as you said, we need to add more fields to the payload. We are having following event tracked when someone loads connect app.

analytics.identify('23707', {
  avatar: null,
  createdAt: new Date('2012-10-31T04:28:00.000Z'),
  email: 'email@domain.com.z',
  firstName: 'F_NAME',
  id: '23707',
  lastName: 'L_NAME',
  role: 'Connect Role',
  username: 'someuser'
});

And yes, it would be great if we can add tracking for different page loads e.g. in connect we are doing like this.

[birdofpreyru]

@vikasrohit ok, updated, not it is supposed to work the way you say, both in dev and prod.

[harshitmehta15]

@birdofpreyru Were you able to deploy the same in production also?

[vikasrohit]

@birdofpreyru I have also noticed that we are not receiving the same events for topcoder.com/challenges page? Is it not served via community app?

[birdofpreyru]

@harshitmehta123 @vikasrohit it is deployed to prod, and I can see the calls to segment api in the network trace, when I access Blockchain community in prod. I'll drop you a screenshot via Slack in a bit, so you can check it uses the correct API key, etc.

[vikasrohit]

Yes @birdofpreyru I can see the events in production. However, I think /challenges page is not using community-app yet, hence, it is not sending the required event for that page. And I think @harshitmehta123 needs it for /challenges page. Do you have idea where is the /challenges hosted right now?

[birdofpreyru]

Eh, in fact, /challenges page (the challenge listing of the main community site) is already served from Community App, and I've just checked in the similar way, I see the same events being sent there

[harshitmehta15]

Thanks @birdofpreyru