Client side Tracking

In client-side tracking, we discuss how to use qwestive-client-sdk npm package which handles tracking payload generation and sends requests from browser to Qwestive backend.

qwestive-client-sdk

📝 Table of Contents

• About

• Getting Started

• Usage

🧐 About

Qwestive client sdk is a npm package that can be used to register invitees

🏁 Getting Started

These instructions will get you started with the project up and running on your local machine for development.

Prerequisites

• node: v16.20.0

• npm: 8.19.4

• yarn: 1.22.19

Installation

Any of the below ways can be used to add the package to your existing web app

NPM

npm install qwestive-client-sdk

Yarn

yarn add qwestive-client-sdk

Browser

<script src="https://unpkg.com/qwestive-client-sdk@0.1.11/dist/index.js"></script>

Please make sure to use latest version, while using the browser script.

🎈 Usage

import QwestiveClientSDK from 'qwestive-client-sdk';

async function testQwestiveClientSDK() {
  const qwestiveClient = new QwestiveClientSDK(
    QWESTIVE_REFERRAL_PROJECT_ID,
    QWESTIVE_REFERRAL_API_KEY,
  );

  await qwestiveClient.init();
  await qwestiveClient.setReferral({
    publicKey: '0x71C7656EC7ab88b098defB751B7401B5f6d8976F'
  });
}

testQwestiveClientSDK();

Note: If setting client methods in React component state or React Context, then make sure to bind the methods with instance of the client. Please checkout this for example.

Initializing the SDK

Initialize the SDK with API KEY and projectId (checkout developers section to know how to find these)

• Initializing the SDK authenticates the client and validates client's domain against whitelisted domains added from project settings.

• Returns the available campaignConfig and isRegisteredInvitee

const {campaignConfig, isRegisteredInvitee} = await qwestiveClient.init();

Parameter	Type	Description
campaignConfig	{ showPopup: boolean; textColor: string; backgroundColor: string; buttonColor: string; buttonText: string; buttonTextColor: string; text: string; title: string; }	This refers to the UI config of the campaign that can be used to show popup card.
isRegisteredInvitee	boolean	This denotes whether the current user is registered invitee or not in the campaign.

campaignConfig can be useful in case we want to show a welcome popup to the invited user when they first lands on the campaign or the website where we have integrated qwestive-client-sdk. Checkout example for sample welcome popup card implementation

Send setReferral event

• This method should be triggered when the invitee connects the wallet on your Dapp.

• Sets the current user as the registered invitee in the campaign

const { publicKey, isRegisteredInvitee } = await qwestiveClient.setReferral({
    // user's wallet public key
    publicKey: string,
})

Parameter	Type	Description
publicKey	string	The users wallet public key.
isRegisteredInvitee?	boolean	This denotes whether the current user is a registered invitee. This is only returned if the user is already a registered invitee. Otherwise it will not be sent.

Testing

• Make sure, SDK instance is initialized like mentioned in the documentation above.

• Generate referral code:

  • go to referral.qwestive.io and select your project
  • go to referral section from left sidebar and select your campaign

  • from campaign page, generate referral link and copy referral code

  • while local development, use it like http://localhost:3000/?qwest=4266W to simulate referral link flow

  • If using localhost shows unauthorized domain, then consider adding locahost along with port as whitelisted domain in project settings

• If you don't see any errors on console, check the campaign page which index referrals every 3-4 minutes

• If you are able to spot new referrals in invitees table and sent off-chain events in the activity table, then we have correctly integrated the Tracking SDK, cheers!

• Otherwise, reach out to us for help.

Demo

Setup qwestive-client-sdk

Checking data on dashboard to check if integration was successful