How to track different authenticated users' actions using Mixpanel - reactjs

I have built a React application. The application requires users to login/signup first using Auth0. I have also implemented Mixpanel into my application to track the events (e.g. mixpanel.track('Click event A')). However, I would like to track the actions/events for each different individual user.
For example:
'mary#gmail.com' has clicked on event A for 3 times;
'eric#gmail.com' has clicked on event A for 2 times..etc
Can anyone give me specific steps or directions for how to approach to this purpose ?
P.S: I have read https://help.mixpanel.com/hc/en-us/articles/115004497803-Identity-Management-Best-Practices, it states to use mixpanel.alias(id) when users signup and mixpanel.identify(id) when users login. However, since I am using Auth0, I am not sure where should I include the mixpanel.alias(id).

Given that you only track events after the user has logged in (as per your comment) I don't see any reason for you to use mixpanel.alias.
When Auth0 successfully authorizes a user call mixpanel.identify. Following this the logged in user will be associated with all events that you track.
webAuth.popup.authorize({
redirectUri: 'https://YOUR_APP/popup_response_handler.html'
//Any additional options can go here
}, function(err, authResult) {
if(!err){
mixpanel.identify('USER_ID_HERE');
mixpanel.track('Successful Login');
}
});

Mixpanel uses a distinct_id to relate each track event with a certain profile on their system.
You can use people set events to enrich the profile with user data.
Alias is the mechanism they have to bind a profile’s history of events to a new id, normally used to correlate the actions of an anonymous user with a random distinct_id to the same user, now registered and with a determined user id.
The major limitation on mixpanel’s implementation is that they can only do 1 alias per profile. So, if a user already did the whole navigate anonymous and signup process, but comes again to your site anonymously and does a login, the second time he navigates anonymously will create a different history track of events that you can’t assign to the user.
Since you only want to track identified users, there’s no need to use alias.
Mixpanel provides a JavaScript library that automatically creates a distinct_id for any user, identified or not, that navigates to your site and doesn’t have a distinct_id yet. You need to use the library method identify with your user’s id so that instead of sending the track events with the distinct_id, it does so with your user id.
Now, the mixpanel library is quite heavy and does a lot of things you may not need. Like the distinct_id/identify thing I mentioned, plus browser info, domain and other filds that will automatically populate your track events. If you like that, fine.
If not, you can use the http api they have, which is very easy to use. You can simply do a post request indicating the user id and the event tracked, and you will have the same result without having to depend on the library.

Related

Microsoft Identity Web - How to get the User Signed In event?

I'm using the Microsoft.Identity.Web NuGet package in order to sign users into Net Core 3.1 WebApp using Azure AD, then once the user has signed in, I then use their token with scopes to call the MS Graph API to fetch some additional data from their profile, such as their forename, surname, username etc. Basically some additional bits of info about the user that is not automatically included in the token returned from Azure AD.
This part work is working fine.
What I want to achieve is configuring some form of a system event or trigger to tell me when the user has successfully signed in, I would then use this trigger to run the Graph API query and fetch the user's additional profile attributes. The reason I want to do this is so each time the user requests a new page and runs a method or action, I can include their additional attributes into the logging.
Because the Microsoft.Identity.Web package hides away the Account Controller somewhere within the NuGet package (assuming a dll or something) I can't seem to access it to look at what I could latch onto in the way of an event trigger that I can use for the above.
Unless I call the MS Graph once the user has logged in then I would not have access to some of the user profile attributes that I want to include in the Serilog Logging structure.
Once I have the user attributes needed from MS Graph then I assume the best solution would be to store them in memory as getters setters for the lifetime of the logged in session, that way I can then access them from any page model / controller within the app through DI or a model.
I had thought about just simply calling the MS Graph from a OnGet() method when the home index page is loaded after a successful login, but the challenge is a user might not necessarily login by visiting the home page first, they might have saved a bookmark to another page they want to go to straight away which means the OnGet() method in the Home page might never be run. I need a more bullet proof solution given I should ensure that these extra user profile attributes are fetched every time without fail, regardless of which page is first visited that prompts the user login process.
Note: I've observed the fact that if I go straight to a page that has authorization enabled, once logged in then OIDC just returns me to that same page.
The final step in this riddle would be to remove the saved user profile attributes from memory once the user logs out, but this should be easy enough given the logout session always returns me to https://localhost:5001/MicrosoftIdentity/Account/SignedOut
If anyone has any ideas on what I could work with using this library to achieve the above would be great, thanks
I found something within Microsoft Identity Web, for the custom code:
AddSignIn has another override, which takes delegates instead of a
configuration section. The override with a configuration section
actually calls the override with delegates. In advanced scenarios you
might want to add configuration by code, or if you want to subscribe
to OpenIdConnect events. For instance if you want to provide a custom
processing when the token is validated.
https://github.com/AzureAD/microsoft-identity-web/wiki/web-apps#using-delegate-events
Here are Microsoft code samples for the ASP.net core, for many cases:
https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2/

