Skip to content

Commit 6867c1f

Browse files
imklaujedrzejchalubek
authored andcommitted
feat(): Introduce the article page (#119)
1 parent 77506d3 commit 6867c1f

File tree

9 files changed

+88
-178
lines changed

9 files changed

+88
-178
lines changed

src/_includes/components/avatar.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{% assign contributor = page.contributors | first %}
1+
{% assign contributor = include.contributors | first %}
22
{% assign day = contributor.date | date: "%-d" %}
33

44
{% if contributor %}

src/_includes/components/media-icon.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<div class="media-icon">
22
<a class="media-icon__inner" href="{{ site.baseurl }}{{ include.href }}">
33
<span class="media-icon__icon">
4-
{% include icons/{{ include.icon }} %}
4+
{% if include.icon %}
5+
{% include icons/{{ include.icon }} %}
6+
{% endif %}
57
</span>
68

79
<h5 class="media-icon__heading">{{ include.title }}</h5>

src/_includes/components/related.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{% for related_url in page.related %}
1+
{% for related_url in include.items %}
22
{% assign subpage = site.pages | where: 'url', related_url | first %}
33

44
{% include components/media-icon.html variant="related" href=subpage.url icon=subpage.icon title=subpage.title content=subpage.excerpt %}

src/_layouts/page.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,27 @@ <h1 id="{{ page.title | downcase }}" class="page__heading">
2020
{{ content }}
2121
</div>
2222

23+
{% if page.faq %}
24+
<hr>
25+
26+
<h2>FAQ</h2>
27+
28+
{% include components/faq.html items=page.faq %}
29+
{% endif %}
30+
31+
32+
{% if page.contributors %}
33+
{% include components/avatar.html contributors=page.contributors %}
34+
{% endif %}
35+
36+
{% if page.related %}
37+
<hr>
38+
39+
<h2>Further reading</h2>
40+
41+
{% include components/related.html items=page.related %}
42+
{% endif %}
43+
2344
<hr>
2445

2546
{% include components/feedback.html %}

src/_sass/components/_markdown.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,4 +238,8 @@
238238
& > table {
239239
margin-top: 24px;
240240
}
241+
242+
& > *:first-child {
243+
margin-top: 0;
244+
}
241245
}

