Skip to content
Rudder JavaScript SDK
JavaScript HTML Shell
Branch: master
Clone or download
Latest commit ecb7f0d Feb 6, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist resolve conflicts and remove lock file Jan 13, 2020
integrations add GTM native integration Jan 10, 2020
rudder-client-javascript/analytics/dist exposed api for anonymous id Jan 13, 2020
scripts serve file via server Jan 3, 2020
tests exposed api for anonymous id Jan 13, 2020
utils refactor structure Jan 2, 2020
.babelrc
.gitignore resolve conflicts and remove lock file Jan 13, 2020
LICENSE Create LICENSE Nov 7, 2019
README.md Update README.md Feb 6, 2020
analytics.js Replace console.log with logger.debug Jan 18, 2020
babel.config.test.js refactor structure Jan 2, 2020
package.json added test files Jan 3, 2020
rollup.config.js refactor structure Jan 2, 2020

README.md

What is RudderStack?

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.

What is the RudderStack JavaScript SDK?

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.

How to use the RudderStack JavaScript SDK?

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:

Step 1: Install RudderStack using the code snippet

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","identify","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/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",
		"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/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.

Step 2: Identify your users using the 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" },
      {
        context: {
          ip: "0.0.0.0"
        },
        page: {
          path: "",
          referrer: "",
          search: "",
          title: "",
          url: ""
        },
        anonymousId: "12345" 
      },
  () => {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.

Step 3: Track your users’ actions using the track() method

The 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
  },
  {
    context: {
      ip:  "0.0.0.0"
    },
    anonymousId:  "00000000000000000000000000"
  }, 
  () => {console.log("in track call");}
);

In the above example, the method tracks the event ‘test track event GA3’, information such as the revenue, currently, user ID and other contextual information such as IP address.

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.

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.

Contribute

You can start adding integrations of your choice for sending data through their JavaScript SDKs.

How to build the SDK

  1. Look for run scripts in the package.json file for getting browser minified and non-minified builds
  2. For adding or removing integrations, modify the imports in index.js under integrations folder
You can’t perform that action at this time.