danger

You are viewing documentation for an older version.

Click here to view the latest documentation.

Load JavaScript SDK

Load the JavaScript SDK.

You can load the JavaScript SDK using the load API method to track and send events from your website to RudderStack. It can be defined as:

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, [loadOptions]);

Loading options

You can use loadOptions in the above load call to define various options while loading the SDK. It includes the following parameters:

{
  logLevel: "DEBUG" | "INFO" | "WARN",
  integrations: IntegrationOpts,
  configUrl: string,  // defaults to https://api.rudderlabs.com
  getSourceConfig: function,
  queueOptions: QueueOpts,
  loadIntegration: boolean, // defaults to true.
  sessions: SessionOpts,
  secureCookie: boolean, // defaults to false.
  destSDKBaseURL: string, // defaults to https://cdn.rudderlabs.com/v1.1/js-integrations
  useBeacon: boolean, // defaults to false.
  beaconQueueOptions: BeaconQueueOpts,
  cookieConsentManager: cookieConsentManager,
  anonymousIdOptions: AnonymousIdOptions,
  setCookieDomain: string, // defaults to current domain.
  sameSiteCookie: "Strict" | "Lax" | "None", // defaults to Lax.
  lockIntegrationsVersion: boolean, // defaults to false.
  polyfillIfRequired: boolean, // defaults to true.
  onLoaded: callback function,
  uaChTrackLevel: "none" | "default" | "full", // defaults to None.
  sendAdblockPage: boolean,
  sendAdblockPageOptions: object,
  useGlobalIntegrationsConfigInEvents: boolean // defaults to false.
  sameDomainCookiesOnly: boolean // defaults to false.
}

The detailed description of these parameters is as follows:

ParameterTypeDescription
logLevelStringValues include DEBUG, INFO, and WARN.
integrationsIntegrationOptsSends event data to the selective destinations.
configUrlStringThe Control Plane endpoint serving your destination configurations. Default value is https://api.rudderlabs.com. Note that sourceConfig is automatically appended to this endpoint in the format https://api.rudderlabs.com/<source_config_url>/sourceConfig
getSourceConfigFunctionReturns a custom configuration which can be used in place of the control plane’s dashboard configuration.
queueOptsQueueOptsContains the options to control the behavior of the persistence queue that buffers the events before sending them to the data plane.
loadIntegrationBooleanDetermines whether the destination SDKs are fetched by the SDK. Default value is true. Supported for Amplitude and Google Analytics only.
sessionsSessionOptsCaptures the details specific to session tracking.
secureCookieBooleanDetermines whether the SDK sends the cookie to the storage backend via HTTPS. Default value is false.
destSDKBaseURLStringPath used by the SDK to load the integrations. Default value is https://cdn.rudderlabs.com/v1.1/js-integrations. Reference.
useBeaconBooleanDetermines whether the SDK sends event payloads via Beacon. Default value is false.
beaconQueueOptionsBeaconQueueOptsInternal queue to hold the data and send it through the Beacon utility in batches.
cookieConsentManagerObjectSee the Consent manager integration section.
anonymousIdOptionsObjectAutomatically captures the anonymous ID from a source and sets it as RudderStack’s anonymousId.
setCookieDomainStringSets the cookie domain. SDK captures and uses the current domain as the default value. Refer to the Data Storage guide for more information.
sameSiteCookieStringSets the SameSite attribute of a cookie. Default value is Lax.
lockIntegrationsVersionBooleanDetermines if the JavaScript SDK should use the version of the native destination SDKs as used by the core SDK. This is particularly useful for NPM installations where a specific version of the core SDK is used. The default value is false, meaning the latest versions of the destination SDKs are used in case of both CDN and NPM installations. Note that if destSDKBaseURL is set to a specific path, it gets the highest priority.
polyfillIfRequiredBooleanLoads the polyfills for unsupported features in older browsers. Default value is true.
onLoadedFunctionCallback function that executes after the JavaScript SDK loads and before the native device-mode destination SDKs load.
uaChTrackLevelStringConfigures the information a user should get in the context object regarding the client hints. The JavaScript SDK fetches this information using the user-agent client hints API.
sendAdblockPageBooleanEnables the JavaScript SDK to load the Google AdSense library. If RudderStack fails to load this library, it concludes that an adblocker is enabled on the page. Reference.
sendAdblockPageOptionsObjectIf the sendAdblockPage option is set to true, the JavaScript SDK makes an implicit page call about the ad-blocked pages. You can use the sendAdblockPageOptions option (containing the IntegrationOpts object) to specify the destinations to which you want to forward this page call. Reference.
useGlobalIntegrationsConfigInEventsBooleanLets you use the integrations object of the load method at the event level when it is not present at the event level. Default value is false.
sameDomainCookiesOnlyBooleanIf set to true, the SDK reads cookies from the exact domain it is set at. Default value is false.

