We started this tutorial by creating an input using the Higgs Shop sample app, setting up a webhook output, and creating a connection between the two. We then learned how to collect data about specific events.
If the Higgs Shop were a real app, these events would be triggered by users. Building an understanding of who these users are and how they’re interacting with the app is the final piece of our data puzzle.
We track users with IDSync, mParticle’s identity resolution and management tool. IDSync provides three main benefits:
IDSync accepts requests from the web SDK to identify the current user of your app. These requests include any available identifiers (either in cookies or the browser’s local storage) that are used to search for a matching user profile in mParticle. If a match is found, then the found profile is used to track the user’s data. If a match isn’t found, the user remains in an anonymous state and any future events they trigger are attached to an anonymous profile.
There are several components and concepts involved in identity resolution:
All users are considered to be either known or anonymous. A known user has an existing profile containing a Login ID. For example, a user who has already created an account using a Login ID is considered known.
An anonymous user does not have a profile with a Login ID. A user may have previously used your app, generating data that is attributed with a profile, but if they haven’t created an account with a Login ID they are considered anonymous.
The process of identifying users (often called “identity resolution”) involves three steps:
An identify call is made, passing in any available identifiers. These might be identifiers like a device ID stored within the browser’s local storage or a cookie, or they could be a login ID like an email address or username that the user entered into a login form. To handle user logins, we use the mParticle.Identity.login() method
, explained below.
IDSync looks for a matching user profile using the identifiers included with the identification request in order of preference as defined by your identity priority. For example, an email address will return a matching user profile with a higher degree of confidence than a device ID, so email address is usually listed higher in your identity priority.
If a match is found, IDsync returns the corresponding mParticle ID (MPID), the user becomes known, and all previous and following events are associated with this MPID. If a match wasn’t found, the SDK continues to use the original MPID generated for the current user, as per the default identity strategy.
Now that we’re familiar with the concepts of identity resolution, let’s learn how to use the Web SDK to identify and track users in the Higgs Shop sample app.
IDsync provides four methods for tracking and managing users:
identify
: Called automatically when the SDK is initialized.login
: Used when a user logs into an account.logout
: Used when a user logs out of an account.modify
: Used when you need to add or change the identities associated with a profile, such as when a user updates their email address or phone number.When calling any of these methods from your app, you must include a userIdentities
object containing the identifiers you want to associate with the resulting user (the user profile returned by the IDSync method you call).
All userIdentities
objects contain a JSON formatted object of one or more key/value pairs:
var identifyRequest = {
userIdentities: {
email: 'email@example.com',
customerid: '123456'
}
}
For a complete list of the possible identities you may use, see Supported Identity Types.
The identify
method is called automatically by the SDK when it is first initialized in your app at the beginning of a session (not on every page load).
If you already have identities that you want to associate with the resulting user, you may provide them in a userIdentities
object (as shown above) and set it to the identifyRequest
field of the mParticle.config
object.
If you don’t provide any identities in an identityRequest
object, then the SDK uses browser local storage based on the most recent user.
Below is a generic example of how you can invoke the identify
method automatically upon SDK initialization. Notice the email
and customerID
identities supplied in the identifyRequest
object and the use of the identityCallback
function to assign attributes to the resulting user.
window.mParticle = {
config: {
identifyRequest: {
userIdentities: {
email: 'email@example.com',
customerid: '123456'
}
},
identityCallback: function(result) {
// You can check if there's a populated user object, otherwise there was an error
// You can also inspect the result.httpCode - see below for a description of the supported codes
if (result.getUser()) {
result.getUser().setUserAttribute('ATTRIBUTE-KEY', 'ATTRIBUTE-VALUE');
} else {
//the IDSync call failed - see below for more details on failed requests
}
}
}
};
In the Higgs Shop sample app, we invoke the identify
method with an arrow function in the file src/layouts/App/index.tsx
:
identityCallback: (result) => {
if (result.getUser()) {
// User has been identified
// proceed with any custom logic that requires a valid, identified user
const user = result.getUser();
const identities = user.getUserIdentities();
// We are simply logging the User Identities object as an example of the
// contents
console.log('User Identities', identities);
} else {
// the IDSync call failed
}
},
You will notice that the Higgs Shop is not configured to handle a failed IDSync request, but the SDK does provide this functionality. Learn more in Error Handling.
You can configure your app to call the login
method whenever a user performs the corresponding action in your app. The login
method accepts an identity request as shown above, in addition to an optional callback function.
Following is a generic example of the use of the login
method to log in a user with a known email address and customer ID:
var identityRequest = {
userIdentities: {
email: 'email@example.com',
customerid: '123456'
}
};
var identityCallback = function(result) {
if (result.getUser()) {
//proceed with login
}
};
mParticle.Identity.login(identityRequest, identityCallback);
In the Higgs Shop, login behavior is defined with an arrow function in the file src/layouts/pages/AccountPage/AccountPage.tsx
:
const handleLogIn = (username: string) => {
// For our example, we are simulating an external login service
// that simply returns a user object if the login was 'successful'
// Our Sample App does not authenticate or authorize a user, and we
// do not handle passwords.
const myUser = login(username);
const { email, customerid } = myUser;
// Our Sample App uses mock data based on what is entered into the UI.
// To demonstrate our configuration, we are explicitly declaring that
// we are using a custom customer ID and email address to identify our
// 'customer'. mParticle supports many other forms of identity to
// identify users.
// Visit our Docs for more details:
// https://docs.mparticle.com/developers/sdk/web/idsync/#supported-identity-types
const identityRequest: mParticle.IdentityApiData = {
userIdentities: {
email,
customerid,
},
};
const identityCallback: mParticle.IdentityCallback = (result) => {
if (result.getUser()) {
// Handle any necessary post-login actions
}
};
mParticle.Identity.login(identityRequest, identityCallback);
};
The logout
method is very similar to login
. You can also include an object containing any anonymous identifiers you want to associate with the logged-out state of the user. Usually, this object is left empty so that the logged out user has no associated identifiers.
var identityCallback = function(result) {
if (result.getUser()) {
//proceed with logout
}
};
mParticle.Identity.logout({}, identityCallback);
In the Higgs Shop, log out behavior is handled with an arrow function in the file src/layouts/pages/AccountPage/AccountPage.tsx
:
const handleLogout = () => {
// As we are logging out, we no longer need to pass any custom
// User Identities. However Typescript requires that we pass in
// a full Identity object.
const identityRequest: mParticle.IdentityApiData = {
userIdentities: {},
};
const identityCallback: mParticle.IdentityCallback = (result) => {
if (result.getUser()) {
// Handle any necessary post-login actions
}
};
mParticle.Identity.logout(identityRequest, identityCallback);
// As an example, we are formally logging the user out separately from
// any mParticle logging actions
logout();
};
To modify a user’s profile, call the mParticle.Identity.modify()
method, passing in an identityRequest object containing the new identifiers you want to associate with the resulting user, and an identityCallback function
.
In the following example, the SDK would either update the existing email address associated with the user or add the email address if one didn’t already exist.
var identityRequest = {
userIdentities: { email: 'updated-email@example.com' }
}
mParticle.Identity.modify(identityRequest, identityCallback);
Was this page helpful?