src/connections/sources/index.md

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -199,19 +199,3 @@ We’d love to know what other sources of data you’d like to analyze. Please [
199199
## Visual Tagger (Beta)
200200

201201
[Getting started with Segment Visual Tagger](/docs/sources/visual-tagger)
202-
203-
---
204-
205-
## FAQ
206-
207-
{% include components/faq.html items=page.faq %}
208-
209-
<br>
210-
211-
{% include components/avatar.html %}
212-
213-
---
214-
215-
## Further reading
216-
217-
{% include components/related.html %}

src/connections/spec/identify.md

Lines changed: 58 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
---
22
title: 'Spec: Identify'
33
sidebar: Identify
4+
contributors:
5+
- name: Paul Mccall
6+
position: Lead Developer
7+
image_path: paul-mccall.png
8+
date: 23.08.2019
9+
related:
10+
- "/connections/sources/catalog/"
11+
- "/connections/sources/faq/"
12+
- "/connections/sources/guides/"
413
---
514

15+
## Identify
16+
617
`identify` lets you tie a user to their actions and record traits about them. It includes a unique User ID and any optional traits you know about them like their email, name, etc.
718

819
Our recommendation for when and how often you should call identify is as follows:
@@ -39,79 +50,59 @@ And here's the corresponding Javascript event that would generate the above payl
3950

4051
```js
4152
analytics.identify("97980cfea0067", {
42-
name: "Peter Gibbons",
43-
email: "peter@initech.com",
44-
plan: "premium",
53+
name: "Peter Gibbons",
54+
email: "peter@initech.com",
55+
plan: "premium",
4556
logins: 5
4657
});
4758
```
4859

4960
Beyond the common fields, an `identify` call has the following fields:
5061

51-
<table>
52-
<tr>
53-
<th>**Field**</th>
54-
<th>**Type**</th>
55-
<th>**Description**</th>
56-
</tr>
57-
{% include content/spec-field-identify-traits.md %}
58-
{% include content/spec-field-user-id.md %}
59-
</table>
62+
| Field | Type | Description |
63+
| --- | --- | --- |
64+
| `traits` <br> optional | Object | Free-form dictionary of traits of the user, like `email` or `name`. <br> See the [Traits field docs](/docs/spec/identify#traits) |
65+
| `userId` <br> optional/required | String | Unique identifier for the user in your database. A userId or an anonymousId is required.<br> See the [Identities docs](/docs/spec/identify#identities) for more detail. |
6066

67+
{% include components/alert.html type="success" content="Your message has been sent successfully. This is a paragraph showing alert box. Indicates a successful or positive action." %}
6168

6269
## Example
6370

6471
Here's a complete example of an `identify` call:
6572

6673
```json
6774
{
68-
"anonymousId": "507f191e810c19729de860ea",
69-
"channel": "browser",
70-
"context": {
71-
"ip": "8.8.8.8",
72-
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36"
73-
},
74-
"integrations": {
75-
"All": false,
76-
"Mixpanel": true,
77-
"Salesforce": true
78-
},
79-
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
80-
"receivedAt": "2015-02-23T22:28:55.387Z",
81-
"sentAt": "2015-02-23T22:28:55.111Z",
82-
"timestamp": "2015-02-23T22:28:55.111Z",
75+
"type": "identify",
8376
"traits": {
8477
"name": "Peter Gibbons",
8578
"email": "peter@initech.com",
8679
"plan": "premium",
87-
"logins": 5,
88-
"address": {
89-
"street": "6th St",
90-
"city": "San Francisco",
91-
"state": "CA",
92-
"postalCode": "94103",
93-
"country": "USA"
94-
}
80+
"logins": 5
9581
},
96-
"type": "identify",
97-
"userId": "97980cfea0067",
98-
"version": "1.1"
82+
"userId": "97980cfea0067"
9983
}
10084
```
10185

10286
## Identities
10387

10488
The `identify` call specifies a customer identity that you can reference across the customer's whole lifetime. **Every `identify` call must have a [User ID](/docs/spec/identify#user-id) or an [Anonymous ID](/docs/spec/identify#anonymous-id)**, depending on how much you know about the user in question.
10589

90+
{% include components/alert.html type="info" content="Please read the comments carefully. This is a paragraph showing information box. Indicates a neutral informative change or action." %}
91+
10692
### Anonymous ID
10793

10894
There are certain cases where you don't actually know who the user is according to your database, but you still want to be able to tie them to traits, events or page views. For example, you may not know who a user is when tracking newsletter signups or anonymous page views.
10995

11096
In these cases, you should use an Anonymous ID.
11197

98+
{% include components/alert.html type="warning" content="There was a problem with your network connection. Indicates a warning that might need attention. This is a paragraph showing warning box." %}
99+
112100
The Anonymous ID can be any pseudo-unique identifier. For example, on your servers you can use a session id. If you don't have any readily available identifier, you can always generate a new random one—we recommend [UUIDs](http://en.wikipedia.org/wiki/Universally_unique_identifier).
113101

114-
**Note:** Our [browser and mobile libraries](/docs/sources/) **automatically** use Anonymous IDs under the covers to keep track of users as they navigate around your website or app, so you don't need to worry about them when using those libraries.
102+
{% capture AnonymousID_note %}
103+
Our [browser and mobile libraries](/docs/sources/) **automatically** use Anonymous IDs under the covers to keep track of users as they navigate around your website or app, so you don’t need to worry about them when using those libraries.
104+
{% endcapture %}
105+
{% include components/note.html content=AnonymousID_note %}
115106

116107
### User ID
117108

@@ -123,6 +114,8 @@ We recommend using database IDs instead of simple email addresses or usernames,
123114

124115
**Instead of using an email address or a username as a User ID, send them along as [traits](/docs/spec/identify#traits).**
125116

117+
![](../images/user-id.png)
118+
126119
## Traits
127120

128121
Traits are pieces of information you know about a user that are included in an `identify` call. These could be demographics like `age` or `gender`, account-specific like `plan`, or even things like whether a user has seen a particular A/B test variation. Up to you!
@@ -133,105 +126,29 @@ You should **only use reserved traits for their intended meaning**.
133126

134127
Reserved traits we've standardized:
135128

136-
<table>
137-
<tr>
138-
<th>**Trait**</th>
139-
<th>**Type**</th>
140-
<th>**Description**</th>
141-
</tr>
142-
<tr>
143-
<td>`address`</td>
144-
<td>Object</td>
145-
<td>Street address of a user optionally containing: `city`, `country`, `postalCode`, `state` or `street`</td>
146-
</tr>
147-
<tr>
148-
<td>`age`</td>
149-
<td>Number</td>
150-
<td>Age of a user</td>
151-
</tr>
152-
<tr>
153-
<td>`avatar`</td>
154-
<td>String</td>
155-
<td>URL to an avatar image for the user</td>
156-
</tr>
157-
<tr>
158-
<td>`birthday`</td>
159-
<td>Date</td>
160-
<td>User's birthday</td>
161-
</tr>
162-
<tr>
163-
<td>`company`</td>
164-
<td>Object</td>
165-
<td>Company the user represents, optionally containing: `name` (a String), `id` (a String or Number), `industry` (a String), `employee_count` (a Number) or `plan` (a String)</td>
166-
</tr>
167-
<tr>
168-
<td>`createdAt`</td>
169-
<td>Date</td>
170-
<td>Date the user's account was first created
171-
<p>We recommend [ISO-8601](http://en.wikipedia.org/wiki/ISO_8601) date strings.</p></td>
172-
</tr>
173-
<tr>
174-
<td>`description`</td>
175-
<td>String</td>
176-
<td>Description of the user</td>
177-
</tr>
178-
<tr>
179-
<td>`email`</td>
180-
<td>String</td>
181-
<td>Email address of a user</td>
182-
</tr>
183-
<tr>
184-
<td>`firstName`</td>
185-
<td>String</td>
186-
<td>First name of a user</td>
187-
</tr>
188-
<tr>
189-
<td>`gender`</td>
190-
<td>String</td>
191-
<td>Gender of a user</td>
192-
</tr>
193-
<tr>
194-
<td>`id`</td>
195-
<td>String</td>
196-
<td>Unique ID in your database for a user</td>
197-
</tr>
198-
<tr>
199-
<td>`lastName`</td>
200-
<td>String</td>
201-
<td>Last name of a user</td>
202-
</tr>
203-
<tr>
204-
<td>`name`</td>
205-
<td>String</td>
206-
<td>Full name of a user
207-
<p> If you only pass a first and last name we'll automatically fill in the full name for you.</p>
208-
</td>
209-
</tr>
210-
<tr>
211-
<td>`phone`</td>
212-
<td>String</td>
213-
<td>Phone number of a user</td>
214-
</tr>
215-
<tr>
216-
<td>`title`</td>
217-
<td>String</td>
218-
<td>Title of a user, usually related to their position at a specific company
219-
<p>Example: "VP of Engineering"</p>
220-
</td>
221-
</tr>
222-
<tr>
223-
<td>`username`</td>
224-
<td>String</td>
225-
<td>User's username
226-
<p> This should be unique to each user, like the usernames of Twitter or GitHub.</p></td>
227-
</tr>
228-
<tr>
229-
<td>`website`</td>
230-
<td>String</td>
231-
<td>Website of a user</td>
232-
</tr>
233-
</table>
234-
235-
**Note:** You might be used to some destinations recognizing special traits by slightly different names. For example, Mixpanel recognizes a `$created` trait when the user's account was first created, while Intercom recognizes the same trait as `created_at` instead. Luckily, you don't have to worry about those inconsistencies. Just pass us `createdAt`. **We’ll handle all of the destination-specific conversions for you automatically.** Same goes for the rest of the reserved traits.
236-
237-
**You can pass these reserved traits using camelCase or snake_case**, so in Javascript you can match the rest of your camel-case code by sending `firstName`, while in Ruby you can match your snake-case code by sending `first_name`. That way the API never seems alien to your code base. Keep in mind that not all destinations support these reserved traits, so sending these traits in camelCase and snake_case can result in two sets of traits in other destinations.
129+
| Trait | Type | Description |
130+
| --- | --- | --- |
131+
| `address` | Object | Street address of a user optionally containing: `city`, `country`, `postalCode`, `state` or `street` |
132+
| `age` | Number | Age of a user |
133+
| `avatar` | String | URL to an avatar image for the user |
134+
| `birthday` | Date | User's birthday |
135+
| `company` | Object | Company the user represents, optionally containing: `name` (a String), `id` (a String or Number), `industry` (a String), `employee_count` (a Number) or `plan` (a String) |
136+
| `createdAt` | Date | Date the user's account was first created <br> We recommend [ISO-8601](http://en.wikipedia.org/wiki/ISO_8601) date strings. |
137+
| `description` | String | Description of the user |
138+
| `email` | String | Email address of a user |
139+
| `firstName` | String | First name of a user |
140+
| `gender` | String | Gender of a user |
141+
| `id` | String | Unique ID in your database for a user |
142+
| `lastName` | String | Last name of a user |
143+
| `name` | String | Full name of a user <br> If you only pass a first and last name we'll automatically fill in the full name for you. |
144+
| `phone` | String | Phone number of a user |
145+
| `title` | String | Title of a user, usually related to their position at a specific company <br> Example: "VP of Engineering" |
146+
| `username` | String | User's username <br> This should be unique to each user, like the usernames of Twitter or GitHub. |
147+
| `website` | String | Website of a user |
148+
149+
{% capture Traits_note %}
150+
You might be used to some destinations recognizing special traits by slightly different names. For example, Mixpanel recognizes a `$created` trait when the user's account was first created, while Intercom recognizes the same trait as `created_at` instead. Luckily, you don't have to worry about those inconsistencies. Just pass us `createdAt`. **We’ll handle all of the destination-specific conversions for you automatically.** Same goes for the rest of the reserved traits.
151+
**You can pass these reserved traits using camelCase or snake_case**, so in Javascript you can match the rest of your camel-case code by sending `firstName`, while in Ruby you can match your snake-case code by sending `first_name`. That way the API never seems alien to your code base. Keep in mind that not all destinations support these reserved traits, so sending these traits in camelCase and snake_case can result in two sets of traits in other destinations.
152+
{% endcapture %}
153+
154+
{% include components/note.html content=Traits_note %}
40.7 KB
Loading

src/styleguide.md

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,6 @@ analytics.identify('025pikachu025', {
9999

100100
---
101101

102-
## Avatar
103-
104-
{% include components/avatar.html %}
105-
106-
---
107-
108102
## Media Icons
109103

110104
{% include components/media-icon.html href="#" icon="media/icon-academy.svg" title="Title" content="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto ratione ipsum fugiat nostrum velit iure, molestiae accusamus tempora quos laborum, ex modi illum delectus. Suscipit nesciunt labore nulla numquam excepturi?" %}
@@ -132,15 +126,3 @@ analytics.identify('025pikachu025', {
132126
{% include components/alert.html type="success" content="This is my sample note." %}
133127
{% include components/alert.html type="warning" content="This is my sample note." %}
134128
{% include components/alert.html type="error" content="This is my sample note." %}
135-
136-
---
137-
138-
## Callout
139-
140-
{% include components/callout.html title="Get started with Segment" content="Segment is the easiest way to integrate your websites & mobile apps data to 250+ analytics and growth tools." %}
141-
142-
---
143-
144-
## FAQ
145-
146-
{% include components/faq.html items=page.faq %}

0 commit comments

Comments
 (0)