📄Tracking referrals in your app

This guide shows how to send event data through the Fuul Web SDK

For Fuul to attribute conversion events to your visitors, you'll need to report the pageview and connect_wallet events.

You can find an example of two landing pages (one for creators and another one for end users) with the Fuul SDK integrated using next JS and RainbowKit in this repo

Pageview event

Projects must send this event every time a user visits a page on their website. This should be implemented on all pages of the site.

import { Fuul } from ('@fuul/sdk');

await Fuul.sendPageview();

The Fuul SDK will get the parameters from the URL once a user enters the site. There is no need to persist these parameters when navigating through the app.

Connect wallet event

Projects must send this event every time users connect a wallet to their website (both when connecting a wallet for the first time and when changing wallets during the session).

For this type of event, projects must send the user address that is being connected to the website along with the signature and signed message as arguments.

import { Fuul } from ('@fuul/sdk');

await Fuul.sendConnectWallet({
  address: "0x12345",
  signature: "0x123485090123",
  message: "Accept affiliate on 18-Aug 2023 00:00:00",
});

For smart contract accounts, the accountChainId must be added as follows:

import { Fuul } from ('@fuul/sdk');

await Fuul.sendConnectWallet({
  address: "0x12345",
  signature: "0x123485090123",
  message: "Accept affiliate on 18-Aug 2023 00:00:00",
  accountChainId: 1
});

The following networks are supported for smart contract wallets:

• Mainnet

• Arbitrum

• Optimism

• Polygon

• Base

• zkSync Era

• BNB chain

• Fantom

• Avalanche

• Mode

Sending event through the API

If you are sending the connect wallet event from the backend, you will have to use the API following this pattern:

import requests

url = "https://api.fuul.xyz/api/v1/events"

payload = {
    "metadata": {
    	"tracking_id": "abc123"
    },
    "name": "connect_wallet",
    "user_address": "0x12345",
    "signature": "0x123485090123"
    "signature_message": "Accept affiliate on 18-Aug 2023 00:00:00",
    "account_chain_id": 1 # Only for smart contract wallets
}

headers = {
    "content-type": "application/json",
    "authorization": "Bearer my-fuul-key"
}

response = requests.post(url, json=payload, headers=headers)

In this case, you will need to get the fuul.tracking_id from the browser's local storage. Remember that it must be the same one that was sent on the pageview event.

Message & Signature

Fuul allows two different types of signatures.

To validate regular signatures we use Viem verifyMessage and in the case of typed data signatures, we use Viem verifyTypedData.

In the case of typed data signatures, the payload should be the following:

import { Fuul } from ('@fuul/sdk');

const typedData = {
    address, domain, types, primaryType, message
}

await Fuul.sendConnectWallet({ 
    address: '0x12345',
    message: JSON.stringify(typedData),
    signature: '0x123485090123',
});

Requiring users to sign a message ensures event validity and disclosure to the user. This is mandatory as it prevents attribution fraud.