Setting up Volument

Installation

To install Volument, paste the following code on your pages:

<script async src="https://cdn.volument.com/v1/volument.js"
  onload="volument('your_token')"></script>

Imporant: Replace “your_token” with the actual token that you can get from your account.

After the code is in place, Volument starts measuring how your visitors engage with the site.

Tracking conversions

Volument automatically collects engagement and retention information. However, all the key conversion events, like registrations and purchases, must be wired programmatically. This happens by calling the following methods on the right spot on your code:

volument.convertToLead()

Call this method when the visitor becomes a “lead.“ That is: they hand their email or phone number so you have a way to reach them.

volument.convertToCustomer()

Call this method when the visitor and converts to a customer by handing their payment information such as the credit card and no money is paid at the spot.

volument.pay(amount)

Call this method when the visitor hands their payment information and pays the given amount in your local currency. The visitor is converted to a customer so no additional convertToCustomer call is needed.

volument.invite()

Call this method when the visitor invites her friends or other associates to your product contributing to the viral growth of your product. The visitor is converted to a “promoter”.

Areas and topics

Volument is good at extracting area and page information from your URLs. For example /blog/introducing-volument translates to “blog” area and “introducing-volument” topic. It's impossible to get these right all the time because websites are different. However, you can configure Volument to understand your special website structure.

Custom areas

areas configuration option specifies the areas on your website that you want to have a separate analysis. For example

<script src="https://cdn.volument.com/v1/volument.js"></script>

<script>
volument({
  areas: ['marketplace', 'customer-case'],
  token: 'your_token',
})
</script>

Custom parser

parser option specifies a custom parser to extract areas and topics from your paths. Here's an example parser that would work nicely for Twitter.

<script>
function twitterParser(path) {
  var main_areas = 'home explore notifications messages bookmarks'.split(' '),
    parts = path.split('/').slice(1)

  if (main_areas.includes(parts[0])) return { area: 'main', topic: parts[0] }
  return { area: parts[1] == 'status' ? 'status' : 'profile' }
}

volument({ token: 'your_token', parser: twitterParser })
</script>

Single-page applications

If your site is a single-page application (SPA) and routing is built around pushState (PJAX, Turbolinks, or similar) you can setup Volument as follows:

<script src="https://cdn.volument.com/v1/volument.js"></script>
<script>volument({ token: 'your_token', spa: true })</script>

After this you must track all page switches with volument.route() method, for example:

// turbolinks example
document.addEventListener('turbolinks:load', function() {
  volument.route()
})

In fact, this website is built as a single-page application so we can provide faster page loads for our visitors.

route([path])

Call this method when the visitor is routed to a new page. After this Volument starts tracking how the new page is consumed. The path argument is optional and location.pathname is used when not given.

Disable tracking

You can disable tracking with disabled option as follows:

<script>
  volument({ token: 'your_token', disabled: true })
</script>

It makes sense to disable tracking in a development environment or when navigator.doNotTrack is enabled on the end user's browser.

When tracking is disabled no data is sent to our servers.