Skip to content

Commit efb4f85

Browse files
committed
images > code
1 parent ed155e8 commit efb4f85

File tree

1 file changed

+173
-18
lines changed

1 file changed

+173
-18
lines changed

src/connections/spec/best-practices-identify.md

Lines changed: 173 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -48,40 +48,195 @@ You should make an `identify` call in the following situations:
4848

4949
## Soft User Registration
5050

51-
An anonymous user visits the site for the very first time. The home page has the analytics.js tracking snippet loaded in its header. When the page loads, this sets off the default `page` call to Segment. The Segment SDK generates and sets `anonymousId`.
51+
An anonymous user visits the site for the very first time. The home page has the analytics.js tracking snippet loaded in its header. When the page loads, this sets off the default `page` call to Segment. The Segment SDK generates and sets `anonymousId`.
5252

53-
![Page Call](https://user-images.githubusercontent.com/78389005/214352835-5c3f7f28-af28-428e-bb8a-88ad39d53b46.png)
53+
```js
54+
analytics.page({
55+
path: '/',
56+
title: 'Home Page',
57+
url: 'https://somesite.com/',
58+
})
59+
```
60+
61+
<!---[Page Call](https://user-images.githubusercontent.com/78389005/214352835-5c3f7f28-af28-428e-bb8a-88ad39d53b46.png)--->
5462

5563
You can see in this full page event, the `anonymousId` is populated, and the `userId` is null.
5664

57-
![Full Page Payload](https://user-images.githubusercontent.com/78389005/214352920-cd7ac161-8e54-4de0-a522-35e6ed8a6e03.png)
65+
```js
66+
{
67+
"anonymousId": "bd077b70-816b-448b-ae79-2f5f7d856513"
68+
"context": {
69+
"ip": "0.0.0.0",
70+
"library": {
71+
"name": "analytics.js",
72+
"version": "3.11.4"
73+
},
74+
"locale": "en-US",
75+
"page":{
76+
"path":"/"
77+
"referrer": "",
78+
"search": "",
79+
"title": "Home Page",
80+
"url": "https://somesite.com"
81+
},
82+
"userAgent": "Mozilla/5.0"
83+
},
84+
"integrations": {},
85+
"messageId": "ajs-84d32beb4273e661a2257bfef41c4964",
86+
"originalTimestamp": "2020-04-23T22:38:48.55Z",
87+
"properties":{
88+
"path": "/",
89+
"referrer": "",
90+
"search": "",
91+
"title": "Home Page",
92+
"url": "https://somesite.com"
93+
},
94+
"recievedAt": "2020-04-23T22:38:48.55Z",
95+
"sentAt": "2020-04-23T22:38:48.55Z",
96+
"timestamp": "2020-04-23T22:38:48.55Z",
97+
"type": "page",
98+
"UserId": null
99+
}
100+
```
101+
102+
<!---[Full Page Payload](https://user-images.githubusercontent.com/78389005/214352920-cd7ac161-8e54-4de0-a522-35e6ed8a6e03.png)--->
58103

59104
The user signs up for an email newsletter and fills out the form giving you their first and last name, as well as their email address. At this point, you will fire off an `identify` call. You won't yet assign them a user ID in this example, but you can still grab these traits about them.
60105

61-
![Fire Identify Call](https://user-images.githubusercontent.com/78389005/214353033-e90b6e7f-f593-416e-9f13-44848fab595a.png)
106+
```js
107+
analytics.identify({
108+
firstName: 'Joe',
109+
lastName: 'Visitor',
110+
111+
});
112+
```
113+
114+
<!---[Fire Identify Call](https://user-images.githubusercontent.com/78389005/214353033-e90b6e7f-f593-416e-9f13-44848fab595a.png)--->
62115

63116
You'll notice the identify call contains no `userId`. These traits will be associated to the `anonymousId` that is available in the user's cookie and `localStroage`.
64117

65-
![No UserId in Payload](https://user-images.githubusercontent.com/78389005/214353985-599e7456-9295-4cb3-b97c-b30a9b905fcf.png)
118+
```js
119+
{
120+
"anonymousId": "bd077b70-816b-448b-ae79-2f5f7d856513"
121+
"context": {
122+
"ip": "0.0.0.0",
123+
"library": {
124+
"name": "analytics.js",
125+
"version": "3.11.4"
126+
},
127+
"locale": "en-US",
128+
"page":{
129+
"path":"/"
130+
"referrer": "",
131+
"search": "",
132+
"title": "Email Signup",
133+
"url": "https://somesite.email"
134+
},
135+
"userAgent": "Mozilla/5.0"
136+
},
137+
"integrations": {},
138+
"messageId": "ajs-84d32beb4273e661a2257bfef41c4964",
139+
"originalTimestamp": "2020-04-23T22:38:48.55Z",
140+
"properties":{
141+
"path": "/",
142+
"referrer": "",
143+
"search": "",
144+
"title": "Home Page",
145+
"url": "https://somesite.com"
146+
},
147+
"recievedAt": "2020-04-23T22:38:48.55Z",
148+
"sentAt": "2020-04-23T22:38:48.55Z",
149+
"timestamp": "2020-04-23T22:38:48.55Z",
150+
"traits"{
151+
"email": "[email protected]",
152+
"first_name": "Joe"
153+
"last_name": "Visitor"
154+
},
155+
"type": "page",
156+
"UserId": null
157+
}
158+
```
159+
160+
<!--[No UserId in Payload](https://user-images.githubusercontent.com/78389005/214353985-599e7456-9295-4cb3-b97c-b30a9b905fcf.png)-->
66161

67162

68163
## Full User Registration
69164

70-
An anonymous visitor registers for an account and becomes a known user. The account creation process allows you to assign a `userId` from your production database, as well as capture additional traits. For this example, the `userId` that is assigned is "123abc". This is when you'll want to fire an `identify` call with this user's newly assigned `userId` and additional traits.
165+
An anonymous visitor registers for an account and becomes a known user. The account creation process allows you to assign a `userId` from your production database, as well as capture additional traits. For this example, the `userId` that is assigned is "123abc". This is when you'll want to fire an `identify` call with this user's newly assigned `userId` and additional traits.
71166

72-
![Identify Call with UserId](https://user-images.githubusercontent.com/78389005/214355367-a24d55ce-4963-4da0-a67d-a8b1811ef0d0.png)
167+
```js
168+
analytics.identify(`123abc`,{
169+
phone: '555-555-5555',
170+
address: {
171+
street: '6th Street',
172+
city: 'San Fransisco',
173+
state: 'CA',
174+
postalCode: '94103',
175+
country: 'US',
176+
}
177+
});
178+
```
73179

74-
After you fire the `identify` call with the `userId`, you'll notice that the payload now has both a `userId` *and* an `anonymousId` attributed to the user.
180+
<!---[Identify Call with UserId](https://user-images.githubusercontent.com/78389005/214355367-a24d55ce-4963-4da0-a67d-a8b1811ef0d0.png)--->
75181

76-
![Identify Payload with userId](https://user-images.githubusercontent.com/78389005/214355863-58c58cb7-f199-4bec-93b8-ab6487d6c0b3.png)
182+
After you fire the `identify` call with the `userId`, you'll notice that the payload now has both a `userId` *and* an `anonymousId` attributed to the user.
183+
184+
```js
185+
{
186+
"anonymousId": "bd077b70-816b-448b-ae79-2f5f7d856513"
187+
"context": {
188+
"ip": "0.0.0.0",
189+
"library": {
190+
"name": "analytics.js",
191+
"version": "3.11.4"
192+
},
193+
"locale": "en-US",
194+
"page":{
195+
"path":"/"
196+
"referrer": "",
197+
"search": "",
198+
"title": "Email Signup",
199+
"url": "https://somesite.email"
200+
},
201+
"userAgent": "Mozilla/5.0"
202+
},
203+
"integrations": {},
204+
"messageId": "ajs-84d32beb4273e661a2257bfef41c4964",
205+
"originalTimestamp": "2020-04-23T22:38:48.55Z",
206+
"properties":{
207+
"path": "/",
208+
"referrer": "",
209+
"search": "",
210+
"title": "Home Page",
211+
"url": "https://somesite.com"
212+
},
213+
"recievedAt": "2020-04-23T22:38:48.55Z",
214+
"sentAt": "2020-04-23T22:38:48.55Z",
215+
"timestamp": "2020-04-23T22:38:48.55Z",
216+
"traits"{
217+
"phone": '555-555-5555',
218+
"address": {
219+
"street": '6th Street',
220+
"city": 'San Fransisco',
221+
"state": 'CA',
222+
"postalCode": '94103',
223+
"country": 'US',
224+
}
225+
},
226+
"type": "page",
227+
"UserId": null
228+
}
229+
```
230+
231+
<!---[Identify Payload with userId](https://user-images.githubusercontent.com/78389005/214355863-58c58cb7-f199-4bec-93b8-ab6487d6c0b3.png)--->
77232

78233
## Merging Identified and Anonymous user profiles
79234

80-
The illustration below shows a timeline with a user's interactions on a website, including sample API calls above that show Segment calls, and the user's `anonymousId` and `userId`.
235+
<!--- The illustration below shows a timeline with a user's interactions on a website, including sample API calls above that show Segment calls, and the user's `anonymousId` and `userId`.
81236
82237
![](images/identify-bp-1.png)
83238
84-
<!-- https://www.figma.com/file/Gc53MamYsKZBg3IUduunc5/identity-best-practices?node-id=1%3A3 -->
239+
https://www.figma.com/file/Gc53MamYsKZBg3IUduunc5/identity-best-practices?node-id=1%3A3 -->
85240

86241
When the user first visits a page, Analytics.js automatically assigns the user an `anonymousId` and saves it to the user's `localStorage`. As the user interacts with the site, for example clicking around to different pages, Analytics.js includes this `anonymousId` and some [contextual information](/docs/connections/spec/common#context) with each `page` and `track` call. The contextual information might be the user's [IP address, browser, and more](/docs/connections/spec/common#context-fields-automatically-collected).
87242

@@ -120,22 +275,22 @@ Let's go through some more scenarios to explain how an `anonymousId` is assigned
120275

121276
If a user clicks on an ad and is directed to a webpage, they are assigned an `anonymousId`. While this user is anonymous, they navigate to different pages and click around on the website. Say they come back two days later from the same device, sign up, and are assigned a `userId` from your database.
122277

123-
![](images/identify-bp-2.png)
278+
<!---![](images/identify-bp-2.png)--->
124279

125280
For simplicity, we're assuming that the user has _not_ cleared their cookies or `localStorage`, where the original `anonymousId` is stored. If they had, they'd be assigned a new `anonymousId` when they visited the website, and the `userId` they got when they register on the website would _not_ be attached to the activities tracked with the old `anonymousId`.
126281

127282
#### Scenario #2 - Multi-day, multi-device, single login
128283

129284
In this scenario, the person uses both a web browser, and a mobile application to interact with your site. In each case, they are assigned a different `anonymousId`. In this scenario, the user signs up on the web browser, so their _web_ session is assigned a `userId`. However, because they do not log in on the mobile application, Segment cannot tie the mobile activity to this specific user. Their mobile application activity remains anonymous unless they log in on the mobile application.
130285

131-
![](images/identify-bp-3.png)
286+
<!---![](images/identify-bp-3.png)--->
132287

133288

134289
#### Scenario #3 - Multi-day, multi-device, multiple logins
135290

136291
Similar to the previous scenario, the user accessed both your website and mobile application, and also logged in on both. In this case, both sessions on the web and mobile app receive the user's `userId`, so Segment can tie the anonymous activity on both web and mobile to this user.
137292

138-
![](images/identify-bp-4.png)
293+
<!---![](images/identify-bp-4.png)--->
139294

140295

141296
## User profiles in warehouses
@@ -169,16 +324,16 @@ If you're tracking on the client and on the server, the `anonymousId` can be ret
169324
```js
170325
analytics.user().anonymousId()
171326
```
172-
327+
<!---
173328
![Prior to Registration](https://user-images.githubusercontent.com/78389005/214199496-ab7117fd-b42f-4cd7-9e85-aab3f28e382c.png)
174329
175330
176331
![At Login](https://user-images.githubusercontent.com/78389005/214199506-e0251c90-c702-4760-a4a7-5bcd9e5a13f8.png)
332+
--->
177333

334+
If you're identifying on the server, then you will want to pass the user ID from the server to the client using an `identify` call with the `anonymousId`. That will allow the `userId` to be aliased with the existing `anonymousId` and stored in the cookie in localStorage. With that, all previous anonymous activity and all subsequent activity is associated to the newly generated `userId`, as well as existing `anonymousId`s.
178335

179-
If you're identifying on the server, then you will want to pass the user ID from the server to the client using an `identify` call with the `anonymousId`. That will allow the `userId` to be aliased with the existing `anonymousId` and stored in the cookie in localStorage. With that, all previous anonymous activity and all subsequent activity is associated to the newly generated `userId`, as well as exisiting `anonymousId`s.
180-
181-
There are some advantages to sending details about your users directly from your server once the user registers. Server library [Identify calls](/docs/connections/spec/identify) are invisible to the end user, making them more secure, and much more reliable. Or, if you want to send user data that is sensitive or which you don't want to expose to the client, then you can make an `identify` call from the server with all the traits you know about the user. More about [collecting data on the client or server](https://segment.com/docs/guides/how-to-guides/collect-on-client-or-server/#not-stored-in-your-database) in our documentation.
336+
There are some advantages to sending details about your users directly from your server once the user registers. Server library [Identify calls](/docs/connections/spec/identify) are invisible to the end user, making them more secure, and much more reliable. Or, if you want to send user data that is sensitive or which you don't want to expose to the client, then you can make an `identify` call from the server with all the traits you know about the user. More about [collecting data on the client or server](https://segment.com/docs/guides/how-to-guides/collect-on-client-or-server/#not-stored-in-your-database) in Segment's documentation.
182337

183338

184339
### Aliasing from a server library

0 commit comments

Comments
 (0)