Superdao Help
Search
K
Comment on page

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.