Merge branch 'main' into mobile-autocapture

amplitude · Aug 8, 2024 · 4d008ce · 4d008ce
2 parents c465c97 + f70652b
commit 4d008ce
Show file tree

Hide file tree

Showing 73 changed files with 4,206 additions and 3,947 deletions.
diff --git a/.github/styles/config/vocabularies/dev/accept.txt b/.github/styles/config/vocabularies/dev/accept.txt
@@ -244,4 +244,5 @@ MTUs
 HTTP
 Wix
 Squarespace
-Clickthrough
+Clickthrough
+[Aa]utocapture
diff --git a/content/collections/browser_sdk/en/ampli-for-browser-sdk-2-0.md b/content/collections/browser_sdk/en/ampli-for-browser-sdk-2-0.md
@@ -10,7 +10,7 @@ supported_languages:
   - ts
 bundle_url: 'https://www.npmjs.com/package/@amplitude/ampli?activeTab=versions'
 updated_by: 0c3a318b-936a-4cbd-8fdf-771a90c297f0
-updated_at: 1721151325
+updated_at: 1722891655
 ampli_examples:
   -
     id: lyop1tqs
@@ -20,6 +20,8 @@ ampli_examples:
     id: lyop20ks
     ampli_language: TypeScript
     ampli_example_link: 'https://github.com/amplitude/ampli-examples/blob/main/browser/typescript/v2/react-app'
+migration_guide:
+  - 9b155be9-bb32-428c-9f49-6e00f9630547
 ---
 The [Ampli Wrapper](/docs/sdks/ampli) is a generated, strongly typed API for tracking Analytics events based on your Tracking Plan in Amplitude Data. The tracking library exposes a function for every event in your team’s tracking plan. The function’s arguments correspond to the event’s properties.
 

diff --git a/content/collections/browser_sdk/en/autocapture-plugin.md b/content/collections/browser_sdk/en/autocapture-plugin.md
@@ -10,160 +10,48 @@ supported_languages:
 updated_by: 0c3a318b-936a-4cbd-8fdf-771a90c297f0
 updated_at: 1718657468
 ---
-Amplitude's Autocapture plugin extends the events and properties that Amplitude tracks by default, and enables Visual Labeling to enable you to define events based on elements on your site. For more information about Visual Labeling, see [Visual Labeling](/docs/data/visual-labeling).
 
-## Installation
+{{partial:admonition type="warning" heading="Autocapture plugin is deprecated"}}
+Starting with Browser SDK version 2.10.0, Amplitude includes [Autocapture](/docs/get-started/autocapture) functionality with the SDK. 
 
-Autocapture requires the latest versions of the Amplitude Browser SDK ({{sdk_versions:browser}}) and the Autocapture plugin ({{sdk_versions:visual_labeling_plugin}})
-
-{{partial:tabs tabs="Script Loader, npm, yarn"}}
-{{partial:tab name="Script Loader"}}
-```html
-<script defer src="https://cdn.amplitude.com/libs/analytics-browser-{{sdk_versions:browser}}-min.js.gz"></script>
-<script defer src="https://cdn.amplitude.com/libs/plugin-autocapture-browser-{{sdk_versions:visual_labeling_plugin}}-min.js.gz"></script>
-```
-{{/partial:tab}}
-{{partial:tab name="npm"}}
-```bash
-npm install @amplitude/analytics-browser
-npm install @amplitude/plugin-autocapture-browser@beta
-```
-{{/partial:tab}}
-{{partial:tab name="yarn"}}
-```bash
-yarn add @amplitude/analytics-browser
-yarn add @amplitude/plugin-autocapture-browser@beta
-```
-{{/partial:tab}}
-{{/partial:tabs}}
+For best results, Amplitude recommends that you upgrade to Browser SDK 2.10.0 or higher using the following instructions.
+{{/partial:admonition}}
 
-## Initialize the plugin
+## Update to the built-in Autocapture
 
