SaasHound client for React applications
To use SaasHound, add this code to your HTML file. Replace YOUR_TOKEN
with an api key from SaasHound Token and YOUR_PROJECT_NAME
with a project you created on SaasHound.
<script src="https://cdn.jsdelivr.net/npm/saashound-web/dist/saashound.js"></script><script> window.onload = function () { window.initSaasHound({ token: 'YOUR_TOKEN', project: 'YOUR_PROJECT_NAME', trackPageViews: true, }) console.log('SaasHound is ready!') }</script>
Tip: Make sure your token is set to “Public” and only works for the project you’re tracking.
Before SaasHound can track events, you need to tell it who the user is. Use this code to set a user ID:
<script> window.saasHound.setUserId('naomi-nagata')</script>
You can use anything to identify the user, like their email or username.
You can track events by adding a data-event
attribute to any HTML element. For example, here’s how to track when a user completes a mission:
<div data-event="Alien Encounter" data-user-id="naomi-nagata" data-channel="exploration" data-icon="👽" data-description="First contact with aliens!" data-tag-species="Unknown" data-tag-location="Sol gate" data-tag-communication="Successful"> 👽 Alien Encounter Logged</div>
You can add more information to your events using these attributes:
"events"
.data-tag-mission
, data-tag-location
, etc.You can tell SaasHound more about your users. This helps with tracking. Here’s an example:
<script> window.saasHound.identify({ userId: 'naomi-nagata', properties: { name: 'Naomi Nagata', email: 'naomi@roci.com', role: 'Chief Engineer', }, })</script>
SaasHound automatically tracks when users visit different pages on your website. To enable this, set trackPageViews
to true
when creating the SaasHound instance.
Example:
window.onload = function () { window.initSaasHound({ token: 'YOUR_TOKEN', project: 'YOUR_PROJECT_NAME', trackPageViews: true, }) console.log('SaasHound is ready and tracking page views!')}
You can track when users click buttons or other elements. Add a data-event
attribute to the element you want to track:
<button data-event="Mission Complete" data-channel="operations" data-icon="🚀"> Complete Mission</button>
You can track when users submit forms. Add a data-event
attribute to the form:
<form data-event="Contact Form Submitted" data-channel="support" data-icon="📨"> <input type="text" name="name" placeholder="Your Name" /> <input type="email" name="email" placeholder="Your Email" /> <button type="submit">Submit</button></form>
You can track custom events using the logEvent
method. For example, to track when a user completes a mission:
window.saasHound.logEvent({ channel: 'operations', title: 'Mission Complete', message: 'The user completed the mission successfully.', icon: '🚀', tags: { mission: 'Exploration', location: 'Asteroid Belt', },})
You can track numbers, like percentages or scores, using the sendMetric
method. For example, to track oxygen levels:
window.saasHound.sendMetric({ title: 'Crew Count', value: 17, icon: '🌬️', increment: false, // Set to true if the value should increase})
You can give SaasHound more details about your users. This helps with tracking. Use the identify
method:
window.saasHound.identify({ userId: 'naomi-nagata', properties: { name: 'Naomi Nagata', email: 'naomi@roci.com', role: 'Chief Engineer', },})
Here’s everything together in one example:
// Initialize SaasHoundconst saasHound = new SaasHound({ token: 'YOUR_TOKEN', project: 'YOUR_PROJECT_NAME', trackPageViews: true,})
// Set the user IDsaasHound.setUserId('naomi-nagata')
// Identify the usersaasHound.identify({ userId: 'naomi-nagata', properties: { name: 'Naomi Nagata', email: 'naomi@roci.com', role: 'Chief Engineer', },})
// Track a custom eventsaasHound.logEvent({ channel: 'operations', title: 'Mission Complete', message: 'The user completed the mission successfully.', icon: '🚀', tags: { mission: 'Exploration', location: 'Asteroid Belt', },})
// Track a metricsaasHound.sendMetric({ title: 'Crew Count', value: 17, icon: '🌬️', increment: false,})
endSession
method.setUserId(userId: string)
clearUserId()
logEvent(eventData: CaptureParams)
sendMetric(metricData: MetricParams)
identify(identifyData: IdentifyParams)
endSession()