0xArc Analytics | SDK Installation

Installation guide

The 0xArc Analytics SDK is a simple SDK that helps provide higher fidelity analytics by merging on-chain data with off-chain data from front-ends. We value user privacy and do not collect IP addresses or scrape any information without your permission.

We prioritise your data's protection and confidentiality.

Your data's security is our top priority. We employ stringent measures to safeguard your information, ensuring it remains confidential and secure.

Easy Installation

Getting started takes no more than 10 minutes. Install via a single script tag or a few lines of React code.

Security

Our SDK is fully open source so you can understand what dependencies you’re adding to your site.

Privacy

We don’t collect IP addresses or personally identifiable information about your users. Read our privacy policy here.

Getting started with 0xArc

Script tag instantiation

This is the simplest option to get started with 0xArc Analytics, all you need to do is add this to the HEAD of your index.html file. The 0xArc SDK will automatically detect wallet connections, referrer data, button clicks, page tracks and transactions that occur on your front-end. You will now have access to the 0xArc SDK instance via window.arcx anywhere in the app, in case you want to use any specific functionality described in the API section below.

React component instantiation

We typically recommend this method for those that may want to access more specific features such as custom event tracking but want to make the process as easy as possible. This will still auto-track all the data for you. To get started with this method.

Manual instantiation

This is for those that would like to have very granular control over what is sent and how tracking is implemented.

HTML

Copy Code

Copied

<script>
	const script = document.createElement('script'); 
	const apiKey = YOUR_API_KEY 
	const config = {} // Add any configuration parameters you'd like here 
  script.src = 'https://unpkg.com/@0xarc-io/analytics'
	script.onload = function () { 
		ArcxAnalyticsSdk.init(apiKey, config).then(function (sdk) {  
			window.arcx = sdk 
    	}) 
  }
	document.head.appendChild(script)
</script>

To get started, simply install the SDK into your Typescript/Javascript project by running npm add @arcxmoney/analytics or yarn add @arcxmoney/analytics (whatever you prefer)

Then, put the ArcxAnalyticsProvider anywhere at top of your component tree.

HTML

Copy Code

Copied

// App.jsx
import { ArcxAnalyticsProvider } from '@arcxmoney/analytics'

export default App = () => (
  <ArcxAnalyticsProvider apiKey={YOUR_APY_KEY}>
    {/* Your other components here, such as <ChildComponent /> */}
  </ArcxAnalyticsProvider>
)

Now, you can use the useArcxAnalytics() hook in all of its child components to access the sdk object to log custom events or data.

HTML

Copy Code

Copied

// ChildComponent.jsx
import { useArcxAnalytics } from '@arcxmoney/analytics'

export const ChildComponent = () => {
  const sdk = useArcxAnalytics()

  if (!sdk) return (
    <div>loading...</div>
  )

  return (
    <button onClick={() => sdk.event('BUTTON_CLICKED')}>Emit event</button>
  )
}

1. Installing the SDK

To get started, simply install the SDK into your Typescript/Javascript project by running npm add @arcxmoney/analytics or yarn add @arcxmoney/analytics (whatever you prefer)

Once you’ve done that, you’ll need to initialise the SDK and keep an instance of it ready to reference in other parts of your app. In order to do this, add the following code on your app’s load:

JavaScript

Copy Code

Copied

import { ArcxAnalyticsSdk } from '@arcxmoney/analytics'

let arcx = await ArcxAnalyticsSdk.init(API_KEY, {
  trackPages: true, // default - automatically trigger PAGE event if the url changes after click
  cacheIdentity: true, // default - caches identity of users in their browser's local storage
})

We’ll provide you with an API key when getting started. You can still integrate before getting an API key though.

2. Wallet Connects

A critical part of the 0xArc analytics product is associating off-chain behaviour with on-chain wallet activity. In order to do this, we need to be able to link your wallet to the currently active session and the chain that the user is connected to. The chain field should contain the numeric chain ID passed as a string.

JavaScript

Copy Code

Copied

await arcx.connectWallet({ account: '0x1234', chain: '1' })

3. Transactions

The final piece for a bare-bone installation of 0xArc analytics is registering transactions that occur on-chain. In addition to passing the transaction hash, we need the ID of the chain the transaction is occurring on and optionally, any attributes you’d like to pass to further segment the event.

JavaScript

Copy Code

Copied

await arcx.transaction({
  chain, // required(string) - chain ID that the transaction is taking place on
  transactionHash, // required(string) - hash of the transaction
  metadata, // optional(object) - additional information about the transaction
})

Hurray! You’ve completed the bare-bone installation of the 0xArc's SDK. The following steps beyond this are optional but can given greater resolution and insights if implemented.

4. Events & Attribution (optional)

Tracking key events inside your app allows the product to provide detailed information such as what percentage of whales convert through your product funnel relative to new users. The more event data we have, the more insights we can provide to help improve your product.

JavaScript

Copy Code

Copied

await arcx.event(
  eventName, // required(string) - the name of the event (eg. "clicked-tab")
  attributes, // optional(object) - additional information about the event
)

In addition to events, tracking attribution allows you to understand which marketing campaigns are successful through wallet tagging.

JavaScript

Copy Code

Copied

await arcx.attribute({
  source, // optional(string) - the origin of the web traffic (eg. discord, twitter etc)
  campaignId, // optional(string) - a specific identifier of the campaign (eg. bankless-5)
})

That’s all there is to it. Leave all the magic on-chain wizardry to us from beyond here.

Build better marketing strategies and products with 0xArc.

Get started for free