For example, if this load option is set to true then the cookies set from the site’s top-level domain are not accessible by the sub-domains and vice versa.

The following sections contain the detailed definitions and usage of some of the above parameters:

IntegrationOpts

You can use this parameter to send the event data only to the selective destinations. Its structure is defined as follows:

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  integrations: {
    All: boolean, // default true
    <Destination1>: boolean, // or object.
    <Destination2>: boolean, // or object.
    ...
  }
});

The following table describes the above (optional) parameters in detail:

ParameterTypeDescription
AllBooleanAll destinations to which the event data must be sent. The default value is true. If set to false, RudderStack will not send the event data to any destination.
<Destination>BooleanSpecific destination to which the event data must be sent/not, depending on its Boolean value.

You must specify the actual destination name (as listed in the RudderStack dashboard) in the <Destination> parameter and not the name you have assigned to the destination. For example, the below sample snippet sends the event data only to Amplitude and Intercom destinations:

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
    integrations: {
        All: false,
        "Amplitude": true,
        "Intercom": true
    }
});

getSourceConfig

The getSourceConfig function returns the custom configuration which can be used in place of control plane’s dashboard configuration:

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  getSourceConfig: function() {
    return {
      // custom configuration
    };
  },
  // other load options
});

QueueOpts

The queueOpts object contains the options to control the behavior of the persistence queue that buffers the events before sending them to RudderStack. Its structure is defined as follows:

{
  maxRetryDelay: 360000,
  minRetryDelay: 1000,
  backoffFactor: 2,
  maxAttempts: 10,
  maxItems: 100,
}

The following table describes the above integer type (optional) parameters in detail:

ParameterDescriptionDefault value
maxRetryDelayUpper limit on the maximum delay for an event (in ms).360000
minRetryDelayMinimum delay expected before sending an event (in ms).1000
backoffFactorExponential base.2
maxAttemptsMaximum number of attempts to send the event to the destination.10
maxItemsMaximum number of events kept in the storage.100

SessionOpts

The SessionOpts object contains the options related to the SDK’s automatic session tracking behavior. Refer to the Session Tracking guide for more information. Its structure is defined as follows:

ParameterDescriptionDefault value
autoTrackDetermines if the SDK should automatically track the user sessions.true
timeoutThe maximum inactivity period before the session expires.1800000 ms (30 minutes)

cookieConsentManager

Once a user provides the consent, you can load the JavaScript SDK and enable the OneTrust integration via the cookieConsentManager object:

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  cookieConsentManager: {
    oneTrust: {
      enabled: true
    }
  }
});

anonymousIdOptions

You can use the anonymousIdOptions object to automatically capture the anonymous ID from a source and set it as RudderStack’s anonymousId.

For example, if you are migrating from a particular source and want to retain its anonymous ID, you can enable the anonymousIdOptions to set the source’s anonymous ID as the anonymousId in RudderStack.

The structure of anonymousIdOptions is defined as follows:

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  anonymousIdOptions: {
    autoCapture: {
      enabled: true,
      source: "segment"
    }
  }
});

The following table describes the above (required) parameters in detail:

ParameterTypeDescription
enabledBooleanDetermines if the anonymous ID should be auto-captured.
sourceStringDetermines the external source of anonymous ID.
info
If the RudderStack anonymousId is already set in your browser, anonymousIdOptions will not take effect.
info
You can call the reset API to clear the persisted anonymous ID and force the SDK to generate a new ID when the next tracking API is called (irrespective of whether anonymousIdOptions is enabled or disabled). However, if the anonymousIdOptions object is enabled and the SDK is loaded again (as a result of webpage reload, navigate to a different webpage, etc.), the setAnonymousId call will trigger automatically and the specified source’s anonymous ID will again be set as the RudderStack anonymousId.

uaChTrackLevel