-The Amplitude Browser SDK supports a [plugin architecture](/docs/sdks/sdk-plugins) that enables features like Autocapture. To enable the plugin, update your code with one of the following snippets, depending on your implementation. Both methods require that you define the Autocapture plugin, then call `add()` to enable it.
+If you used the Autocapture plugin, and updated the Browser SDK to version 2.10.0 or newer, complete the following steps to remove the plugin, and used the Autocapture that ships with Browser SDK.
 
-{{partial:tabs tabs="Script loader, npm / yarn"}}
-{{partial:tab name="Script loader"}}
-```html
-<script type="module">
-  window.amplitude.init(AMPLITUDE_API_KEY)
-  const autocapturePlugin = window.amplitudeAutocapturePlugin.plugin();
-  window.amplitude.add(autocapturePlugin);
-</script>
-```
-{{/partial:tab}}
-{{partial:tab name="npm / yarn"}}
-```js
-import * as amplitude from '@amplitude/analytics-browser';
-import { autocapturePlugin } from '@amplitude/plugin-autocapture-browser';
+### Script loader
 
-amplitude.init(AMPLITUDE_API_KEY);
-amplitude.add(autocapturePlugin());
-```
-{{/partial:tab}}
-{{/partial:tabs}}
+Replace your referenced script with the following snippet:
 
-## Configuration
+{{partial:partials/code/snippet autocapture="true"}}
 
-The Autocapture plugin adds four settings that help you configure what the plugin tracks.
+### Npm or yarn
 
-| <div class="big-column">Setting</div>                   | Default                                                                                              | Description                                                                                        |
-| -------------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
-| `cssSelectorAllowlist`     | `['a','button','input','select','textarea','label','[data-amp-default-track]','.amp-default-track']` | String[]. Accepts one or more CSS selectors that define which elements on the page to track.         |
-| `pageUrlAllowlist`         | undefined                                                                                            | `(string\|RegExp)[]`. Defines the URL, URLs, or URL pattern on which Amplitude tracks default events |
-| `shouldTrackEventResolver` | undefined                                                                                            | Function. Programatically determines if Amplitude should or shouldn't track an event.              |
-| `dataAttributePrefix`      | `data-amp-track`                                                                                     | Allows the plugin to capture data attributes as an event property                                  |
+If you use npm or yarn to add the Browser SDK, update the Browser SDK package, and remove the Autocapture plugin.
 
 ```js
-const plugin = autocapturePlugin({
-  cssSelectorAllowlist: [
-    '.amp-tracking',
-    '[amp-tracking]'
-  ],
-  pageUrlAllowlist: [
-    'https://amplitude.com',
-    new RegExp('https://amplitude.com/blog/*')
-  ],
-});
+// package.json
+{
+  "dependencies": {
+    "@amplitude/analytics-browser": "^2.10.0", // make sure the minimum version is 2.10.0
+    "@amplitude/plugin-autocapture-browser": "0.9.0", //[tl! --]
+  }
+}
 ```
 
