Websites

From the dashboard, you can navigate to different types of assets. Here we outline the features offered for websites.

Wallet Tracker SDK

Context

The absolute labs Wallet Tracker SDK allows companies to track visits on their website from a Web3 angle and allows several high-value use cases including:

gauge Web3 footprint among visitors by detecting presence of browser wallets
track wallet addresses visiting the page, augment your CRM with visits and browser attributes
attribute traffic, segments, actions and more
optimize ad spend by focusing on web3 savvy audiences
segment and engage with profiles leveraging on- and off-chain data including web activity on dapps

The SDK is designed to be as lightweight as possible: 4.5kb library, no dependency, loaded asynchronously.

Setup

The SDK setup is as simple as adding the following two lines in your website's head tag:

<script async src="------ASK YOUR CSM FOR THE JS FILE URL------"></script>
<script>
    window.ALSDK = window.ALSDK || {};
    ALSDK.siteId = 'YOUR PROJECT ID';
</script>

where YOUR PROJECT ID is to be replaced by the key obtained from the absolute labs platform upon adding your website to your dashboard. Please get in touch with your Customer Success Manager for more details.

User ID tracking

The SDK allows you to pass it a user ID in order to reconcile visitor context, including wallet presence, and user profile.

To pass a user ID, use the following function on the SDK:

ALSDK.externalId = '[email protected]' // Should use your internal user ID format

Event tracking

You can post custom events via the SDK, in order for instance to have accurate conversion reporting based on them.

To trigger the tracking of an event, call the ALSDK.postCustomEvent function, for instance as follows:

ALSDK.postCustomEvent("Order Successful", "ORDERID-12345")

React to visitors having a wallet

The SDK offers a method to query whether a wallet is present on the user's browser, and which wallet it is.

This requires a slightly different SDK initialization, to handle asynchronous loading of the scripts on your page. Use the following snippet (in which the difference is the window.ALSDK line).

<script async src="------ASK YOUR CSM FOR THE JS FILE URL------"></script>
<script>
    window.ALSDK = window.ALSDK || {detectWallet:async()=>{return new Promise(async(resolve)=>{document.addEventListener('absolutelabs.walletDetected',(e)=>{resolve(e.detail)})})}};
    ALSDK.siteId = 'YOUR PROJECT ID';
</script>

This opens use cases for displaying web3-related content only to visitors you know are savvy, for instance in order to display a banner directing them to a landing page for claiming a branded NFT badge, after providing an email and wallet address.

The SDK exposes an async function to detect if a wallet is present:

const info = await ALSDK.detectWallet();
// returns { hasWallet: true, walletType: "MetaMask" }

From there, you can use this to for instance display a DOM element conditionally using the following code:

<head>
  <script type="text/javascript">
    ALSDK.detectWallet().then(w => {
      if (w.hasWallet === true) {
        document.body.classList.add('has-wallet')
        document.querySelector('.wallet-detected').innerText = w.walletType
      }
    })
  </script>
  <style type="text/css">
    .wallet-only { display: none }
    body.has-wallet .wallet-only { display: block }
  </style>
..
</head>
<body>
..
  <p class="wallet-only">
    This message is visible because you have a wallet in your browser.
    Wallet detected: <span class="wallet-detected"></span>
  </p>

Personalize your page based on Segments

You can use the Absolute Labs Web SDK to check if a visitor's connected wallet address is in a segment you have created in Absolute Labs. To do so, you can call a dedicated method on the SDK:

window.addEventListener('ALSDK.ready', function () {
      // Check if there is a connected wallet, and if it is in a given Absolute Labs Segment
      ALSDK.isInSegment('TEAM:SEGMENT_ID') // put your team & segment IDs here
        .then(response => {
          if (response.result) {
            alert('wallet is in segment')
          } else {
            alert('wallet is not in segment')
          }
        });
    });

This allows to personalize the browsing experience based on holdings, portfolio value, and an other segment you can create in the platform.

PreviousTokens NextMobile Apps

Last updated 1 year ago