Comment on page
Tracker setup
Superdao tracks conversions with a simple JS snippet, which can be installed as an SDK package.
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" />
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 datawindow.sdt.page({
userWalletAddress,
});
By
userWalletAddress
we mean an Ethereum wallet address starting with "0x...".Superdao supports the following event types by default:
PAGE_VIEW
is used upon page viewWALLET_CONNECT
is used upon Metamask/WalletConnect loginFORM_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 payloadwindow.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);
}
};
Last modified 4mo ago