Adds the missing explicit step in the AJS QS, update links (#1040)

* Adds the missing explicit step in the AJS QS, update links

* typo

* typo

Author: sanscontext

src/connections/destinations/catalog/braze/index.md

@@ -309,7 +309,7 @@ The `inAppMessages` parameter will be an array of [`appboy.ab.InAppMessage`](htt
     });
     ```
 
-    **Note:** We recommend placing this snippet outside of your [Segment Snippet](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-1-copy-the-snippet) within your `script` tag.
+    **Note:** We recommend placing this snippet outside of your [Segment Snippet](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet) within your `script` tag.
 
     **Note:** This will immediately request push permission from the user.
 
@@ -384,7 +384,7 @@ analytics.ready(function() {
 
 For more details on this snippet, check out the Braze's docs [here](https://www.braze.com/documentation/Web/#soft-push-prompts).
 
-**Note:** We recommend placing this snippet outside of your [Segment Snippet](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-1-copy-the-snippet) within your `script` tag.
+**Note:** We recommend placing this snippet outside of your [Segment Snippet](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet) within your `script` tag.
 
 4. When you'd like to display the Soft Push to a user, call:
 

src/connections/destinations/catalog/hubspot/index.md

@@ -26,7 +26,7 @@ If you're not familiar with the Segment Specs, take a look to understand what th
 ```
 analytics.page()
 ```
-**IMPORTANT:** An initial `page` call is required for data to be sent to HubSpot using Analytics.js. This is included by default in your [Segment snippet](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-1-copy-the-snippet).
+**IMPORTANT:** An initial `page` call is required for data to be sent to HubSpot using Analytics.js. This is included by default in your [Segment snippet](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet).
 
 ## Identify
 

src/connections/destinations/catalog/klaviyo/index.md

@@ -51,7 +51,7 @@ analytics.identify({
 
 When you call `identify` on analytics.js, we call Klaviyo's `identify` with the `traits` object. We augment the `traits` object to have `traits.$id` be the `userId` since Klaviyo takes the user ID on the `traits` object itself.
 
-**Note:** When sending data to Klaviyo using `analytics.js`, an initial `page` call is required. By default, this is already added in your [Segment snippet](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-1-copy-the-snippet).
+**Note:** When sending data to Klaviyo using `analytics.js`, an initial `page` call is required. By default, this is already added in your [Segment snippet](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet).
 
 We will map the following Segment spec'd traits to Klaviyo [special people properties](http://www.klaviyo.com/docs):
 

src/connections/destinations/catalog/mouseflow/index.md

@@ -22,7 +22,7 @@ If you're not familiar with the Segment Specs, take a look to understand what th
 ```
 analytics.page()
 ```
-An initial `page` call is required for data to be sent to Mouseflow using Analytics.js and sends a page view. This is included by default in your [Segment snippet](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-1-copy-the-snippet).
+An initial `page` call is required for data to be sent to Mouseflow using Analytics.js and sends a page view. This is included by default in your [Segment snippet](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet).
 
 ## Identify
 

src/connections/sources/catalog/libraries/website/javascript/identity.md

@@ -15,7 +15,7 @@ If a user returns to your site after the cookie expires, Analytics.js looks for
 
 <!-- TODO: also info on
 - what is the userId
-- what's it mean
+- what's it mean (where's it come from)
 - where's it set
 - methods for working w/
 - retrieving the userID  -->

src/connections/sources/catalog/libraries/website/javascript/index.md

@@ -19,9 +19,12 @@ The basic tracking methods below are the building blocks of your Segment trackin
 
 These names may seem familar because these are the basic methods covered by the [Segment Spec](/docs/connections/spec/). The documentation on this page explains how to use these methods in Analytics.js specifically.
 
+> note ""
+> **Good to know**: For any of the different methods described in this page, you can replace the properties in the code samples with variables that represent the data collected.
+
 ### Identify
 
-The `identify` method is how you link your users, and their actions, to a recognizable `userId` and `traits`. You can see [an `identify` example in the Quickstart guide](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-identify-users) or [find details on the identify method payload](/docs/connections/spec/identify/).
+The `identify` method is how you link your users, and their actions, to a recognizable `userId` and `traits`. You can see [an `identify` example in the Quickstart guide](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-3-identify-users) or [find details on the identify method payload](/docs/connections/spec/identify/).
 
 > note ""
 > Segment recommends _against_ using `identify` for anonymous visitors to your site. Analytics.js automatically retrieves an `anonymousId` from localStorage or assigns one for new visitors, which is attached to all `page` and `track` events both before and after an `identify`.
@@ -95,7 +98,7 @@ analytics.identify('12091906-01011992', function(){
 
 ### Track
 
-The Track method lets you record actions your users perform. You can [see a track example in the Quickstart guide](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-3-track-actions) or find details on [the track method payload](/docs/connections/spec/track/).
+The Track method lets you record actions your users perform. You can [see a track example in the Quickstart guide](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-4-track-actions) or find details on [the track method payload](/docs/connections/spec/track/).
 
 The Track method follows the format below:
 
@@ -233,7 +236,7 @@ The [Page](/docs/connections/spec/page/) method lets you record page views on yo
 
 Because some destinations require a `page` call to instantiate their libraries, **you must call `page`** at least once per page load. You can call it more than once if needed, for example on virtual page changes in a single page app.
 
-A Page call is included by default as the final line in [the Analytics.js snippet](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-1-copy-the-snippet). You can modify this `page` call within the guidelines below.
+A Page call is included by default as the final line in [the Analytics.js snippet](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet). You can modify this `page` call within the guidelines below.
 
 The `page` method follows the format below.
 
@@ -598,7 +601,7 @@ analytics.load('writekey', { integrations: { All: false, 'Google Analytics': tru
 ```
 
 > info ""