Create unique id per computer and use it as identifier when no user is logged in

I am trying to create a web app that would submit ratings to some articles. The backend is django and frontend is angularjs.
A rating is a model with the following properties: rater, value, and article
I would like to let anonymous users to submit ratings, in which case, the rater is null, but a sessionid is attached to the rating object to identify where this rating comes.
Currently, I am using the session module from django, and attaching session_key attribute to each rating object. However, this has issue that the session changed if a valid user is logged in and logged off.
What I would like to have is to have a unique identifier for each computer from which the rating is created, and attach this id to the object. So, as long as no user is logged in, the objects created by one computer, regardless of refreshing, rebooting, loggin+logout, etc., share the same identifier.
By doing this, my ultimate goal is to allow anonymous user using the App as if he/she is always logged in. In another word, each computer is a unique "implicit user" when no real user is logged in.
My question is that, is there a way to achieve this?
Thank you in advance!
LocalStorage
Anonymous users can't be tracked perfectly.
Best you can do in my opinion is using localStorage:
localStorage.setItem('anonymous-key', 'some-key-you-generated');
and then whenever no user is logged in:
var anonymousKey = localStorage.getItem('anonymous-key');
Persistence
Local storage stays saved until the user specifically clears it. Some browsers may also add a expiry date to your data for safety reasons.
See also: https://developer.mozilla.org/nl/docs/Web/API/Window/localStorage

Mixpanel - Is there a way to distinguish first time visitors from others?

We have Mixpanel currently setup in our website, and we are following the recommendation around using alias (when signing up) and identify (when users logs in).
One thing I can't get my head around is if it's possible with Mixpanel to see the behaviour users (logged in or not) have on theirs first visit to the website.
Since Mixpanel uses a cookie, I supposed I could manually check that, but just wondering if there is something already built for it.
You need to do this manually, there are no solutions for that task.
Mixpanel was not created for tracking visits, new unique users are tracked in Google Analytics.
Mixpanel places a timestamp for every event you track.
So, when you watch Retention it generally knows when the first ever event for each user occured.
If you want to analyze first visits in Mixpanel Funnels (not Retention) create event called "First Visit" and fire it using this scenario (you need to write additional code to your website of course):
On each user visit to your website ask mixpanel cookie if it already has UserID, not just an AnonymousID (watch Resources-Cookies in Google Chrome developers mode for parameters))
If it doesn't - fire IDENTIFY method (with anonymousID) and then your "First Visit" event.
If it does - do nothing.
Then, when user SignsUp - fire ALIAS method to merge previously identified anonymous visit with the newly identified registered user so that "First Visit" event will be tied to the registered UserID.
Note! This scenrio is suitable only if you use your own database userIDs and only if user visits your website from one device. (Unfortunately if user first came from PC and then registered from Tablet - the First Visit event tied in his profile will be from Tablet, not from PC. This is how cookie works)

Online GAE Application User

How to know if a user is currently logged-in in your Google App Engine application?
The application allow its users to browse other users' profile. If the viewed profile is also using or logged-in in the application, i want a notification that the viewed profile is online.
How to achieve this requirements?
If you are managing user profiles, you know when a user logs in. At the end of the login process, just save the user's log-in information in the memcache somehow.
You will later be able to check if a user is logged-in just by searching for him in your memcache.
This way is easy to catch and track the connection events, but you also have to react when a user disconnects, to have your list up to date. To achieve this, you can use a Channel. See the google documentation.
You could, as Gaël suggests, use the Channel API to track this, but it's probably overkill. If you wanted to go that route, just listen for the connected & disconnected messages, and update a field in the db that indicates that the user is signed in.
A less expensive route might be to just update a field in your user's record that's something like "last time this user requested a page." If it's been more than n minutes since the last time the user requested a page, assume they're signed out. Indeed, you could even do this in memcache with a map from userid to last access time.
It comes down to what you want to do with the "signed in" information: if you just want to give a general sense of whether a user's around, or how many users are online, using the datastore or memcache solution is probably good. On the other hand, if you want to reflect the user's presence so they can respond to eg. IMs, then you'll probably want the Channel API anyway so you can immediately deliver messages to them.

How to protect rating system written with GAE usage (i.e. allow only one vote)?

When my site is loaded, I get unique user's id. User can not change it - the site is loaded as iframe and id is passed thru GET:
if self.request.get('user_id'):
user = User(key_name="id"+self.request.get('viewer_id'))
user.put()
It can be used to allow only one vote per one user id. But how can I pass it safely to another GAE page? I.e. user loaded my first page, I've save his/her id to the datastore (User model). User will vote on another page - I can not pass his id as ?id=12345 to another page. What should I do to know this id at another page (so that user will not be able to change that)?
This mechanism isn't safe in the first place - a user could easily look at the iframe in his browser, determine how the ID is passed in, and change it to pass in any ID they wish. You need to work out a way of getting the user ID from the host site that is actually secure.
As to ensuring users can't imitate each other after that, you should use a sessions library to establish a cookie session, and store the user's ID in the session state.

Resources