At its core, Variance.js supports sending data in a few different ways:
Our thoughts from seeing hundreds of CDP implementations.
Here's a very simple list of events that every SaaS app should track:
To get started with Variance.js you'll need to add a connection on your integrations page.
From there you will see a few fields:
When you create a new Variance.js connection we will give you a snippet to install on your website. You'll find that at the bottom of the Variance.js connection page. If you copy that snippet into your website's `<head>` tag you should be good to go.
Alternatively, you can use Variance.js as a package with `npm install @variancehq/variance-js`. If you want to dig into the code, you can find it on Github.
`identify` is the way you associate users with IDs. You want to call `identify` when:
In Variance, `identify` is what powers the contact list (and for many the account list as well). Here’s what a typical `identify` call would look like:
Let’s break down the components:
You can send any number of traits with an `identify` call and they can be passed in whatever way makes the most sense for your application.
We follow the Segment standard for having a number of reserved traits that we display with priority in Variance. That list is:
If you’re using Variance.js on a marketing site you’ll have many visits that come from users without a User ID. This isn’t a problem. Variance.js automatically assigns an anonymous ID to each visitor and will include that if you send data via `identify` without a User ID attached.
While you won’t be able to see fully anonymous visitors in Variance, we do offer ways to identify accounts that visit your site through our Leads add-on. Get in touch if you’d like more information.
`track` is how you send events to Variance. Each action a user takes that you want to keep track of should be sent via a `track` call. Here’s what a track call looks like:
Just like the identify call, we can include any properties that make sense. As mentioned in the Best Practices, don’t boil the ocean at the beginning with your properties. Get to know the shape of your data and add properties as needed.
One of the questions we get most frequently is where should I start? The answer to this is going to be pretty specific to your product and the actions that are most important to you. If you are building a business intelligence tool, `Dashboard Created` is probably a key event, but if you offer project management software you’re probably more interested in `Task Created`.
With that said, there are a few basic events that every SaaS company needs:
If you need help building out your unique tracking plan, just let us know and we’re happy to hop on a call.
`page` is the way you send page visits to Variance. You can think of it like a `track` event for page visits instead of other actions. (In Variance we lump `track` and `page` together under Event Types for simplicity.) Here’s what a typical page event looks like:
That’s it. The library will automatically capture `title` and `url` as part of it.
In fact, if you’re using our snippet on your public website, unless you opt to control it, you won’t even need to call page. We will automatically call it for you on every page and include `title`, `path`, `url`, `referrer`, and `search`.
`group` is one way you can associate a user with a group or organization. Within Variance it is generally used to connect a Contact to an Account (and Variance only supports a 1:1 relationship between a User ID and a Group ID.
Here’s what a `group` call might look like:
As for `identify` follow the Segment standard for having a number of reserved traits that we display with priority on Accounts in Variance. That list is:
One note: if you include `website` we will default to that as the domain for the account.
`alias` is how you associate two identities together. It’s most commonly used for cases when you use an email address as a User ID prior to assigning a real User ID to the prospect. Imagine, for example, I was a prospect to your website and had signed up for your newsletter. When I signed up you used `firstname.lastname@example.org` as my ID. Now I’ve signed up for a free trial and have been assigned the ID `a20dd3df-235b-40f3-9c5a-3439a8263060`. You want to merge the two profiles together and you can do it with `alias`. It’s as simple as:
What’s going on behind the scenes is that our library is inserting `previousId` automatically and using the ID you pass into the `alias` call as the new User ID. The Variance app will take the instruction and merge the profiles.
If you are using Variance.js in react, here's an example of what that might look like:
You can find the full repository on Github if you want to learn more.