Tracker setup

Superdao tracks conversions with a simple JS snippet, which can be installed as an SDK package.

SDK installation

Put these two JS snippets on every page. Replace TRACKER_ID with the key that you received from the Superdao team.

<!-- 
Connect tracking core, insert anywhere inside <head> or <body> both script tags, without separating
-->
<script>(function(i){typeof window<"u"&&!window.sdt&&(window.sdt=["page","track","identify"].reduce((n,d)=>(n[d]=async function(...e){window.sdtQueue||(window.sdtQueue=[]),window.sdtQueue.push({name:d,args:e})},n),{id:i}))
})("TRACKER_ID")</script>
<script async src="https://static.superdao.co/supertracker-1.1.0.js" type="text/javascript" />

Page views tracking

You can track page visits by calling the sdt.page method manually on each page load (or each history API event change if your app is SPA)

window.sdt.page();

Also, you can pass optional parameters, such as userWalletAddress, to enrich the event data

window.sdt.page({
		userWalletAddress,
});

By userWalletAddress we mean an Ethereum wallet address starting with "0x...".

Events tracking

Superdao supports the following event types by default:

  • PAGE_VIEW is used upon page view

  • WALLET_CONNECT is used upon Metamask/WalletConnect login

  • FORM_SUBMIT is used when a visitor submits a lead form

Along with the event types specified above we also track the following metadata:

  • UTM tags

  • User and wallet IDs

  • Timezone

  • Operating system

  • Page URL

  • Referrer

Most of the data is taken from the tab/HTML page context using the native browser API.

You can track these events by calling the sdt.track method with two arguments of the event name and event-specific payload

window.sdt.track("WALLET_CONNECT", {
		userWalletAddress,
});

WALLET_CONNECT

{ userWalletAddress: string }

FORM_SUBMIT

{ userWalletAddress: string }

PAGE_VIEW

{ userWalletAddress: string }

The example below shows how to track form submissions with the FORM_SUBMIT event

<form>
		<input type="text" name="username" />
		<button onclick="window.sdt.track('FORM_SUBMIT', { userWalletAddress: '0xae38691ea4146d136f58bfa3e8266237edde2851'});">Submit</button>
</form>

The example below shows how to track Metamask logins in the React app with the WALLET_CONNECT event

 const onPressConnect = async () => {
    try {
      if (window?.ethereum?.isMetaMask) {

        const accounts = await window.ethereum.request({
          method: "eth_requestAccounts",
        });

        const userWalletAddress = Web3.utils.toChecksumAddress(accounts[0]);

        window.sdt.track("WALLET_CONNECT", {
          userWalletAddress,
        });
      } else {
        alert("Please, install MetaMask first");
      }
    } catch (error) {
      console.log(error);
      
    }
  };

Once all the steps are done, head over to your account to check the traffic in the Reporting tab.

PreviousReportingNextReporting overview

Last updated