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
Analytics.js enables you to send your data to hundreds of [destination tools](/docs/connections/destinations/catalog/) without having to learn, test, or use a new API every time.
13
14
15
+
Segment's Analytics.js library is fully open-source and can be viewed on [GitHub](https://github.com/segmentio/analytics-next/){:target="_blank"}.
14
16
15
17
18
+
## Benefits of Analytics.js
16
19
17
-
18
-
Analytics.js 2.0 is the newest version of Segment's most popular JavaScript library. It is backwards compatible with our original Analytics.js Classic library, so in most cases, no code changes are necessary in order to start using Analytics.js 2.0. Analytics.js 2.0 enables you to send your data to hundreds of [destination tools](/docs/connections/destinations/catalog/) without having to learn, test, or use a new API every time.
19
-
20
-
Segment's Analytics.js 2.0 library is fully open-source and can be viewed on [GitHub](https://github.com/segmentio/analytics-next/){:target="_blank"}.
21
-
22
-
> info ""
23
-
> All sources created after April 5, 2022 use Analytics.js 2.0 by default.
24
-
25
-
26
-
## Benefits of Analytics.js 2.0
27
-
28
-
Analytics.js 2.0 provides two key benefits over the previous version.
20
+
Analytics.js provides two key benefits over the previous version.
29
21
30
22
### Performance
31
23
32
-
Analytics.js 2.0 reduces page load time and improves site performance. Its package size is **~70%** smaller than its predecessor, Analytics.js.
24
+
Analytics.js reduces page load time and improves site performance. Its package size is **~70%** smaller than its predecessor, the classic version of Analytics.js.
33
25
34
26
> info ""
35
27
> Many factors impact page load time, including network conditions, hosting locations, and page weight. Page weight for each customer integration varies based on the number of device-mode destinations that are enabled for each source. The more device-mode destinations that are enabled, the more data gets added to the library, which will impact the weight of the library.
36
28
37
29
38
30
### Developer experience
39
31
40
-
Analytics.js 2.0 improves developer experience by introducing new ways for developers to augment events throughout the event timeline. For example, developers can augment events either before or after an event occurs, or while the event is in-flight.
32
+
Analytics.js improves developer experience by introducing new ways for developers to augment events throughout the event timeline. For example, developers can augment events either before or after an event occurs, or while the event is in-flight.
41
33
42
-
For example, you can use Analytics.js 2.0 to build features that:
34
+
For example, you can use Analytics.js to build features that:
43
35
44
36
- Ensure you have user consent to track before an event fires
45
37
- Enrich events with customer or page context while in-flight with middleware
@@ -49,12 +41,6 @@ For example, you can use Analytics.js 2.0 to build features that:
49
41
50
42
Use the [Analytics.js QuickStart Guide](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/) to learn how to add Analytics.js to your site. Once you've installed the library, read on for the detailed API reference.
51
43
52
-
For information about upgrading to Analytics.js 2.0, see [Upgrade to Analytics.js 2.0](/docs/connections/sources/catalog/libraries/website/javascript/upgrade-to-ajs2).
53
-
54
-
### Upgrade your existing JavaScript sources
55
-
56
-
For information about upgrading your existing JavaScript sources, see [Upgrade to Analytics.js 2.0](/docs/connections/sources/catalog/libraries/website/javascript/upgrade-to-ajs2).
57
-
58
44
## Basic tracking methods
59
45
60
46
The basic tracking methods below serve as the building blocks of your Segment tracking. They include [Identify](#identify), [Track](#track), [Page](#page), [Group](#group), and [Alias](#alias).
@@ -628,9 +614,6 @@ Analytics.js does its best to deliver the queued events before the browser close
628
614
629
615
Upon receiving the `beforeunload` browser event, Analytics.js attempts to flush the queue using `fetch` requests with `keepalive` set to true. Since the max size of `keepalive` payloads is limited to 64 KB, if the queue size is bigger than 64 KB at the time the browser closes, then there is a chance of losing a subset of the queued events. Reducing the batch size or timeout will alleviate this issue, but that will be a trade-off decision.
630
616
631
-
#### Is Batching supported on Analytics.js classic?
632
-
No. Batching is only supported as part of Analytics.js 2.0.
633
-
634
617
#### Can other destinations receive batched events?
635
618
No, this batching only impacts events sent to Segment. Once the batch reaches Segment, it's split up and follows the normal path of an event.
636
619
@@ -953,16 +936,15 @@ Bundle the destinations you want loaded from [npm](https://www.npmjs.com/package
953
936
```
954
937
955
938
## Segment Inspector
956
-
The Segment Inspector is a Chrome web extension that enables you to debug your Segment integration on web applications instrumented with Analytics.js 2.0. Analytics.js sends data to the extension so that you can see how events change before they're sent to your destinations and so that you can verify that the event details are correct. The Segment Inspector also lets you analyze and confirm that API calls made from your website arrive to your Analytics.js 2.0 source.
939
+
The Segment Inspector is a Chrome web extension that enables you to debug your Segment integration on web applications instrumented with Analytics.js. Analytics.js sends data to the extension so that you can see how events change before they're sent to your destinations and so that you can verify that the event details are correct. The Segment Inspector also lets you analyze and confirm that API calls made from your website arrive to your Analytics.js source.
957
940
958
941
> info ""
959
-
> For the Segment inspector to work, you must enable the Analytics.js 2.0 source.
942
+
> For the Segment inspector to work, you must enable the Analytics.js source.
960
943
961
944
To add the Segment Inspector as a Chrome extension:
962
-
1. Go to the [Chrome web store](https://chrome.google.com/webstore/category/extensions){:target="_blank”}.
963
-
2. Search for **Segment Inspector**.
964
-
3. Click **Add to Chrome**.
965
-
4. Click **Add Extension** in the pop-up window.
945
+
1. Go to the [Segment Inspector in the Chrome web store](https://chromewebstore.google.com/detail/segment-inspector/jfcbmnpfbhhlhfclmiijpldieboendfo){:target="_blank”}.
946
+
2. Click **Add to Chrome**.
947
+
3. Click **Add Extension** in the pop-up window.
966
948
967
949
Once installed, use the Inspect Elements developer tool in Chrome to use the Segment Inspector. To access the Inspector, go to the top menu bar of Chrome and navigate to **View > Developer > Developer Tools** and go to the **Segment** tab. On the Segment tab, you can:
968
950
- Filter the different calls by type
@@ -984,7 +966,7 @@ The Segment Inspector is composed of these three components:
984
966
- If you're not using the `identify` feature, the user remains anonymous.
985
967
986
968
## Example uses
987
-
Here are some examples of using Analytics.js 2.0. Note that the examples assume Analytics.js is installed through [npm](https://github.com/segmentio/analytics-next/tree/master/packages/browser){:target="_blank”}.
969
+
Here are some examples of using Analytics.js. Note that the examples assume Analytics.js is installed through [npm](https://github.com/segmentio/analytics-next/tree/master/packages/browser){:target="_blank”}.
0 commit comments