logo
API Reference
Help Desk

Fraud.Net Device Fingerprint SDK Quick Start Guide

To implement Fraud.Net Device Fingerprint SDK on your website (initial code):

a) via Google Tag Manager:

1. Go to Tag Manager > Workspace > Tags
2. Click "New" to add new tag
3. Type tag name, eg "Fraud.Net Device Fingerprint SDK"
4. In "Tag Configuration" choose "Custom HTML" tag type
5. Copy the following HTML and paste to HTML form field

<script>
(function(a,b,c,e,d){c[a]=c[a]||[];var g=e.getElementsByTagName(d)[0],f=e.createElement(d);f.async=!0,f.src="https://media.fraud.net/v"+b+"/fn_device_fingerprint_sdk.js?l="+a,f.id="fndfsid",g.parentNode.insertBefore(f,g)})("fn_device_fingerprint_sdk","0.0.1",window,document,"script");
</script>

6. In "Triggering" section choose a trigger "All Pages"
7. Click "Save" to save new tag
8. Publish new version: https://support.google.com/tagmanager/answer/6107163?hl=en
Notice: we can create even better readme similar to https://blog.hubspot.com/marketing/google-tag-manager-guide

b) directly in HTML code

Copy the following HTML and paste it to the <head> tag on all pages where you want to use Fraud.Net Device Fingerprint SDK

<script>
(function(a,b,c,e,d){c[a]=c[a]||[];var g=e.getElementsByTagName(d)[0],f=e.createElement(d);f.async=!0,f.src="https://media.fraud.net/v"+b+"/fn_device_fingerprint_sdk.js?l="+a,f.id="fndfsid",g.parentNode.insertBefore(f,g)})("fn_device_fingerprint_sdk","0.0.1",window,document,"script");
</script>

c) react / angular / other js frameworks

To apply Fraud.Net Device Fingerprint SDK hidden form field in to forms:

1. Settings codes based on implementation types:

a) by form ID
Use the following JavaScript replacing example_form_id with your form’s HTML id attribute:

fn_device_fingerprint_sdk.push({parent_id: 'example_form_id'});

By default additional hidden form field has device_data name. To set custom name use the following JavaScript replacing example_form_id with your form HTML id attribute and example_field_name with your custom field name:

fn_device_fingerprint_sdk.push({parent_id: 'example_form_id', field_name: 'example_field_name'});

b) by form class
Use the following JavaScript replacing example_form_class with your form HTML class:

fn_device_fingerprint_sdk.push({parent_class: 'example_form_class'});

By default additional hidden form field has device_data name. To set custom name use the following JavaScript replacing example_form_class with your form HTML class and example_field_name with your custom field name:

fn_device_fingerprint_sdk.push({parent_class: 'example_form_class', field_name: 'example_field_name'});

c) by existing hidden form field by field ID
Use the following JavaScript replacing example_field_id with your form HTML id attibute:

fn_device_fingerprint_sdk.push({field_id: 'example_field_id'});

d) by existing hidden form field by field class
Use the following JavaScript replacing example_field_class with your form field HTML class:

fn_device_fingerprint_sdk.push({field_class: 'example_field_class'});

2. Settings implementation:

a) via Google Tag Manager:
1. Choose implementation type.
2. Edit "Fraud.Net Device Fingerprint SDK" GTM tag
3. Copy and paste chosen settings code as additional line inside <script> tag in HTML form field
4. Click "Save" to save tag
5. Publish new version: https://support.google.com/tagmanager/answer/6107163?hl=en

b) directly in HTML code
1. Choose implementation type.
2. Copy and paste chosen settings code as additional line inside <script> tag of your initial code
Notice: this is only base example. In fact client can inject setting/triggering js code anywhere they want/need

c) Full Html Example
...

<head>
<script>
(function(a,b,c,e,d){c[a]=c[a]||[];var g=e.getElementsByTagName(d)[0],f=e.createElement(d);f.async=!0,f.src="https://media.fraud.net/v"+b+"/fn_device_fingerprint_sdk.js?l="+a,f.id="fndfsid",g.parentNode.insertBefore(f,g)})("fn_device_fingerprint_sdk","0.0.1",window,document,"script");
fn_device_fingerprint_sdk.push({parent_id: 'contact'});
window.addEventListener('fn_device_fingerprint_sdk_ready', function() {
  //alert('sdk-device-fingerprint is ready');
  console.log("data", window.fn_device_fingerprint_sdk.device)
});
</script>
</head>
<div class="container">  
  <form id="contact" action="" method="post">
    <h3>Colorlib Contact Form</h3>
    <h4>Contact us for custom quote</h4>
    <fieldset>
      <input placeholder="Your name" type="text" tabindex="1" required autofocus>
    </fieldset>
    <fieldset>
      <input placeholder="Your Email Address" type="email" tabindex="2" required>
    </fieldset>
    <fieldset>
      <input placeholder="Your Phone Number (optional)" type="tel" tabindex="3" required>
    </fieldset>
    <fieldset>
      <input placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
    </fieldset>
    <fieldset>
      <textarea placeholder="Type your message here...." tabindex="5" required></textarea>
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>
    <p class="copyright">Designed by <a href="https://colorlib.com" target="_blank" title="Colorlib">Colorlib</a></p>
  </form>
</div>