Datagran Web SDK

Datagran provides a JavaScript tracker library that clients can install on their web sites and start collecting granular data about how their users interact with their sites.
When a Client configures a web data connection from within the Datagran app, they are provided a code snippet that simply needs to be available on all pages that need tracking. In this document, we provide an overview of the various data points that are collected automatically by our tracker and how developers can send additional data using custom events.

Technical Overview

The Datagran JavaScript library uses pixel-based technology to implement behavioral tracking. In this method, the  key browsing information and then appends these to a dynamic pixel download request which carries this information in the request query string. When the pixel is downloaded, it generates a server-side log. In our case, these logs are generated on the Google Cloud Platform and our back end infrastructure then processes these logs into meaningful reports. The whole process is completely asynchronous and does not interfere or slow down the normal page load process, given that our snippet is downloaded asynchronously. Data is processed in near real-time and clients can view and verify their traffic stats almost immediately after placing their pixel.

Basic implementation

For customers looking to do basic tracking, there is no other coding requirement except to add the JavaScript snippet generated when a new behavioral data source is created. This snippet simply needs to be placed in a section of the site (e.g. the header) so that it can track all pages. If you are using our snippet from within the Google Tag Manager, simply add the default tag containing our JavaScript code and set up filters in case you wish for this tag to be fired only on specific pages.
By default, we capture the following events:

  • Page Views-Fired for every page load
  • Form submissions: We capture the default event triggered when a form element is submitted. All data except password is collected
  • Link clicks: These include hyperlinks that take users to other sections of the site along with regular outbound links(that result in site exit)
  • Other HTML element clicks: In additional to capturing hyperlink clicks, we also capture clicks on button, select, input, and text area elements

The real-time event debugger feature provided in the app dashboard can be used to check the default data points sent for each of the above interaction types.

To add our snippet, follow the instructions below Login to your account and go to the Integrations section.

To add our snippet, follow the instructions below:

Login to your account and go to the Integrations section. Connect to your workspace and go to the integrations section.

Click on add more integrations.

On the resulting page, click on Web pixel.

Give a suitable name to the data source. Ensure that the domain name specified here, matches the domain on which the code snippet will be hosted.

Click on Next. On the following screen, you should see the snippet as below

<!-- Datagran Analytics -->
<script>
(function (w,d,e,o) {
   var l = d.createElement("script");
   _dgQ = [];
   l.type = "text/javascript";
   l.async = 1;
   l.src = e;
   var s = document.getElementsByTagName ("script")[0];
   s.parentNode.insertBefore(l, s);
   w[o] = window[o] || [];
   w[o].aid =
   w[o].wid =
   w[o].domain =
})(
 window, document,
 "https://cdn2.datagran.io/datagran.js",
 "datagran"
);
_dgTrack = function (n, p) {
 if (window.dg_tracker && typeof window.dg_tracker === 'object') {
     window.dg_tracker.trackEvent(n, p)
 }
 else {
     _dgQ.push([n, p]);
 }
}
</script>
<!-- End Datagran Analytics -->

Advanced implementation

This approach is recommended for users who wish to send additional data to that already captured by our tracker by default.

Custom Events

Datagran uses custom events to collection additional data. Our API provides a simple method called __dgTrack which accepts only two parameters (passed in this order)

●     Name of the event
●     Event Payload

As an example, the following code will trigger an event named ‘Visit GT 1m’. The payload being passed here is a simple JSON array, but the developer can pass any arbitrary JSON data here:

<script>
  var custom_event = {'Userid':'HelloWorld'};  
  _dgTrack('Visit GT 1m',custom_event);
</script>

Datagran eventually aggregates all these custom event sat the user level and this data is used internally for various other products in the Datagran suite, in addition to being available to the customer as raw data downloads. Developers can use our API to send any arbitrary data as an event.

User identification

An important scenario in advanced implementation is to be able to identify users. This is done using a special custom event named Identify. For example, suppose that you want to capture the email of a user when he submits a form and then associate his cookie ID with this email. In order to do this, you will do something like this:

<script>
   var known_user = {'Userid':user_email};  
   _dgTrack ('Identify’, known_user);
</script>

In order to get this user_email, the developer will need to listen to form submit events and capture the email value before invoking our code above.