<aside> 👫 The ARCx 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.

</aside>

Option 1 (via script tag)

This is the simplest option to get started with ARCx Analytics, 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/@arcxmoney/analytics>'
  script.onload = function () {
    ArcxAnalyticsSdk.init(apiKey, config).then(function (sdk) {
      window.arcx = sdk
    })
  }

  document.head.appendChild(script)
</script>

That’s it! The ARCx SDK will automatically detect wallet connections, referrer data, button clicks, page tracks and transactions that occur on your front-end. The only limitation is that it does not support WalletConnect.

Option 2 (via React Component)

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:

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.

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

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

Option 3 (via manual instantiation)