Introducing RudderStack's New, High-performance JavaScript SDK

Most businesses spend a large amount of time and money developing their websites and there is a good reason for this. Websites are the way modern consumers and buyers interact with and build relationships with businesses. As a result, engineering teams are under high pressure to ensure that their websites are always performing at their best. To help out with page speed, debugging and general page performance, we’re excited to announce the latest version of our RudderStack JavaScript SDK.

The New RudderStack JavaScript SDK

The first impression that any company has on potential customers is page speed, which has a significant impact on user experience. Immediately after that first impression, website performance issues take center stage in forming customers’ opinions including time to render, time to interact, DNS lookup speed, memory usage, and more. In the past, engineers have faced the difficult choice of prioritizing page performance above everything else or implementing tools on their site to help with business needs. The lack of tooling and development kits around SDK performance is a big contributor to this pain point.

RudderStack's newest version of our JavaScript SDK solves that problem, making both fast performance and collecting customer data for various tools possible. Our JavaScript SDK leverages the rudder-analytics.js library to track and send user events from your website to RudderStack without compromising site performance. You can then further transform and route this event data to the destination platforms of your choice.

Don’t just take my word for it. Let’s dive into the metrics. Our performance monitoring benchmarks showed almost 3x performance improvement with a variety of optimizations. Our new SDK config reduced the package size by 70% and the load time by 60%. Testing also showed 10-30 point improvements in Lighthouse performance scores, reducing JavaScript penalties by ⅔ in many cases. This setup can make already high-performing setups like static HTML sites blazingly fast (a great use case for Jamstack advocates).

Performance is increased, but the icing on the case is that the SDK still routes this data in real time to tools like Snowflake, Amazon S3, Salesforce, Slack, Google Analytics, Customer.io, and more. With this data, all of our core business functions, from sales and marketing to recruiting and customer support, are able to access the data they need in order to better serve our customers and growing business.

Developer Experience

Our JavaScript SDK makes it incredibly simple for engineering teams to capture event data in JSON format and send it to any destination without having to implement a new API every single time (or face the performance penalties of having to initialize tools like Google Tag Manager or Firebase). We support a variety of JavaScript SDK API calls that follow standard templates, including Load, Identify, Page, Track, Alias, Group, and Reset (see the code for these HTTP requests on Github). Note that the SDK can run on websites and web apps, meaning you can identify users whether they are new website visitors or your app is running authentication for users logging into your product.

We also allow developers to filter selective destinations to send event data. You can send your event data only to a few intended destinations by filtering out the rest. You can do so by passing an integrations object in the options parameter of the identify(), page(), and track() methods. We support over 150 destinations from Salesforce and Slack to Redshift and BigQuery.

Best of all, we offer a Live Viewer that makes troubleshooting events a straightforward process.

Context and Traits in RudderStack

RudderStack gives developers the option to automatically capture certain event-specific and user-specific data, based on the type of the event (see the following examples). The context and trait dictionaries can be included within the options argument which is included in the identify(), page(), and track() methods. A context is a dictionary of additional information about a particular data, such as a user’s IP address. A trait is an optional dictionary included within context, which specifies the unique traits of the user. This is a very useful field for linking information of a user from a previously made identify() call to a track() or page() event.

Querystring API

RudderStack's Querystring API allows you to trigger track and identify calls using the query parameters. For example, the ajs_uid parameter makes a rudderanalytics.identify() call with userId having the parameter value (see our docs and FAQ for more information).

Detecting Ad-blocked Pages

RudderStack's new JavaScript SDK also provides a way to send a page view containing relevant markers on whether a page is ad-blocked. You can analyze this data to find what percent of your site's page views are affected by ad-blockers.

Sign Up for Free and Install Our JavaScript SDK on Your Site

To integrate the RudderStack JavaScript SDK with your website, you can place either the minified or non-minified version of the code snippet in the <head> section of your website. Additionally, we have a NPM model to package RudderStack directly into your product. For more information, you can view our version migration guide. Additionally, you can get started with RudderStack today by signing up for our free trial.