Skip to content

Commit 198d600

Browse files
authored
Merge pull request #7653 from segmentio/Analytics.js-edits
Analytics.js cleanup (part 1)
2 parents c9e58be + 2af094c commit 198d600

File tree

5 files changed

+151
-148
lines changed

5 files changed

+151
-148
lines changed

src/connections/sources/catalog/libraries/website/javascript/cookie-validity-update.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ redirect_from: '/connections/sources/catalog/libraries/website/javascript/persis
44
strat: ajs
55
---
66

7-
This page explains what data Analytics.js stores on the client and how to override and change what and how this data is stored.
7+
This page explains what data Analytics.js stores on the client and shows you how to modify or override that storage behavior.
88

99
## Segment ID persistence
1010

1111
<!-- Note: 1st 2 paragraphs copied from identity.md -->
1212

13-
To ensure high fidelity, first-party customer data, Segment writes the user's IDs to the user's local storage and uses that as the Segment ID on the cookie whenever possible. Local storage is for storing this type of first-party customer information.
13+
To ensure high-fidelity, first-party customer data, Segment writes the user's IDs to the user's local storage and uses them as the Segment ID in the cookie whenever possible. Local storage is intended for storing first-party customer information.
1414

15-
If a user returns to your site after the cookie expires, Analytics.js looks for an old ID in the user's `localStorage`, and if one is found, it sets as the user's ID again in the new cookie. If a user clears their cookies _and_ `localStorage`, all of the IDs are removed, and the user gets a completely new [`anonymousID`](/docs/connections/sources/catalog/libraries/website/javascript/identity/#anonymous-ids) when they next visit the page.
15+
If a user returns to your site after the cookie expires, Analytics.js looks for an old ID in the user's `localStorage`, and if one is found, it sets it as the user's ID again in the new cookie. If a user clears their cookies _and_ `localStorage`, all of the IDs are removed, and the user gets a completely new [`anonymousID`](/docs/connections/sources/catalog/libraries/website/javascript/identity/#anonymous-ids) when they next visit the page.
1616

1717
### Cookie settings
1818

@@ -26,7 +26,7 @@ Here is the full list of available parameters with their default values:
2626
| Parameter | Description | Default value |
2727
| --- | --- | --- |
2828
| `domain` | The domain to set the cookie to. This must match the domain of the JavaScript origin. If an Analytics.js cookie already exists at the top-level domain, Segment carries the same cookie value to any subdomains, despite `domain` configuration. | Top-level domain |
29-
| `maxage` | The maximum amount of time in days before the cookie expires. Browsers may clear cookies before this elapses. | 1 year |
29+
| `maxage` | The maximum amount of time in days before the cookie expires. Browsers may clear cookies before this time elapses. | 1 year |
3030
| `path` | The path the cookie is valid for. | `"/"` |
3131
| `sameSite` | This prevents the browser from sending the cookie along with cross-site requests. | `Lax` |
3232
| `secure` | This determines whether cookies can only be transmitted over secure protocols such as https. | `false` |
@@ -60,7 +60,7 @@ To set cookie values using the [NPM package](https://github.com/segmentio/analyt
6060
})
6161
```
6262
> info ""
63-
> Chrome has a maximum limit of 400 days for cookies. If a value is set beyond that, then Chrome sets the upper limit to 400 days instead of rejecting it. Visit Chrome's [docs](https://developer.chrome.com/blog/cookie-max-age-expires/){:target="blank"} to learn more.
63+
> Chrome has a maximum limit of 400 days for cookies. If a value is set beyond that, then Chrome sets the upper limit to 400 days instead of rejecting it. Visit [Chrome's docs](https://developer.chrome.com/blog/cookie-max-age-expires/){:target="blank"} to learn more.
6464
6565
### Device-mode destination cookies
6666

@@ -144,13 +144,13 @@ You can still manually track identity by calling `analytics.identify()` with the
144144

145145
### Event retries
146146

147-
Analytics.js tries to detect when a page is about to be closed and saves pending events to `localStorage`. When the user navigates to another page within the same domain, Analytics.js attempts to send any events it finds in localStorage.
147+
Analytics.js tries to detect when a page is about to be closed and saves pending events to `localStorage`. When the user navigates to another page within the same domain, Analytics.js attempts to send any events it finds in `localStorage`.
148148

149149
When `disableClientPersistence` is set to `true`, Analytics.js won't store any pending events into `localStorage`.
150150

151151
## Client-side cookie methods (get, set, clear)
152152

153-
To access or assign a value to a cookie outside of the standard Segment methods (track/identify/page/group), you can use the following methods. To access the cookie's value, pass an empty `()` at the end of the method. To assign the value, include the string value inside those parenthesis, for example, `('123-abc')`. To clear or remove the value for a specific field, pass in an empty value of its type. For example, for string `('')`, or for object `({})`.
153+
To access or assign a value to a cookie outside of the standard Segment methods (Track, Identify, Page, and Group), you can use the following methods. To access the cookie's value, pass an empty `()` at the end of the method. To assign the value, include the string value inside those parenthesis, for example, `('123-abc')`. To clear or remove the value for a specific field, pass in an empty value of its type. For example, for string `('')`, or for object `({})`.
154154

155155
<table class="horizontal-scroll">
156156
<tr style="background-color: #fafbff; font-size: 10px;">
@@ -203,17 +203,17 @@ To access or assign a value to a cookie outside of the standard Segment methods
203203
</tr>
204204
</table>
205205

206-
To retrieve a specific user trait using the Analytics.js Get method, you can access the trait by invoking `analytics.user().traits().firstName`. This returns the firstName trait of the user.
206+
To retrieve a specific user trait using the Analytics.js Get method, you can access the trait by invoking `analytics.user().traits().firstName`. This returns the `firstName` trait of the user.
207207

208-
To retrieve a specific group trait, you can use the method `analytics.group().traits().companyName`. This returns the companyName trait of the group.
208+
To retrieve a specific group trait, you can use the method `analytics.group().traits().companyName`. This returns the `companyName` trait of the group.
209209

210-
When you access specific traits stored in the browser's localStorage, you need to utilize the [JSON.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse){:target="_blank"} method because the stored data is typically in string format.
210+
When you access specific traits stored in the browser's `localStorage`, you need to use the [JSON.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse){:target="_blank"} method because the stored data is typically in string format.
211211

212-
## Storage Priority
212+
## Storage priority
213213

214214
By default, Analytics.js uses `localStorage` as its preferred storage location, with Cookies as a fallback when `localStorage` is not available or not populated. An in-memory storage is used as a last fallback if all the previous ones are disabled.
215215

216-
Default Storage Priority:
216+
Default storage priority:
217217

218218
```md
219219
LocalStorage -> Cookie -> InMemory

src/connections/sources/catalog/libraries/website/javascript/custom-proxy.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,41 +13,41 @@ You cannot use custom proxy setup for Analytics.js CDN or Tracking API with devi
1313
1414
{% include content/domain-delegation-solutions.md %}
1515

16-
## Custom Proxy prerequisites
16+
## Custom proxy prerequisites
1717

1818
To set up a custom proxy, you need:
1919

20-
- Access to your site DNS settings
20+
- Access to your site's DNS settings
2121
- A CDN you can serve assets from
2222
- Access to the CDN settings
2323
- A security certificate for the proxy domain
2424

25-
> info "Custom Proxy Troubleshooting"
25+
> info "Custom proxy troubleshooting"
2626
> If you experience issues configuring a custom proxy, contact your organization's IT department for help. Segment does not have access to the resources you need to configure a custom proxy.
2727
2828
This guide explains how to set up a custom proxy in CloudFront. You can apply these principles to almost any modern CDN that supports proxies.
2929

3030
You need to set up two important parts, regardless of the CDN provider you use:
3131

3232
- Proxy to Segment CDN (`cdn.segment.com`)
33-
- Proxy to Segment tracking API (`api.segment.io`)
33+
- Proxy to Segment Tracking API (`api.segment.io`)
3434

3535
> warning ""
36-
> If you are using a [Regional Workspace](/docs/guides/regional-segment/#client-side-sources), please note that instead of using `api.segment.io` to proxy the Tracking API, you'll be using `events.eu1.segmentapis.com`
36+
> If you are using a [Regional Workspace](/docs/guides/regional-segment/#client-side-sources), please note that instead of using `api.segment.io` to proxy the Tracking API, you'll be using `events.eu1.segmentapis.com`.
3737
3838
> info ""
3939
> Segment only has the ability to enable the proxy setting for the Web (Analytics.js) source. Details for mobile source proxies are in the [Analytics-iOS](/docs/connections/sources/catalog/libraries/mobile/ios/#proxy-https-calls) and [Analytics-Android](/docs/connections/sources/catalog/libraries/mobile/android/#proxying-http-calls) documentation. It is not currently possible to set up a proxy for server sources using the Segment UI.
4040
4141
> info "Segment loads most integrations through the proxy, except for third-party SDKs"
4242
> Third-party SDKs are loaded by a partner's CDN, even with a Segment proxy configured. For example, if you have a Segment custom proxy enabled and send data to a FullStory destination, FullStory's CDN would load the FullStory SDK.
4343
44-
## Custom Proxy setup
44+
## Custom proxy setup
4545

46-
There are two options you can choose from when you set up your custom domain proxy.
46+
There are two options you can choose from when you set up your custom domain proxy:
4747
1. [CloudFront](#custom-proxy-cloudfront)
4848
2. [Custom CDN or API proxy](#custom-cdn--api-proxy)
4949

50-
Follow the directions listed for [CloudFront](#custom-proxy-cloudfront) or [use your own CDN setup](#custom-cdn--api-proxy). Once you complete those steps and verify that your proxy works for both `cdn.segment.com` and `api.segment.io`, [contact Segment Product Support](https://segment.com/help/contact/) with the following template email:
50+
Follow the directions listed for [CloudFront](#custom-proxy-cloudfront) or [use your own CDN setup](#custom-cdn--api-proxy). Once you complete those steps and verify that your proxy works for both `cdn.segment.com` and `api.segment.io`, [contact Segment Product Support](https://segment.com/help/contact/){:target="_blank"} with the following template email:
5151

5252
```text
5353
Hi,
@@ -61,7 +61,7 @@ This is {person} from {company}. I would like to configure a proxy for the follo
6161

6262
Double-check the Source URL and the Source ID.
6363

64-
A Segment Customer Success team member will respond that they have enabled this option for your account. When you receive this confirmation, open the source in your workspace, and navigate to Settings > Analytics.js. Update the **Host Address** setting from `api.segment.io/v1` to `[your proxy host]/v1`.
64+
A Segment Customer Success team member will respond that they have enabled this option for your account. When you receive this confirmation, open the source in your workspace, and navigate to **Settings > Analytics.js**. Update the **Host Address** setting from `api.segment.io/v1` to `[your proxy host]/v1`.
6565

6666
> info ""
6767
> The **Host Address** field does not appear in source settings until it's enabled by Segment Customer Success.
@@ -130,12 +130,12 @@ const analytics = AnalyticsBrowser.load(
130130
)
131131
```
132132

133-
## Custom Proxy CloudFront
133+
## Custom proxy CloudFront
134134

135135
These instructions refer to Amazon CloudFront, but apply more generally to other providers as well. Before changing the Segment Tracking API or the Segment snippet (Segment CDN) to use your new proxy, complete the custom domain proxy setup on your side to avoid any unexpected behavior.
136136

137-
### CDN Proxy
138-
To set up your CDN Proxy:
137+
### CDN proxy
138+
To set up your CDN proxy:
139139
1. Log in to the AWS console and navigate to CloudFront.
140140
2. Click **Create Distribution**.
141141
3. Configure the distribution settings. In the Origin section, update the following values:
@@ -164,7 +164,7 @@ To add a CNAME record for the Segment proxy to your organizations DNS settings:
164164

165165

166166

167-
### Tracking API Proxy
167+
### Tracking API proxy
168168

169169
As events travel through the proxy before reaching the tracking API, set up a proxy for the tracking API so that all calls proxy through your domain. To do this, set up a CloudFront distribution that's similar to the one in the previous section, with the exception of the Origin Domain Name:
170170

@@ -188,7 +188,7 @@ These are some common issues that occur for customers implementing a custom prox
188188

189189
#### Cloudflare returning a 403 error
190190

191-
A 403 error can mean that you've misconfigured your Cloudflare CDN distribution. Try one of the following options to fix the error:
191+
A `403` error can mean that you've misconfigured your Cloudflare CDN distribution. Try one of the following options to fix the error:
192192

193193
1. If you have a Cloudflare enterprise plan, create a Page Rule in Cloudflare so that Segment's CDN doesn't refuse the requests made through the Cloudflare Proxy. If `cdn.segment.com` is another CNAME that resolves to `xxx.cloudfront.net`, you will need to use a Page Rule in Cloudflare to override the host header to match the hostname for proxy requests. For more information about overriding the host header, see Cloudflare’s [Rewrite Host headers](https://developers.cloudflare.com/rules/page-rules/how-to/rewrite-host-headers/){:target="_blank”} docs.
194194

@@ -209,7 +209,7 @@ In order to resolve a CORS OPTIONS pre-request fetch error, you must specify "St
209209

210210
#### CloudFront Proxy returning a 403 error
211211

212-
If your CloudFront Proxy is returing a 403 error, the following change in CloudFront might resolve the issue:
212+
If your CloudFront Proxy is returning a `403` error, the following change in CloudFront might resolve the issue:
213213

214214
```ts
215215
Before:
@@ -254,9 +254,9 @@ analytics.load({
254254

255255
## Restore the API host to the Segment default
256256

257-
If you wish to restore the proxied API host to it's original value:
258-
1. Navigate to the **Source > Settings > Analytis.js tab**
257+
If you wish to restore the proxied API host to its original value:
258+
1. Navigate to the **Source > Settings > Analytics.js tab**
259259
2. Scroll down until you see the Host address field.
260260
3. Under the field, there is a small blue text that says 'Restore to a default value'. Click **Restore** and then **Save**.
261261

262-
Any changes made to the CDN host must be update manually in your code.
262+
Any changes made to the CDN host must be updated manually in your code.

0 commit comments

Comments
 (0)