The Device Data Collector runs on a client’s browser and collects a variety of information that helps uniquely identify the device.
High Level Integration Steps
- Download the Kount Device Data Collector SDK.
- Optionally add a Content Security Policy.
- Configure the Trigger.
- 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 sessionID 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 Client Success. Please contact your Client 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 client 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 life-cycle hook. A merchant can pass a JavaScript object containing one or more life cycle 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 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);
}
}
Auto Load Events
Call the autoLoadEvents method on the client 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.
<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>