Merge pull request #2064 from segmentio/repo-sync

repo sync

Author: bot-docsteam

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

@@ -721,7 +721,135 @@ No, there is no change in behavior to Middlewares.
 #### When using Segment features (Schema filtering, integrations object, Protocols) to filter events from going to destinations (device and cloud-mode), will batching impact the filtering of events?
 No, there is no impact to how events filter.
 
-## Plugins
+## Plugin Architecture
+When you develop against Analytics 2.0, the plugins you write can augment functionality, enrich data, and control the flow and delivery of events. From modifying event payloads to changing analytics functionality, plugins help to speed up the process of getting things done.
+
+Though middlewares function the same as plugins, it's best to use plugins as they are easier to implement and are more testable.
+
+### Plugin Categories
+Plugins are bound by Analytics 2.0 which handles operations such as observability, retries, and error handling. There are two different categories of plugins:
+* **Critical Plugins**: Analytics.js expects this plugin to be loaded before starting event delivery. Failure to load a critical plugin halts event delivery. Use this category sparingly, and only for plugins that are critical to your tracking.
+* **Non-critical Plugins**: Analytics.js can start event delivery before this plugin finishes loading. This means your plugin can fail to load independently from all other plugins. For example, every Analytics.js destination is a non-critical plugin. This makes it possible for Analytics.js to continue working if a partner destination fails to load, or if users have ad blockers turned on that are targeting specific destinations.
+
+> info ""
+> Non-critical plugins are only non-critical from a loading standpoint. For example, if the `before` plugin crashes, this can still halt the event delivery pipeline.
+
+Non-critical plugins run through a timeline that executes in order of insertion based on the entry type. Segment has these five entry types of non-critical plugins:
+
+Type | Details
+---- | -------
+`before` | Executes before event processing begins. These are plugins that run before any other plugins run. <br><br>For example, validating events before passing them along to other plugins. A failure here could halt the event pipeline. <br><br> See the example of how Analytics.js uses the [Event Validation plugin](https://github.com/segmentio/analytics-next/blob/master/src/plugins/validation/index.ts){:target="_blank"} to verify that every event has the correct shape.
+`enrichment` | Executes as the first level of event processing. These plugins modify an event. <br><br> See the example of how Analytics.js uses the [Page Enrichment plugin](https://github.com/segmentio/analytics-next/blob/master/src/plugins/page-enrichment/index.ts){:target="_blank"} to enrich every event with page information.
+`destination` | Executes as events begin to pass off to destinations. <br><br> This doesn’t modify the event outside of the specific destination, and failure doesn’t halt the execution.
+`after` | Executes after all event processing completes. You can use this to perform cleanup operations. <br><br>An example of this is the [Segment.io Plugin](https://github.com/segmentio/analytics-next/blob/master/src/plugins/segmentio/index.ts){:target="_blank"} which waits for destinations to succeed or fail so it can send it observability metrics.
+`utility` | Executes once during the bootstrap, to give you an outlet to make any modifications as to how Analytics.js works internally. This allows you to augment Analytics.js functionality.
+
+### Example Plugins
+Here's an example of a plugin that converts all track event names to lowercase before the event goes through the rest of the pipeline:
+
+```js
+export const lowercase: Plugin = {
+  name: 'Lowercase events',
+  type: 'enrichment',
+  version: '1.0.0',
+
+  isLoaded: () => true,
+  load: () => Promise.resolve(),
+
+  track: (ctx) => {
+    ctx.updateEvent('event', ctx.event.event.toLowerCase())
+    return ctx
+  }
+}
+
+const identityStitching = () => {
+  let user
+
+  const identity = {
+    // Identifies your plugin in the Plugins stack.
+    // Access `window.analytics.queue.plugins` to see the full list of plugins
+    name: 'Identity Stitching',
+    // Defines where in the event timeline a plugin should run
+    type: 'enrichment',
+    version: '0.1.0',
+
+    // use the `load` hook to bootstrap your plugin
+    // The load hook will receive a context object as its first argument
+    // followed by a reference to the analytics.js instance from the page
+    load: async (_ctx, ajs) => {
+      user = ajs.user()
+    },
+
+    // Used to signal that a plugin has been property loaded
+    isLoaded: () => user !== undefined,
+
+    // Applies the plugin code to every `identify` call in Analytics.js
+    // You can override any of the existing types in the Segment Spec.
+    async identify(ctx) {
+      // Request some extra info to enrich your `identify` events from
+      // an external API.
+      const req = await fetch(
+        `https://jsonplaceholder.typicode.com/users/${ctx.event.userId}`
+      )
+      const userReq = await req.json()
+
+      // ctx.updateEvent can be used to update deeply nested properties
+      // in your events. It's a safe way to change events as it'll
+      //  create any missing objects and properties you may require.
+      ctx.updateEvent('traits.custom', userReq)
+      user.traits(userReq)
+
+      // Every plugin must return a `ctx` object, so that the event
+      // timeline can continue processing.
+      return ctx
+    },
+  }
+
+  return identity
+}
+
+// Registers our new plugin into Analytics.js
+await window.analytics.register(identityStitching())
+```
+
+Here's an example of a `utility` plugin that allows you to change the format of the anonymous_id cookie:
+
+```js
+
+window.analytics.ready(() => {
+      window.analytics.register({
+        name: 'Cookie Compatibility',
+        version: '0.1.0',
+        type: 'utility',
+        load: (_ctx, ajs) => {
+          const user = ajs.user()
+          const cookieJar = user.cookies
+          const cookieSetter = cookieJar.set.bind(cookieJar)
+
+          // blindly convert any values into JSON strings
+          cookieJar.set = (key, value, opts) => cookieSetter(key, JSON.stringify(value), opts)
+
+          // stringify any existing IDs
+          user.anonymousId(user.anonymousId())
+          user.id(user.id())
+        },
+        isLoaded: () => true
+      })
+    })
+```
+
+You can view Segment's [existing plugins](https://github.com/segmentio/analytics-next/tree/master/src/plugins){:target="_blank"} to see more examples.  
+
+### Register a plugin
+Registering plugins enable you to modify your analytics implementation to best fit your needs. You can register a plugin using this:
+
+```js
+// A promise will resolve once the plugins have been successfully loaded into Analytics.js
+// You can register multiple plugins at once by using the variable args interface in Analytics.js
+await window.analytics.register(pluginA, pluginB, pluginN)
+```
+
+## Video Player Plugins
 
 Segment offers video player 'plugins' so you can quickly collect video events using Analytics.js. See the specific documentation below to learn more:
 

src/connections/sources/catalog/libraries/website/javascript/upgrade-to-ajs2.md

@@ -16,39 +16,41 @@ To upgrade a source to Analytics.js 2.0:
 5. Within 5 minutes, the source receives Analytics.js 2.0. No code or tag changes required.
 6. Open the Debugger to ensure that events are flowing as expected.
 
+> info ""
+> If you set `'Segment.io:' false' in the integrations object, Analytics.js 2.0 drops the event before it reaches the Source Debugger. 
+
 ## Automatic migration
 
 Analytics.js sources will upgrade to Analytics.js 2.0 on the date below, according to the account tier. On the date listed, Segment will upgrade all Analytics.js sources within the associated account tier.
 
 | Segment Plan | Upgrade Date |
 |--------------| -------------|
 | Free         | June 15, 2021|
