Attribution-SDK

This SDK can be used to track attribution data for your app. It is designed to privacy preserving and easy to use.

To use this SDK, you need to sign up on Intract and get your API key.

Installation

npm i @intract/attribution

Usage

You need to initialize the SDK in the root component of your app (App.ts in case of React).

Import

import IntractAttribution from "@intract/attribution";

Initialize

useEffect(() => {
    IntractAttribution(<YOUR_APP_ID>, {
        configAllowCookie: true,
    });
}, []);

TrackWallet

You can track wallet by directly passing the address in trackCustomWallet function.

To use, import:

import {trackCustomWallet} from "@intract/attribution";

You need to pass user address as parameter to trackCustomWallet function in your auth flow:

function connectWallet(){
    //after your wallet authentication flow
    trackCustomWallet("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");
}

For NextJs:

To initialize our SDK in NextJs and similar frameworks that use SSR (server side rendering), you must take a few extra steps as our SDK depends on window object.

Create a Component

Create a new, empty component (Tracking.jsx in our case) and initialize the SDK as shown in the above steps.

import React, {useEffect} from 'react'
import IntractAttribution from "@intract/attribution"


const Tracking = () => {

    useEffect(() => {
        IntractAttribution(<YOUR_APP_ID>, {
            configAllowCookie: true
        });
    }, [])

    return (
        <></>
    )
}

export default Tracking

We're going to render this empty component on the client side. To do that we're gonna use "next/dynamic". Then, Import this component into the page from which you want to collect data.

Home.jsx

import dynamic from "next/dynamic";
const Tracking = dynamic(() => import("path/to/Tracking.jsx"), {
    ssr: false
});


const Home = () => {
    return(
        <>
            <Tracking/>
            <h1>Homepage</h1>
            Your code goes here
        </>
    )
}

For any other function like trackCustomWallet or trackWalletConnect import it within the function where you want to call them like in the following snippet.

function connectWallet(){
    const {trackCustomWallet} = (await import('@intract/attribution')).default
    trackCustomWallet('0xkjasn..1291a')
}

Auto-wallet tracking

Note: Due to the unpredictable nature of the web3 wallet providers, your dApp may face issues while tracking the user's wallet address automatically using enableWalletActivityTracking or trackWalletConnect functions. We advise you to use only trackCustomWallet function to track the user's wallet address.

Still, In case you want to track wallet automatically, you can use the enableWalletActivityTracking function which triggers every time when "accountChanged" event triggers. Also you can use trackWalletConnect which can be called after the user connects wallets, and our sdk will automatically track the wallet address.

These function will track the user's wallet address whenever the user connects a new wallet address.

Initialize

useEffect(() => {
    IntractAttribution(<YOUR_APP_ID>, {
        configAllowCookie: true,
        useMetamask: true // needed to track wallet automatically
    });
}, []);

Methods

enableWalletActivityTracking

If you want to track the user's wallet address automatically, you can use the enableWalletActivityTracking function. This function will track the user's wallet address whenever the user connects a new wallet address.

To use, import:

import {enableWalletActivityTracking} from "@intract/attribution";

Call after initializing the SDK: Note: This function will only work if you have initialized the SDK with useMetamask: true option.

useEffect(() => {
    IntractAttribution(<YOUR_APP_ID>, {
        configAllowCookie: true
        useMetamask: true
    });
    enableWalletActivityTracking();
}, []);

TrackWalletConnect

In some cases, you can use trackWalletConnect function explicitly after the user connects wallets.

To use, import:

import {trackWalletConnect} from "@intract/attribution";

Call at the appropriate time: Note: This function will only work if you have initialized the SDK with useMetamask: true option.

function connectWallet(){
    //after connect wallet code
    trackWalletConnect();
}