You can use the uaChTrackLevel option to configure the information a user should get in the context object regarding the client hints. The JavaScript SDK fetches this information using the user-agent client hints API. It can take the below values:

  • none: Specifies that uaChTrackLevel field is absent in the context object.
  • default: Specifies that uaChTrackLevel field is present in the context object and contains an object similar to the one below:
{
  "brands": [{
    "brand": "Chromium",
    "version": "110"
  }, {
    "brand": "Not A(Brand",
    "version": "24"
  }, {
    "brand": "Google Chrome",
    "version": "110"
  }],
  "mobile": false,
  "platform": "macOS"
}
  • full: Specifies that uaChTrackLevel field is present in the context object and contains an object similar to the one below:
{
  "architecture": "arm",
  "bitness": "64",
  "brands": [{
    "brand": "Chromium",
    "version": "110"
  }, {
    "brand": "Not A(Brand",
    "version": "24"
  }, {
    "brand": "Google Chrome",
    "version": "110"
  }],
  "fullVersionList": [{
    "brand": "Chromium",
    "version": "110.0.5481.77"
  }, {
    "brand": "Not A(Brand",
    "version": "24.0.0.0"
  }, {
    "brand": "Google Chrome",
    "version": "110.0.5481.77"
  }],
  "mobile": false,
  "model": "",
  "platform": "macOS",
  "platformVersion": "13.1.0",
  "uaFullVersion": "110.0.5481.77",
  "wow64": false
}

onLoaded

The onLoaded callback function takes the rudderanalytics instance as an argument and executes after the JavaScript SDK loads and before the native device-mode destination SDKs are loaded.

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  onLoaded: function(rudderanalytics) {
    console.log("All set!");
  }
});

useGlobalIntegrationsConfigInEvents

You can use this option to use the integrations object of the load method at the event level when it is not present at the event level.

For example, if the integrations object is defined in the load method and the useGlobalIntegrationsConfigInEvents option is set to true:

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  integrations: {
    All: true,
    "Google Analytics": false,
    ...
  },
  useGlobalIntegrationsConfigInEvents: true,
  // other load options
});

Case 1: integrations option is present at the event level:

rudderanalytics.track(
  "Order Completed", {
    revenue: 30,
    currency: "USD",
    user_actual_id: 12345
  }, {
    integrations: {
      All: true,
      Amplitude: false
    },
  },
  () => {
    console.log("track call");
  }
);

In this case, the JavaScript SDK uses the integrations option from the track event.

Case 2: integrations option is not present at the event level:

rudderanalytics.track(
  "Order Completed", {
    revenue: 30,
    currency: "USD",
    user_actual_id: 12345
  }, {},
  () => {
    console.log("track call");
  }
);

In this case, the SDK uses the integrations option from the load method.

Loading SDK for self-hosted control plane

If you are self-hosting the control plane using the Control Plane Lite utility, the load call should be made as below:

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  configUrl: < CONTROL_PLANE_URL > ,
});

Verifying if the SDK has loaded correctly

You can verify if the JavaScript SDK has loaded correctly by opening the JavaScript console in your browser:

  • Safari: Ctrl+Alt+I (Windows) or Command+Option+I (Mac) and go to the Console tab.
  • Chrome: Ctrl+Shift+J (Windows) or Command+Option+J (Mac).
  • Firefox: Ctrl+Shift+K (Windows) or Command+Option+K (Mac) and select the Console tab.
  • Internet Explorer: Press F12 and go to the Console tab.

Run the rudderanalytics command in the console. If it returns the following code snippet, it means that the analytics.js file has loaded successfully:

{Integrations: Object, _integrations: Object, _readied: true, _timeout: 300, _user: n_}

If it gives an undefined error, you need to verify the SDK installation.

Allowlist destination domain

While using the JavaScript SDK with destinations supporting the device mode, you might need to allowlist the domain from where the destination SDK will load in your content security policy (CSP).

info
A content security policy adds an extra layer of protection from any type of cross-site scripting, clickjacking, and data injection attacks.

See the specific destination’s documentation to obtain the domain to be allowlisted. For example, Braze.

RudderStack expects the following (minimum) CSP header configuration to load the JavaScript SDK without any errors:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' https: //cdn.rudderlabs.com/ https://cdn.rudderstack.com/;">

If you don’t want to allow unsafe inline and use the CDN package with its loading snippet, use nonce attribute to the script tag for the loading snippet:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-rAnd0m' https: //cdn.rudderlabs.com/ https://cdn.rudderstack.com/;">

In case you use the npm package, no inline loading snippet is required:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https: //cdn.rudderlabs.com/ https://cdn.rudderstack.com/;">

Tracking user sessions

By default, the JavaScript SDK automatically tracks the user sessions. This means that RudderStack automatically determines the start and end of a user session depending on the inactivity time configured in the SDK (default time is 30 minutes).

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  sessions: {
    autoTrack: true,
    timeout: 10 * 60 * 1000,  // 10 min in milliseconds
  },
  ...<otherLoadOptions>
});

To disable automatic session tracking, you can set the load option autoTrack to false.

For more information on the user sessions and how to track them using the JavaScript SDK, refer to the Session Tracking guide.


Questions? Contact us by email or on Slack