Comment on page
➡
Install
The Spindl SDK is a lightweight npm package. You can install it here:
Default
Lite
npm install @spindl-xyz/attribution
yarn add @spindl-xyz/attribution
npm install @spindl-xyz/attribution-lite
yarn add @spindl-xyz/attribution-lite
Unsure of whether to use
attribution or attribution-lite? Reach out and we can help you choose the right option for you and your customers. The Spindl SDK only needs to be configured once in a browser or Node session.
- If you're using Next.js, in page router, you can do this in
pages/_app.tsx- If using app router, you need to implement it in a client side component
Default
Lite
import spindl from "@spindl-xyz/attribution";
spindl.configure({
sdkKey: "<your SDK API key here>",
debugMode: true/false, // we recommend only to have debugMode=true when testing.
// you will see console.logs of emitted events in browser
});
import spindl from "@spindl-xyz/attribution-lite";
spindl.configure({
sdkKey: "<your SDK API key here>",
debugMode: true/false, // we recommend only to have debugMode=true when testing.
// you will see console.logs of emitted events in browser
});
Add async script tag at the top of html file within
head tag. Please make sure you to use your sdk key.Default
Lite
<head>
...
<script
async
data-key="ADD_sdkKey_HERE"
data-name="spindl-sdk"
src="https://cdn.spindl.xyz/attribution-latest.js"
></script>
</head>
<head>
...
<script
async
data-key="ADD_sdkKey_HERE"
data-name="spindl-sdk"
src="https://cdn.spindl.xyz/attribution-lite-latest.js"
></script>
</head>
Script automatically is instantiated and will track page view events & wallet connect events so you don't need to do anything
You will still be able to fire custom "Wallet Connects" & "Page Views" if you want by accessing spindl via window object. Example:
<script>
(async () => {
async function manualPageView() {
await window.spindl.pageView();
}
async function manualWalletConnect(address) {
await window.spindl.attribute(address);
}
})();
</script>
Last modified 2mo ago