# Quick Start Guide This guide is aimed at helping you quickly get up and running with the JavaScript SDK. The following sections cover the SDK installation steps and details on using the SDK to identify your website users and track their actions. ## Step 1: Install RudderStack JavaScript SDK To integrate the SDK with your website, place the following version of the code in the `` section of your website. ```javascript ``` The above snippet lets you integrate the SDK with your website and load it asynchronously to keep your page load time unaffected. To load `rudder-analytics.js` on to your page synchronously, refer to the [minified](#minified-code) or [non-minified](#non-minified-code) versions of the snippet below. The above code snippet does the following: * Creates an array to store the events until the analytics object is ready. * Stores a list of methods to replay them when the analytics object is ready. These methods are: | Method | Description | | ---------------- | ---------------------------------------------------- | | **`load()`** | Loads **`rudder-analytics.js`** with your write key. | | **`page()`** | Records page views whenever a user visits a page. | | **`track()`** | Tracks user actions and important events. | | **`identify()`** | Associates users and their traits or actions. | | **`reset()`** | Resets the `userid` and the associated traits. | * Loads the analytics object with your write key. * Makes the `page()`call to track the page view. It auto-captures properties such as `path`, `referrer`, `search`, `title`, and `URL`. If you want to override them, refer to the [**`page`**](https://rudderstack.com/docs/stream-sources/rudderstack-sdk-integration-guides/rudderstack-javascript-sdk/#page) API method. ### Minified code ```javascript ``` ### Non-minified code ```javascript ``` In all the above versions, there is an explicit `page` call at the end. This is added to ensure that whenever the SDK loads in a page, a `page` call is sent. You can remove this call completely or modify it with the extra page properties to suit your requirement. You can also add `page` calls in your application in places not tied directly to page load, e.g., virtual page views, page renders on route change such as in SPAs. ### Write key and data plane URL To integrate and initialize the JavaScript SDK, you need the source write key and the data plane URL. * To get the source write key, follow [**this guide**](https://docs.rudderstack.com/rudderstack-open-source/installing-and-setting-up-rudderstack/sending-test-events/#get-the-source-write-key). * To get the data plane URL, follow [**this guide**](https://docs.rudderstack.com/rudderstack-open-source/installing-and-setting-up-rudderstack/#what-is-a-data-plane-url-where-do-i-get-it). ### Alternative installation using NPM While it is recommended to use the above-mentioned snippets to use the JavaScript SDK with your website, you can also use the [**NPM module**](https://www.npmjs.com/package/rudder-sdk-js) to package RudderStack directly into your project. To install the SDK via npm, run the following command: ```bash npm install rudder-sdk-js --save ``` This NPM module is only meant to be used for a browser installation. If you want to integrate RudderStack with a Node.js application, refer to the [RudderStack Node.js repository](https://github.com/rudderlabs/rudder-sdk-node). #### Using the exported object Since the module exports the related APIs on an already-defined object combined with the Node.js module caching, you should run the following code snippet **only once** and use the exported object throughout your project: ```jsx import * as rudderanalytics from "rudder-sdk-js"; rudderanalytics.load(, ); rudderanalytics.ready(() => { console.log("We are all set!!!"); }); export { rudderanalytics }; ``` You can also do this with **ES5** using the `require` method, as shown in the following snippet: ```jsx var rudderanalytics = require("rudder-sdk-js"); rudderanalytics.load(, ); exports.rudderanalytics = rudderanalytics; ``` The related APIs exported by the module are: * `load` * `ready` * `identify` * `alias` * `page` * `track` * `group` * `reset` * `getAnonymousId` * `setAnonymousId` ### Sample implementations Refer to the following projects for a detailed walk-through of the above steps: * [**Sample Angular project**](https://github.com/rudderlabs/rudder-analytics-angular) * [**Sample React project**](https://github.com/rudderlabs/rudder-analytics-react) ### Supported browser versions | **Browser** | **Supported Versions** | | --------------- | ---------------------- | | Safari | v7 or later | | IE | v10 or later | | Edge | v80 or later | | Mozilla Firefox | v47 or later | | Chrome | v54 or later | | Opera | v43 or later | If the SDK does not work on the browser versions that you are targeting, verify if adding the browser polyfills to your application solves the issue. ## Step 2: Identify your users with the `identify()` method The `identify` call lets you identify a visiting user and associate them to their actions. It also lets you record the traits about them like their name, email address, etc. A sample `identify` call is shown below: ```javascript rudderanalytics.identify( "12345", { email: "name@domain.com" }, { page: { path: "", referrer: "", search: "", title: "", url: "" } }, () => { console.log("in identify call"); } ); ``` In the above example, the user-related information like the `userId` and `email` along with the [**contextual information**](https://rudderstack.com/docs/rudderstack-api/api-specification/rudderstack-spec/common-fields/#javascript-sdk) is captured. There is no need to call `identify()` for anonymous visitors to your website. Such visitors are automatically assigned an `anonymousId`. For more information, refer to the [Identify](https://rudderstack.com/docs/stream-sources/rudderstack-sdk-integration-guides/rudderstack-javascript-sdk/#identify) section of the SDK documentation. ## Step 3: Track your users' actions with `track()` The `track` call lets you record the customer events, i.e. the actions that they perform, along with any properties associated with them. A sample `track` call is shown below: ```javascript rudderanalytics.track( "test track event GA3", { revenue: 30, currency: "USD", user_actual_id: 12345, }, () => { console.log("in track call"); } ); ``` In the above example, the `track` method tracks the user event `test track event GA3` and information such as the `revenue`, `currency`, `anonymousId`. You can use the `track()` method to track various success metrics for your website like user signups, item purchases, article bookmarks, and more. ## Step 4: Check ready state There are cases when you may want to tap into the features provided by the end-destination SDKs to enhance tracking and other functionalities. The JavaScript SDK exposes a `ready` API with a `callback` parameter that fires when the SDK is done initializing itself and the other third-party native SDK destinations. An example is shown below: ```javascript rudderanalytics.ready(() => { console.log("We are all set!"); }); ``` For more information on the JavaScript SDK API methods, refer to the [JavaScript SDK APIs](https://docs.rudderstack.com/stream-sources/rudderstack-sdk-integration-guides/rudderstack-javascript-sdk/#supported-apis) section of the SDK documentation. ## Contact us For more information on any of the sections covered in this guide, you can [**contact us**](mailto:%20docs@rudderstack.com) or start a conversation in our [**Slack**](https://rudderstack.com/join-rudderstack-slack-community) community. If you come across any issues while using this SDK, feel free to submit them on our [**GitHub issues page**](https://github.com/rudderlabs/rudder-sdk-js/issues).