You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/connections/sources/catalog/libraries/website/javascript/single-page-apps.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -3,13 +3,13 @@ title: Single Page Applications
3
3
strat: ajs
4
4
---
5
5
6
-
While Single Page Apps (SPAs) are great for many reasons, they do require some extra consideration in order to set up client-side tracking than with a traditional webpage.
6
+
While Single Page Apps (SPAs) offer many benefits, setting up client-side tracking requires extra consideration compared to traditional web pages.
7
7
8
-
By default, the Segment analytics.js library doesn’t generate or store the referrer value. Instead, the referrer value you see in the payload is the value returned by `document.referrer` directly from the browser, and the URL value is the canonical URL on the page.
8
+
By default, the Segment Analytics.js library doesn’t generate or store the referrer value. Instead, the `referrer` value you see in the payload is the value returned by `document.referrer` directly from the browser, and the `url` value is the canonical URL on the page.
9
9
10
-
When a user navigates between pages on an SPA website, there won’t be a referrer because there is no concept of a new page since it’s all a single page load. This means that the referrer will always be the same as it was on the first page call where someone was first directed to your site. However, in order to circumvent this, you can manually set the referrer and URL in your Segment calls by updating the context object.
10
+
When a user navigates between pages on an SPA website, there won’t be a referrer because there is no concept of a new page since it’s all a single page load. This means that the referrer will always be the same as it was on the first page call where someone was first directed to your site. However, in order to circumvent this, you can manually set the `referrer` and `url` values in your Segment calls by updating the context object.
11
11
12
-
For example, a Page call with the referrer and URL manually set looks like this:
12
+
For example, a Page call with the `referrer` and `url` manually set looks like this:
Your application should update the URL in the address bar to emulate traditional webpage navigation. Full page requests aren't made in most of these instances since the resources are loaded on initial page load. This means that the Page call in the traditional analytics.js snippet won't fire again as a user navigates around your site.
32
+
Your application should update the URL in the address bar to emulate traditional webpage navigation. Full page requests aren't made in most of these instances since the resources are loaded on initial page load. This means that the Page call in the traditional Analytics.js snippet won't fire again as a user navigates around your site.
33
33
34
-
You should still place the snippet in the head of your site, but you should remove the Page call and fire it whenever you're emulating a page load. Segment recommends that you call [Page](/docs/connections/sources/catalog/libraries/website/javascript/#page) from the same block of logic that updates the view and URL path like below:
34
+
You should still place the snippet in the `<head>` of your site, but you should remove the Page call and fire it whenever you're emulating a page load. Segment recommends that you call [Page](/docs/connections/sources/catalog/libraries/website/javascript/#page) from the same block of logic that updates the view and URL path, as shown below:
35
35
36
36
```js
37
37
// The new view has been called to render
38
38
analytics.page("Home")
39
39
```
40
40
41
-
To track more than the page field, pass those fields in as additional properties. Segment recommends that you use variables to set information about page properties, rather than hard-coding. In most SPA frameworks, you can automate this by attaching the Page call to the routing service.
41
+
To track more than the page field, pass those fields in as additional properties. Segment recommends that you use variables to set information about page properties, rather than hardcoding them. In most SPA frameworks, you can automate this by attaching the Page call to the routing service.
42
42
43
43
## What to do with code that lives in the analytics.ready() function?
44
44
45
-
Analytics.js ships with a function called analytics.ready() which lets you make calls to the native integrations that Segment loads for you before they actually initialize. For instance, this is where you could choose to load a live chat widget only for users that you haven't yet identified with a userId.
45
+
Analytics.js ships with a function called `analytics.ready()` which lets you make calls to the native integrations that Segment loads for you before they actually initialize. For instance, this is where you could choose to load a live chat widget only for users that you haven't yet identified with a `userId`.
46
46
47
47
Since the code in the head of your website is executed only on initial page load or a refresh, you can still make calls to those native tools, but they won't run on each emulated page view.
0 commit comments