Getting Started

Welcome to 0xArc! This guide walks you through signing up, configuring your settings, and installing the 0xArc SDK. We’ve kept the steps simple, with helpful images to guide you along the way. The setup is designed to get you started quickly, so you can begin leveraging 0xArc’s capabilities right away.

Sign Up

Go to the 0xArc.io and click "Get Started for Free." You can register by entering your email and creating a password or sign up via your Gmail account. After that, you'll receive a verification email—click the link to verify your account. Once verified, log in to your new 0xArc account.

---

Configuring Initial Settings

After you log in, you'll be directed to the configuration dashboard, where you'll begin setting up your project. Simply click on 'New Project,' input your project's name and your job role, and then click “Get Started” to proceed. You will then be directed to the SDK installation dashboard.

---

Installing the 0xArc SDK

Select the setup option that fits your needs. You can choose from a script tag installation, integrating with a React component, or a manual setup.

If you'd prefer to have your developer handle the installation, you can invite them directly through the platform. Simply enter their email address, and we'll send them an invitation to join your project.

1. Option 1 (via script tag)

This is the simplest option to get started with 0xArc; all you need to do is add this to the HEAD of your index.html file:

<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>

---

1. Option 2 (via React Component)

We typically recommend this method for those who 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:

Simply install the SDK into your Typescript/Javascript project by running npm add @arcxmoney/analytics or yarn add @arcxmoney/analytics (whatever you prefer)

Then, use the ArcxAnalyticsProvider at the top of your component tree in your main App.js file.

// 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 and log custom events or data.

// 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. Option 3 (via manual instantiation)

This is for those who want to have very granular control over what is sent and how tracking is implemented.

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 initialize the SDK and keep an instance ready to reference in other parts of your app. To do this, add the following code to your app’s load:

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 it 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. To do this, we need to be able to link your wallet to the currently active session and the chain to which the user is connected. The chain field should contain the numeric chain ID passed as a string.

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.

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
})

4. Events & Attribution (optional)

Tracking key events inside your Dapp 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.

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.

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.

---

Onboarding

Now that you've successfully installed the 0xArc SDK, let's guide you through the next steps to start making the most of the platform's features. This document will show you how to verify your setup, explore your dashboard, and start analyzing your data.

Verify SDK Installation

Once your SDK installation is verified, follow these steps:

1. Review recent events like 'Click,' 'First Visit,' and 'Page Load' in the table.

2. Ensure the listed domains are correct, where the 0xArc SDK is active and tracking.

3. If everything looks good, complete the setup and click the "Finish" button.

Explore your dashboard

After setup, you can now explore your dashboard, which provides a quick snapshot of how users interact with your dApp. Here are the key metrics you’ll find on the dashboard:

Dashboard

Here are the key metrics you’ll find on the dashboard:

• Visitors: The number of unique users visiting your platform.

• Sessions: Tracks each time a user starts interacting with your dApp. A session begins with their first action and ends after 30 minutes of inactivity.

• Page Visits: The number of times your site’s pages are visited per day.

• Wallet Connections: The number of unique wallets that have connected to your platform.

• Transactions: The total number of on-chain transactions made on your site.

• Acquisition Funnel: Shows how visitors find your dApp and how they convert into transacting users.

• Wallet Last Seen Date: Indicates when wallets were last active, helping you understand user retention.

What’s Next?

Finding Insights

To fully leverage the capabilities of 0xArc, it's essential to understand and use its features effectively. Here are some tips and recommendations:

• Utilize Dashboards for Quick Insights: Regularly check the dashboard to get a quick overview of user interactions and performance without diving into detailed reports.

• Monitor Transactions and Sessions: Track these metrics to gauge user engagement and financial activity on your dApp.

• Track Acquisition and Retention: Use these metrics to understand where your users come from and how well you're retaining users over time.

• Understand Wallet Behavior: Monitor wallet activity to gain insights into user engagement and interaction patterns.

• Leverage Transaction Data: Use transaction data to better understand financial activity and shape strategies.

• Review Campaign Performance: Analyze marketing campaigns' performance to optimize user engagement and conversion.

Remember, you can always refer to the documentation and onboarding pages for detailed instructions and guidance. If you need further assistance with data analysis or have any queries, don't hesitate to reach out to us at [e-mail] or Access our in-platform support chat for real-time help during business hours.