-| Team         | July 6, 2021 | 
+| Team         | July 6, 2021 |
 | Business     | TBD          |
 
 > info ""
 > The plans and dates listed above are subject to change.
 
 ## Revert to Analytics.js Classic
 
-Once a source moves to Analytics.js 2.0, you can follow the steps above in [Manual migration](#manual-migration) back to  roll back to Analytics.js Classic.
+Once a source moves to Analytics.js 2.0, you can follow the steps above in [Manual migration](#manual-migration) back to roll back to Analytics.js Classic.
 
 ## Cases that require additional intervention
 
 In some cases, upgrading to Analytics.js 2.0 requires manual effort beyond enabling the Analytics.js 2.0 toggle.  
 
-### When using in-domain instrumentation CDN aliasing
-
-If the source you intend to upgrade uses the in-domain instrumentation as well as a custom "Alias for analytics.js", then you should update the AJS snippet to the latest version (4.15.3) or higher) before you toggle on Analytics.js 2.0.
+### Using in-domain instrumentation CDN aliasing
 
+If the source you intend to upgrade uses the in-domain instrumentation as well as a custom "Alias for analytics.js", then you should update the AJS snippet to the latest version (4.15.3 or higher) before you toggle on Analytics.js 2.0.
 
-### When relying on Analytics.js Classic's `ajs_anonymous_id` cookie format  
+### Relying on Analytics.js Classic's `ajs_anonymous_id` cookie format  
 
 Analytics.js 2.0 removes inbuilt quotes from cookie values, resulting in a different format for the `ajs_anonymous_id` value when compared to Analytics.js Classic.  Though you can retrieve cookie values with [standard supported functions](/docs/connections/sources/catalog/libraries/website/javascript/identity/#retrieve-the-anonymous-id), you'll need to configure your environment to accept the new format if your implementation relies on accessing the cookie value directly.
 
-### When using a strict content security policy on the page 
+### Using a strict content security policy on the page
 
-Analytics.js 2.0 asynchronously loads different pieces of the library as needed. If the source you're upgrading uses a strict Content Security Policy (CSP) that allows JavaScript to be downloaded from specific locations, then you need to update the CSP to account for all the pieces used for Analytics.js 2.0. Therefore, beyond allowing the main analytics.min.js script, you should allow the following paths in your CSP: 
+Analytics.js 2.0 asynchronously loads different pieces of the library as needed. If the source you're upgrading uses a strict Content Security Policy (CSP) that allows JavaScript to be downloaded from specific locations, then you need to update the CSP to account for all the pieces used for Analytics.js 2.0. Therefore, beyond allowing the main analytics.min.js script, you should allow the following paths in your CSP:
 - `https://cdn.segment.com/v1/projects/<WRITE_KEY>/settings`
-- `https://cdn.segment.com/analytics-next/bundles/*` 
+- `https://cdn.segment.com/analytics-next/bundles/*`
 - `https://cdn.segment.com/next-integrations/integrations/*`