Spindl
  • 👋Overview
    • Introduction
    • Attribution
    • Privacy
  • Your Spindl app setup
    • Managing team members
  • 🪄Features
    • 📈Onchain Attribution
      • 📉Plotting attribution
    • 📊Web3-native Analytics
      • Chart Builder
      • Event Selection and Filtering
      • Line Chart
      • Funnel
      • Cohort Retention
      • Sankey Diagram
      • Big Numbers
      • Pies and Donuts
    • 🧍‍♂️Audiences
      • Creating an audience
    • 🔗Short Links
      • 🖇️Custom Domains
    • 🤝Referrals
      • Management and reporting
      • ⏩Quick Start
      • ⛓️Technical Details
  • ⚙️Techncial
    • ⏩Start Here
    • Google GTM Guide
    • Javascript SDK / HTML Script Guide
      • ➡️Install
      • ➡️Wallet Connects
      • ➡️Page Views
      • ➡️Custom Events
      • ✅Verify That Events Are Sent Correctly
      • React, Next.js & Html Examples
      • Setup a Reverse Proxy
        • Using Next.js
        • Using Cloudflare Workers
        • Netlify
      • ➡️Referrals
      • Default vs Lite SDK Versions
      • Security
    • API
      • ➡️Short Links
      • ➡️Custom Events API
      • Data Exports
    • Android SDK
    • iOS (Swift) SDK
    • On-Chain
      • ➡️Rewards
  • Contact Spindl
  • Ads
    • ⏩Start Here
    • 📢Creative Specifications
      • Web Banner Ads
      • Discord Embeds
Powered by GitBook
On this page
  • Authentication
  • Installation via NPM/Yarn
  • Installation via Script/CDN
  1. Techncial
  2. Javascript SDK / HTML Script Guide

Install

PreviousJavascript SDK / HTML Script GuideNextWallet Connects

Last updated 4 months ago

Authentication

Each customer of Spindl needs their own SDK Key to use the SDK. If you don't already have an SDK key, you can generate one on the page in the Spindl app.

Installation via NPM/Yarn

The Spindl SDK is a lightweight npm package. You can install it below. Also here is the npm

  • For differences between Default & Lite versions, you can check our Default vs Lite SDK Versions section

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 `Default` or Lite? The vast majority of clients use default but feel free to read more about the differences .

Initialization via library

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

    • For example on how to implement in either one, checkout our

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
});
window.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
});

Installation via Script/CDN

Add async script tag at the top of html file within head tag. Please make sure you to use your sdk key.

<head>
  ...
    <script
      async
      data-key="ADD_sdkKey_HERE"
      data-name="spindl-sdk"
      integrity="sha512-tnVaWexFbVZtEVlUBUMiWPwusxycBB3aDONgxC2zjX4CE0Tleo0zoLyI/JA6svx9SumV3KHGtAiD1mDrR+TpPg=="
      src="https://cdn.spindl.xyz/attribution-1-8-1.js"
      crossorigin="anonymous"
    ></script>
</head>
<head>
  ...
  <script
    async
    data-key="ADD_sdkKey_HERE"
    data-name="spindl-sdk"
    integrity="sha512-RYdSDx9Q1rcTihuBkGMeuW0c2U/PqL3tSuuvajN3Jp2UwgE9bMuL0bLvtbjPBMAzh573oPFOEwNdyi2sSPA6Kw=="
    src="https://cdn.spindl.xyz/attribution-lite-1-8-0.js"
    crossorigin="anonymous"
  ></script>
</head>

Initialization via Script

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>

For example on how to implement, checkout our

⚙️
➡️
Settings
here
examples repo.
examples repo.