From 232822126b3622d857f765afaf0018da1a552234 Mon Sep 17 00:00:00 2001 From: stayseesong Date: Fri, 6 Oct 2023 16:36:20 -0700 Subject: [PATCH 1/4] segment inspector [netlify-build] --- .../libraries/website/javascript/index.md | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/src/connections/sources/catalog/libraries/website/javascript/index.md b/src/connections/sources/catalog/libraries/website/javascript/index.md index d857df9f91..4ef15bdfdb 100644 --- a/src/connections/sources/catalog/libraries/website/javascript/index.md +++ b/src/connections/sources/catalog/libraries/website/javascript/index.md @@ -919,6 +919,37 @@ Bundle the destinations you want loaded from [npm](https://www.npmjs.com/package }), ``` +## Segment Inspector +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. Analyze and confirm that API calls made from your website arrive to your Segment Source. + +> info "" +> For the Segment inspector to work, you must enable the Analytics.js 2.0 source. + +To add the Segment Inspector as a Chrome extension: +1. Go to the [Chrome web store](https://chrome.google.com/webstore/category/extensions). +2. Search for **Segment Inspector**. +3. Click **Add to Chrome**. +4. Click Add Extension in the pop-up window. + +Once installed, use the Inspect Elements developer tool in Chrome to use the Segment Inspector. To access the Inspector, go the top menu bar of Chrome and navigate to **View > Developer > Inspect Elements** and to go the **Segment** tab. On the Segment tab, you can: +- Filter the different calls by type +- Search based off of the content in the calls +- Identify users + +### Components of the Segment Inspector +The Segment Inspector is composed of these three components: +1. The **Diagnostics** tab + - This tab shows the library versions and the list of active integrations that are running. + - When you select an integration, you can see the options that passed while the integration loads. If you made any local overrides within the integration or on the page itself, they appear highlighted in the code. +2. The **Events** tab + - This tab enables you to select an event and see the specific details of the event. You can view the time the event occurred, the status of the event (whether it sent or failed), what plugins were added, and how the context object changed. Any changes made to the payload appear highlighted. + - Select the double-checked icon to see the payload at the delivery stage. + - Select the *fx* icon to see the payloads after plugins ran. + - Select the single-checked icon to see the payload as it was when the event triggered. +3. The **Identity** tab + - This tab enables you to see the information of a user if you're using the `identify` feature. You can associate the data to an individual and measure their activity across multiple sessions and devices. If you're not using the `identify` feature, the user remains anonymous. + + ## Open source libraries Analytics.js 2.0 includes the following open source components: From 6622106745e07e0878fb8dea709a4514cd79a9cc Mon Sep 17 00:00:00 2001 From: stayseesong <83784848+stayseesong@users.noreply.github.com> Date: Mon, 9 Oct 2023 16:46:41 -0700 Subject: [PATCH 2/4] Apply suggestions from code review Co-authored-by: forstisabella <92472883+forstisabella@users.noreply.github.com> --- .../catalog/libraries/website/javascript/index.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/connections/sources/catalog/libraries/website/javascript/index.md b/src/connections/sources/catalog/libraries/website/javascript/index.md index 4ef15bdfdb..7b09ff2885 100644 --- a/src/connections/sources/catalog/libraries/website/javascript/index.md +++ b/src/connections/sources/catalog/libraries/website/javascript/index.md @@ -920,16 +920,16 @@ Bundle the destinations you want loaded from [npm](https://www.npmjs.com/package ``` ## Segment Inspector -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. Analyze and confirm that API calls made from your website arrive to your Segment Source. +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. > info "" > For the Segment inspector to work, you must enable the Analytics.js 2.0 source. To add the Segment Inspector as a Chrome extension: -1. Go to the [Chrome web store](https://chrome.google.com/webstore/category/extensions). +1. Go to the [Chrome web store](https://chrome.google.com/webstore/category/extensions){:target="_blank”}. 2. Search for **Segment Inspector**. 3. Click **Add to Chrome**. -4. Click Add Extension in the pop-up window. +4. Click **Add Extension** in the pop-up window. Once installed, use the Inspect Elements developer tool in Chrome to use the Segment Inspector. To access the Inspector, go the top menu bar of Chrome and navigate to **View > Developer > Inspect Elements** and to go the **Segment** tab. On the Segment tab, you can: - Filter the different calls by type @@ -947,7 +947,8 @@ The Segment Inspector is composed of these three components: - Select the *fx* icon to see the payloads after plugins ran. - Select the single-checked icon to see the payload as it was when the event triggered. 3. The **Identity** tab - - This tab enables you to see the information of a user if you're using the `identify` feature. You can associate the data to an individual and measure their activity across multiple sessions and devices. If you're not using the `identify` feature, the user remains anonymous. + - This tab enables you to see the information of a user if you're using the `identify` feature. You can associate the data to an individual and measure their activity across multiple sessions and devices. + - If you're not using the `identify` feature, the user remains anonymous. ## Open source libraries From 74c1bd9594670759f6dea82e8279e89469a17bfb Mon Sep 17 00:00:00 2001 From: stayseesong <83784848+stayseesong@users.noreply.github.com> Date: Mon, 16 Oct 2023 13:21:36 -0700 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Christopher Radek <14189820+chrisradek@users.noreply.github.com> --- .../sources/catalog/libraries/website/javascript/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/connections/sources/catalog/libraries/website/javascript/index.md b/src/connections/sources/catalog/libraries/website/javascript/index.md index 7b09ff2885..58f7c6be4f 100644 --- a/src/connections/sources/catalog/libraries/website/javascript/index.md +++ b/src/connections/sources/catalog/libraries/website/javascript/index.md @@ -931,7 +931,7 @@ To add the Segment Inspector as a Chrome extension: 3. Click **Add to Chrome**. 4. Click **Add Extension** in the pop-up window. -Once installed, use the Inspect Elements developer tool in Chrome to use the Segment Inspector. To access the Inspector, go the top menu bar of Chrome and navigate to **View > Developer > Inspect Elements** and to go the **Segment** tab. On the Segment tab, you can: +Once installed, use the Inspect Elements developer tool in Chrome to use the Segment Inspector. To access the Inspector, go the top menu bar of Chrome and navigate to **View > Developer > Developer Tools** and to go the **Segment** tab. On the Segment tab, you can: - Filter the different calls by type - Search based off of the content in the calls - Identify users @@ -947,7 +947,7 @@ The Segment Inspector is composed of these three components: - Select the *fx* icon to see the payloads after plugins ran. - Select the single-checked icon to see the payload as it was when the event triggered. 3. The **Identity** tab - - This tab enables you to see the information of a user if you're using the `identify` feature. You can associate the data to an individual and measure their activity across multiple sessions and devices. + - This tab enables you to see the information of a user if you're using the `identify` feature. You can associate the data to an individual and measure their activity across multiple sessions and devices. This tab only shows the user's traits that are on the client. - If you're not using the `identify` feature, the user remains anonymous. From b02c866448864b0f8d59e1af69d0df9bc54ced63 Mon Sep 17 00:00:00 2001 From: stayseesong <83784848+stayseesong@users.noreply.github.com> Date: Mon, 16 Oct 2023 14:56:56 -0700 Subject: [PATCH 4/4] edits --- .../sources/catalog/libraries/website/javascript/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/connections/sources/catalog/libraries/website/javascript/index.md b/src/connections/sources/catalog/libraries/website/javascript/index.md index 58f7c6be4f..0f23614538 100644 --- a/src/connections/sources/catalog/libraries/website/javascript/index.md +++ b/src/connections/sources/catalog/libraries/website/javascript/index.md @@ -931,7 +931,7 @@ To add the Segment Inspector as a Chrome extension: 3. Click **Add to Chrome**. 4. Click **Add Extension** in the pop-up window. -Once installed, use the Inspect Elements developer tool in Chrome to use the Segment Inspector. To access the Inspector, go the top menu bar of Chrome and navigate to **View > Developer > Developer Tools** and to go the **Segment** tab. On the Segment tab, you can: +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: - Filter the different calls by type - Search based off of the content in the calls - Identify users