Rudder is an enterprise-ready, open-source alternative to Segment, for collecting and routing customer event data. More information on Rudder can be found [here](https://github.com/rudderlabs/rudder-server).
Rudder is an enterprise-ready, open-source alternative to Segment, for collecting and routing customer event data. More information on Rudder can be found here.
The RudderStack JavaScript SDK (released under Apache License 2.0) allows you to utilize our rudder-analytics.js library to start sending event data from your website to RudderStack. After integrating this SDK, you will also be able to connect to multiple destinations such as Amplitude, Google Analytics, etc. to send the data.
This Quick Start Guide will help you get up and running with using the RudderStack JavaScript SDK in no time. You just need to follow the steps below:
To integrate the SDK, place the following code snippet in the <head> section of your website.
You can use either the minified or non-minified version of the code:
The minified version is as follows:
<script>
rudderanalytics=window.rudderanalytics=[];for(var methods=["load","page","track","alias","group","identify","ready","reset"],i=0;i<methods.length;i++){var method=methods[i];rudderanalytics[method]=function(d){return function(){rudderanalytics.push([d,...arguments])}}(method)}rudderanalytics.load("YOUR_WRITE_KEY","DATA_PLANE_URI"),rudderanalytics.page();
</script>
<script src="https://cdn.rudderlabs.com/v1/rudder-analytics.min.js"></script>
The non-minified version of the code is shown below:
<script>
rudderanalytics = window.rudderanalytics = [];
var methods = [
"load",
"page",
"track",
"identify",
"alias",
"group",
"ready",
"reset"
];
for (var i = 0; i < methods.length; i++) {
var method = methods[i];
rudderanalytics[method] = function (methodName) {
return function () {
rudderanalytics.push([methodName].concat(Array.prototype.slice.call(arguments)));
};
}(method);
}
rudderanalytics.load("YOUR_WRITE_KEY", "DATA_PLANE_URI");
//For example,
//rudderanalytics.load("1Qb1F3jSWv0eKFBPZcrM7ypgjVo", "http://localhost:8080");
rudderanalytics.page();
</script>
<script src="https://cdn.rudderlabs.com/v1/rudder-analytics.min.js"></script>
NOTE: Whichever version of the code you use, you need to replace YOUR_WRITE_KEY with the write key in the RudderStack Control Plane and DATA_PLANE_URI with the URI of the RudderStack Server/ Data Plane.
You can also execute the min file in async/defer way, like:
<script async src="https://cdn.rudderlabs.com/rudder-analytics.min.js"></script>
NOTE: We are moving our sdk to a diiferent path from the earlier https://cdn.rudderlabs.com/rudder-analytics.min.js to https://cdn.rudderlabs.com/v1/rudder-analytics.min.js. The earlier path may not be maintained in coming releases.
identify() method:The identify() method allows you to link users and their actions to a specific userid.
A sample example of how the identify() method works is as shown:
rudderanalytics.identify(
"12345",
{ email: "name@domain.com" },
{
page: {
path: "",
referrer: "",
search: "",
title: "",
url: ""
}
},
() => {console.log("in identify call");}
);
In the above example, information such as the user ID, email along with contextual information such as IP address, anonymousId, etc. will be captured.
NOTE: There is no need to call identify() for anonymous visitors to your website. Such visitors are automatically assigned an anonymousId.
track() methodThe track() method allows you to track any actions that your users might perform.
A sample example of how the track() method works is as shown:
rudderanalytics.track(
"test track event GA3",
{
revenue: 30,
currency: 'USD' ,
user_actual_id: 12345
},
() => {console.log("in track call");}
);
In the above example, the method tracks the event ‘test track event GA3’, information such as the revenue, currency, anonymousId.
You can use this method to track various other success metrics for your website, such as user signups, item purchases, article bookmarks, and much more.
NOTE: To override contextual information, for ex: anonymising IP and other contextual fields like page properties, the following template can be used. Similarly one can override the auto generated anonymousId with provided id. For this:
rudderanalytics.track(
"test track event GA3",
{
revenue: 30,
currency: 'USD' ,
user_actual_id: 12345
},
{
page: {
path: "",
referrer: "",
search: "",
title: "",
url: ""
},
context: {
ip: "0.0.0.0"
},
anonymousId: "00000000000000000000000000"
},
() => {console.log("in track call");}
);
And we’re done! You’ve successfully installed rudder-analytics.js tracking. Now you can enable and use any event destination to send your processed event data that you want, in no time at all.
For a detailed technical documentation and troubleshooting guide on the RudderStack’s JavaScript SDK, click here.
There are cases when one may want to tap into the features provide by end destination SDKs to enhance tracking and other functionality. Rudder SDK exposes a ready api with a callback parameter that fires when the SDK is done initialising itself and other third-party native-sdk destinations.
Ex:
rudderanalytics.ready(
() => {console.log("we are all set!!!");}
);
One can also define callbacks to common methods of rudderanalytics object.
Note: For now, the functionality is supported for syncPixel method which is called in Rudder SDK when making sync calls in integrations for relevant destinations.
Ex:
<script>
rudderanalytics.syncPixelCallback = obj => {
rudderanalytics.track(
"sync lotame",
{ destination: obj.destination },
{ integrations: { All: false, S3: true } }
);
};
</script>
<script src="https://cdn.rudderlabs.com/rudder-analytics.min.js"></script>
In the above example, we are defining a syncPixelCallback on the analytics object before the call to load the SDK. This will lead to calling of this registered callback with the parameter
{destination: <destination_name>} whenever a sync call is made from Rudder SDK for relevant integrations like Lotame.
We will be adding similar callbacks for apis such as track, page, identify etc.
It may happen that the need arises to track most of user interactions with a web-app. It becomes hard for a developer to capture these DOM interactions and make track calls for all. The autotrack feature of Rudder SDK helps in tracking all user interactions like click | change | submit automatically. The data generated will be verbose and to make sense of the data, one can use user transformations from the config-plane to build use-cases like monitoring user journeys etc.
For more information and payload structure, click here.
To enable autotracking, make the load call as:
rudderanalytics.load("YOUR_WRITE_KEY", "DATA_PLANE_URI", {useAutoTracking: true});
By default, the SDK don't capture any DOM element values. To start capturing values, like form field values when submitting the form, other input element values etc, whitelist them using any attribute of the element for which you want to send values, For ex, tracking element values for all elements whose any one attribute is "CLASS_ATTR_NAME":
rudderanalytics.load("YOUR_WRITE_KEY", "DATA_PLANE_URI", {useAutoTracking: true, valTrackingList: ["CLASS_ATTR_NAME"]});
Since Rudder SDK depends on the config plane for fetching configs like native-sdk enabled destinations etc, if you are self-hosting the config plane, make the load call as:
rudderanalytics.load("YOUR_WRITE_KEY", "DATA_PLANE_URI", {configUrl: "CONFIG_PLANE_URI"});
You can start adding integrations of your choice for sending data through their JavaScript SDKs.
Look for run scripts in the package.json file for getting browser minified and non-minified builds. The builds are updated in the dist folder of the directory. Among the others, the important ones are:
npm run buildProdBrowser : This outputs rudder-analytics.min.js.npm run buildProdBrowserBrotli: This outputs two files, rudder-analytics.min.br.js (the original minified file, same as above) and rudder-analytics.min.br.js.br (the brotli compressed file).npm run buildProdBrowserGzip: This outputs two files, rudder-analytics.min.gzip.js (the original minified file, same as above) and rudder-analytics.min.gzip.js.gz (the gzipped compressed file).We are using rollup to build our SDKs, configuration for it is present in rollup.config.js in the repo directory.
For adding or removing integrations, modify the imports in index.js under integrations folder.
FAQs
Rudder is an enterprise-ready, open-source alternative to Segment, for collecting and routing customer event data. More information on Rudder can be found [here](https://github.com/rudderlabs/rudder-server).
The npm package rudder-js receives a total of 0 weekly downloads. As such, rudder-js popularity was classified as not popular.
We found that rudder-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.