​
Prerequisites

​
Install

Innerworks collects data in your application’s runtime so that we can provide you with analytics for fraud and bot prevention.

npm i @innerworks-me/iw-auth-sdk

​
Import

First, import the SDK, do this in the file for the page you’ve identified to send metrics from.

import { InnerworksMetrics } from "@innerworks/iw-auth-sdk";

​
Configure

Configure the InnerworksMetrics class and begin collecting metrics in a useEffect hook. The configurable parameters are:

  • appId - your project ID from Innerworks

  • detectionType - The type of detection (and therefore metric collection) that is required. Options are ‘BotDetection’, ‘VPN’, ‘Fingerprinting’.

  • signInButtonDomSelector - a DOM ID from the button you will use to submit data, this is so the SDK can pull mouse movement and click data from interactions with the button.

  • logLevel (optional) - set the minimum log level, requires ones of trace, debug, info, warn, error, silent.

  • silentLogs (optional) - boolean value to mute all logs from SDK

const [innerworksMetrics, setInnerworksMetrics] = useState<InnerworksMetrics>();

useEffect(() => {
    setInnerworksMetrics(
       new InnerworksMetrics({
          appId: 'your-project-id',
          detectionType: 'BotDetection',
          signInButtonDomSelector: '#button-id',
          logLevel: 'error',
          silentLogs: true
        }));
}, [setInnerworksMetrics]);

signInButtonDomSelector is only required if detectionType == 'BotDetection'

The signInButtonDomSelector should match an id in a button component for example

<button type="submit" id="button-id" class="submit-button">

​
Send

On a key interaction on the page (like a sign in), send the metrics to Innerworks by calling innerworksMetrics.send.

Be aware you need to pass a unique ID at this point. This allows Innerworks to uniquely link a user with their data. You need to ensure that you are able to retrieve the user ID at this point.

if (innerworksMetrics) {
  const metricsSendSuccess = await innerworksMetrics.send("UNIQUE_ID");
}

​
Full Example

import { InnerworksMetrics } from "@innerworks-me/iw-auth-sdk";
import { useEffect } from "react";

export default function YourPage() {
    const [innerworksMetrics, setInnerworksMetrics] = useState<InnerworksMetrics>();
    
    useEffect(() => {
        setInnerworksMetrics(
           new InnerworksMetrics({
              appId: 'your-project-id',
              signInButtonDomSelector: '#button-id',
              logLevel: 'error',
              silentLogs: true
            }));
    }, [setInnerworksMetrics]);
    
    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
    
        /*
        handle form submission here e.g. authentication
        */
        
        if (innerworksMetrics) {
            const metricsSendSuccess = await innerworksMetrics.send("UNIQUE_ID");
        }
        // optionally handle based on metricsSendSuccess boolean
    }
    
    return (
        // ... rest of elements
            <form onSubmit={handleSubmit}>

            /* ...
            your form elements here
            ... */

            <button type="submit" id="button-id">
        </form>
    )
}