-By default, if you don't use these settings, Amplitude tracks the default selectors on all page on which you enable the plugin.
-
-{{partial:admonition type="note" heading=""}}
-When specify the CSS selectors to track, your selection overrides the default. To retain the default selectors import the `DEFAULT_CSS_SELECTOR_ALLOWLIST` and include it in your code.
+In your script, remove references to the Autocapture plugin.
 
 ```js
-import { DEFAULT_CSS_SELECTOR_ALLOWLIST } from '@amplitude/plugin-autocapture-browser';
-
-const selectors = [
-  ...DEFAULT_CSS_SELECTOR_ALLOWLIST,
-  '.class-of-a-thing-i-want-to-track',
-];
-```
-{{/partial:admonition}}
-
-## New events
-
-When you enable the Autocapture plugin, Amplitude sends two events, from which you can create Labeled Events with Visual Labeling:
-
-- `[Amplitude] Element Clicked`
-- `[Amplitude] Element Changed`
-
-These two events capture properties that describe the corresponding element and other context about the user's browser:
-
-<!-- vale off-->
-- `[Amplitude] Element ID`
-- `[Amplitude] Element Class`
-- `[Amplitude] Element Tag`
-- `[Amplitude] Element Text` (Collected for `[Amplitude] Element Clicked`, only) 
-- `[Amplitude] Element Href` (Collected for `[Amplitude] Element Clicked`, only)
-- `[Amplitude] Element Position Left`
-- `[Amplitude] Element Position Top`
-- `[Amplitude] Viewport Height`
-- `[Amplitude] Viewport Width`
-- `[Amplitude] Page URL`
-- `[Amplitude] Page Title`
-- `[Amplitude] Element Selector`
-- `[Amplitude] Element Attributes`
-- `[Amplitude] Element Aria Label`
-- `[Amplitude] Element Parent Label`
-<!-- vale on-->
-
-## Disable Autocapture
-
-To disable Autocapture, remove the plugin from any pages that implement it, and set `defaultTracking: false` in the Amplitude initialization on that page.
-
-{{partial:tabs tabs="Script loader, npm / yarn"}}
-{{partial:tab name="Script loader"}}
-Remove the following lines of code:
-
-```html
-<!-- load Amplitude Autocapture plugin -->
-<script defer src="https://cdn.amplitude.com/libs/plugin-autocapture-browser-{{sdk_versions:visual_labeling_plugin}}-min.js.gz"></script>
-<!-- initialize Amplitude SDK and Autocapture plugin -->
-<script type="module">
-  const autocapturePlugin = window.amplitudeAutocapturePlugin.plugin();
-  window.amplitude.add(autocapturePlugin);
-</script>
-```
-{{/partial:tab}}
-{{partial:tab name="npm / yarn"}}
-Remove the plugin:
-
-```bash
-// npm
-npm uninstall @amplitude/plugin-autocapture-browser
-
-// yarn
-yarn remove @amplitude/plugin-autocapture-browser
-```
-
-Remove the initialization code:
-
-```javascript
-// Remove the following lines of code
-import { autocapturePlugin } from '@amplitude/plugin-autocapture-browser';
-
-amplitude.add(autocapturePlugin());
+import * as amplitude from '@amplitude/analytics-browser';
+import { autocapturePlugin } from '@amplitude/plugin-autocapture-browser'; //[tl! --]
+
+amplitude.init(AMPLITUDE_API_KEY); //[tl! --]
+amplitude.init(AMPLITUDE_API_KEY, { //[tl! ++: 4]
+  autocapture: {
+    elementInteractions: true,
+  },
+});
+amplitude.add(autocapturePlugin()); //[tl! --]
 ```
-{{/partial:tab}}
-{{/partial:tabs}}
diff --git a/content/collections/browser_sdk/en/browser-sdk-1.md b/content/collections/browser_sdk/en/browser-sdk-1.md
@@ -2,7 +2,7 @@
 id: 8471af8b-e132-4073-8330-d5dd7bbbd8ae
 blueprint: browser_sdk
 title: 'Browser SDK 1'
-sdk_status: current
+sdk_status: maintenance
 article_type: core
 supported_languages:
   - js
@@ -13,11 +13,9 @@ bundle_url: 'https://www.npmjs.com/package/@amplitude/analytics-browser/v/1.13.4
 api_reference_url: 'https://amplitude.github.io/Amplitude-TypeScript/'
 shields_io_badge: 'https://img.shields.io/npm/v/@amplitude/analytics-browser/v1.svg'
 updated_by: 0c3a318b-936a-4cbd-8fdf-771a90c297f0
-updated_at: 1721756281
+updated_at: 1722891630
 major_version: 1
 ampli_article: f7989230-bf1c-48aa-ad61-2bc2b3e15a8c
-migration_guide:
-  - 9b155be9-bb32-428c-9f49-6e00f9630547
 exclude_from_sitemap: false
 source: 'https://www.docs.developers.amplitude.com/data/sdks/typescript-browser/'
 package_name: '@amplitude/analytics-browser'