-> **Note:** To use this feature, you must be on snippet version 4.1.0 or later. You can get the latest version of the snippet [here](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-1-copy-the-snippet).
+> **Note:** To use this feature, you must be on snippet version 4.1.0 or later. You can get the latest version of the snippet [here](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet).
 
 This way, you can conditionally load integrations based on what customers opt into on your site. The pseudocode example below shows how you might load only the tools the user consented to.
 

src/connections/sources/catalog/libraries/website/javascript/quickstart.md

@@ -11,14 +11,28 @@ This tutorial gets you started sending data from your website to Segment and any
 
 Want to learn more? Check out the [Analytics.js reference](/docs/connections/sources/catalog/libraries/website/javascript/).
 
+## Step 1: Create a Source in the Segment app
 
-## Step 1: Copy the Snippet
+Before you begin, you need a Workspace (which is a container that holds all of the sources and destinations which are billed together for an organization). If you already created one, great! If not, you can sign up for a free Segment account and create one.
+
+
+To create an Analytics.js source from your Workspace:
+
+1. Click **Add Source**.
+2. From the source catalog page, click **Javascript**.
+3. Click **Add Source** again from the informational panel that appears to the right.
+4. Give the source a display name, and enter the URL the source will collect data from.
+
+When you create a Source in the Segment web app, it tells the Segment servers that you'll be sending data from a specific source type. When you create (or change!) a Source in the Segment app, Segment generates a new Write Key for that source. You use the write key in your website code to tell the Segment servers where the data is coming from, so Segment can route it to your destinations and other tools.
+
+
+## Step 2: Copy the Segment Snippet
 
 Installing Segment is easy, just paste this snippet into the `<head>` tag of your site.
 
 {% include content/snippet-helper.md %}
 
-Next, replace `YOUR_WRITE_KEY` in the snippet you pasted with your Segment project's **Write Key**, which you can find in your project set up guide or settings.
+Next, replace `YOUR_WRITE_KEY` in the snippet you pasted with your Segment project's **Write Key**. You can [find the write key](/docs/connections/find-writekey/) in your project set up guide or in the source's settings.
 
 > note ""
 > **Note:** When you use Analytics.js in device-mode the source's Write Key is public, because it runs in a user's browser and can be accessed using the browser's developer tools. If this is not acceptable to your organization, you can explore [other Segment Sources](/docs/connections/sources/catalog/) which collect data from a server-based installation, and which are not accessible to the user.
@@ -31,7 +45,10 @@ Note that you should remove other native third-party destination code that you m
 
 However, lots of analytics and marketing tools need to record _who_ each user is on your site. If you want to use any tool that deals with the identity of your users, read on about the `identify` method.
 
-## Step 2: Identify Users
+## Step 3: Identify Users
+
+> note ""
+> **Good to know**: For any of the different methods described in this quickstart, you can replace the properties in the code samples with variables that represent the data collected.
 
 The `identify` method is how you tell Segment who the current user is. It includes a unique User ID, and any optional traits you know about them. You can read more about it in the [identify method reference](/docs/connections/sources/catalog/libraries/website/javascript#identify).
 
@@ -47,7 +64,7 @@ analytics.identify('f4ca124298', {
 ```
 That identifies Michael by his unique User ID (in this case, `f4ca124298`, which is what you know him by in your database) and labels him with `name` and `email` traits.
 
-**Hold up though!** When you actually put that code on your site,you need to replace those hard-coded trait values with the variables that represent the details of the currently logged-in user.
+**Hold up though!** When you actually put that code on your site, you need to replace those hard-coded trait values with the variables that represent the details of the currently logged-in user.
 
 To do that, we recommend that you use a backend template to inject an `identify` call into the footer of **every page** of your site where the user is logged in. That way, no matter what page the user first lands on, they will always be identified. You don't need to call `identify` if your unique identifier (`userId`) is not known.
 
@@ -69,7 +86,7 @@ With that call in your page footer, you successfully identify every user that vi
 Of course, lots of analytics tools record more than just _identities_... they record the actions each user performs too! If you're looking for a complete event tracking analytics setup, keep reading...
 
 
-## Step 3: Track Actions
+## Step 4: Track Actions
 
 The `track` method is how you tell Segment about the actions your users are performing on your site. Every action triggers what we call an "event", which can also have associated properties. You can read more about `track` in the [track method reference](/docs/connections/sources/catalog/libraries/website/javascript#track).
 

src/protocols/apis-and-extensions/typewriter.md

@@ -88,7 +88,7 @@ Once you've installed Node and NPM, run the `--version` commands again to verify
 
 Before you start, make sure you have `node` installed using the instructions in the [prerequisites](#prerequisites) above.
 
-Next, install `analytics.js` in your app. For now, you just need to complete [`Step 1: Copy the Snippet`](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-1-copy-the-snippet) from the [`analytics.js` Quickstart Guide](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/).
+Next, install `analytics.js` in your app. For now, you just need to complete [`Step 1: Copy the Snippet`](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2-copy-the-segment-snippet) from the [`analytics.js` Quickstart Guide](/docs/connections/sources/catalog/libraries/website/javascript/quickstart/).
 
 Once you've got `analytics.js` installed, add Typewriter as a developer dependency in your project: