Web Client and Browser Setup

The Device Data Collector (DDC) runs on a customer’s browser and collects a variety of information that helps uniquely identify the device.

High Level Integration Steps

  1. Download the Kount Device Data Collector SDK.
  2. Optionally add a Content Security Policy.
  3. Configure the Trigger.
  4. Configure the Client.

Download the Kount Device Data Collection SDK

The Kount Device Data Collection SDK is hosted by Kount, and must be downloaded dynamically to be used on a web page.

The following code can be used to download the SDK:

<script 
type='text/javascript'
src='https://DATA_COLLECTOR_URL/collect/sdk?
m=123456&
s=abcdefg12345abababab123456789012'>
</script>
VAR Description
m Six-digit Merchant ID number issued by Kount.
s 32-character Session ID

Exclude this parameter from the call to the download of the SDK to have Kount generate a Session ID for you.

See Session ID discussion in this documentation for more information.

DATA\_COLLECTOR\_URL The URLs for the Data Collector are Environment specific. There is a URL for Test and a URL for Production. The URL must be obtained from Customer Success. Please contact your Customer Success Manager or support@kount.com.

Content Security Policy

If your organization has instituted a Content Security Policy on your website that interferes with the execution of the Device Data Collection on your site, you must add this to your page.

Please reach out to your Kount technical resource for assistance.

Configure the Trigger

The Device Data Collector SDK collection process is triggered asynchronously by the 'load' data-event. This gives the collector the most available time to complete its work. The collection is bound to the page load event by adding the kaxsdc class and data-event=‘load’ to an HTML element, such as the HTML body or a div. It looks like this:

<body class='kaxsdc' data-event='load'>

Configure the Client

The Kount collector JavaScript is namespaced under the ka JavaScript object. It is required to have the above /collect/sdk script tag added to your page, which imports the Device Data Collector SDK.

To start using the Device Data Collector SDK create a new ClientSDK object.

var client = new ka.ClientSDK();

Set Up Callback Methods (optional)

The SDK provides a customer programmable callback system that allows the client to execute custom code at certain points in the data collection process. This method allows a merchant to add a callback function to be called at a specified lifecycle hook. A merchant can pass a JavaScript object containing one or more lifecycle hooks with a function pointer or an anonymous function to be executed.

List of hooks (in order of firing):

  • collect-begin: Triggers when the collection starts
  • collect-end: Triggers when the collection ends

When executed, the callback function is passed with a JavaScript object containing the following properties:

  • MercSessId: The Session ID used in the collection
  • MerchantId: The Merchant ID
client.setupCallback(
    {
        'collect-end':
            function(params) {
                loginButton = document.getElementById('login_button');
                loginButton.removeAttribute('disabled');
            },

        'collect-begin':
            function(params) {
                var loginForm = document.forms['loginForm'];
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'kaId';
                input.value = params['MercSessId'];
                loginForm.appendChild(input);
            }
    }
NOTE: Refer to the code example.

Auto Load Events

Call the autoLoadEvents method on the customer to attach the collection process to be automatically triggered by the page elements load event with the className kaxsdc configured in the Configure the Trigger section.

client.autoLoadEvents();

Code Example

This code is an example of where each of the components discussed above appear in the web page. Use this example to help you understand where to best integrate into your website.

NOTE: It is recommended that the Device Data Collector code exists at the top of the page load so it has adequate time to run before a user finishes their interaction with the webpage.
<html>
	
<head>

</head>


   <!-- Adding the data-event=load to the class kaxsdc will start the Client in the autoload.  
        Note - this may be added to different data elements like a div -->

   <body class='kaxsdc' data-event='load'>


   <!-- Get the Collector SDK.  In the example, `DATA_COLLECTOR_URL`, 'm=123456' and 
        s=abcdefg12345abababab123456789012 are placeholder values.  Both 
        DATA_COLLECTOR_URL and the "m" values will be supplied by your Kount Client 
        Success Manager.  The "s" value will be the dynamic session of your customer 
        and should be a variable representing the customer's current session ID.  If
        this parameter is excluded, the SDK will generate a session ID for you. -->
 
   <script type='text/javascript' src='https://DATA_COLLECTOR_URL/collect/sdk?m=123456&
      s=abcdefg12345abababab123456789012'> </script>




      <!-- The following script starts the ClientSDK for the collection.  -->
      <!-- You may optionally setup callbacks for the collect-begin and the
           collect-ends events.  These callbacks can be useful if a business wants to be sure          			 that the collection has completed before asking for a risk evaluation (or to
           know that a risk evaluation is being made with or without a complete set of 
           information)  --> 

      <script type='text/javascript'>
        var client=new ka.ClientSDK();
 
       // OPTIONAL
        client.setupCallback(
            {
                // fires when collection has finished - this example would not enable the 
                // login button until collection has completed
                'collect-end':
                    function(params) {
                        // enable login button
                        loginButton = document.getElementById('login_button');
                        loginButton.removeAttribute('disabled');
                        // now user can login and navigate away from the page
                    },
                    
                // fires when collection has started. 
                'collect-begin':
                    function(params) {
                        // add hidden form element to post session id
                        var loginForm = document.forms['loginForm'];
                        var input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = 'kaId';
                        input.value = params['MercSessId'];
                        loginForm.appendChild(input);
                    }
            }
        );
        // END OPTIONAL SECTION

        // The auto load looks for an element with the 'kaxsdc' class and
        // data-event equal to a DOM event (load in this case). Data collection begins
        // when that event fires on that element--immediately in this example

        client.autoLoadEvents();
      </script>
   </body>
</html>
Was this article helpful?
0 out of 0 found this helpful