Tracking custom attributes with Purser

Before we go any further, note that this is a technical post. If you’re not comfortable with code, you’ll want to share this article with a developer who can help you get set up.

In order to segment your metrics by customer-related data like marketing channel, you must collect certain information, like UTM codes,  from a user’s browser. At ChartMogul, we call this customer-related data “customer attributes.”

Purser.js is a lightweight JavaScript library for preserving user data from first website visit to signup. In this post we’ll cover how to use Purser.js to track custom attributes and push that data into ChartMogul using our Enrichment API. If you’d prefer, you can also use Ahoy.js to collect and store this information. If so, please reference this blog post, where we walk through Ajoy.js in greater detail.

Collecting and storing customer attributes

There are many ways to collect and store customer attributes. You can collect them yourself by using a custom script, an open-source library, or software like Segment. For the purpose of this article we’re using Purser.js.

Follow these steps to start collecting and storing customer attributes. (Please be sure to observe Do Not Track (DNT) when implementing this on your website.)

  1. Install Purser.js on every page of your website
  2. When a user takes an action, such as clicking a download button, call Purser.update(). For example: Purser.update({"downloaded": true}).
  3. When a customer creates an account, call Purser.convert(). For example, Purser.convert({"signup_button":"red"}). This will return all of the customer attributes in a single object.
  4. Store the attributes object in your own database, CRM, or another service such as your billing system.
  5. When a customer is created in your billing system, the customer will (within a few minutes) be imported into ChartMogul. Once the customer is in ChartMogul add their attributes to them using the Enrichment API.