Setting up

Setup without the cookie banner

This 6Kb version tracks everyone without asking the permission. This is a legal risk because all analytics needs a banner. However you might want to use this version in certain scenarios such as when you already have an existing banner system in place.

Paste this code on your website's HTML source code to get the no-banner version up and running:

<!-- Analytics by volument.com  -->
<script async src="https://cdn.volument.com/beta/volument.js" token="YOUR_TOKEN"></script>

You can see two configuration variables on the script tag:

Cookieless mode

You can omit the use of cookies and more specifically the localStorage by adding cookieless=true to the embed code. Like this:

<!-- Analytics by volument.com  -->
<script async src="https://cdn.volument.com/beta/volument.js" token="YOUR_TOKEN" cookieless="true"></script>

We added this option because many of our users don't like the idea of using cookies for one reason or another. However omitting cookies doesn't mean that the setup is more privacy-friendly: you still need to display the cookie banner.

Setup with the cookie banner

This 8Kb version displays a consent banner for European visitors. The banner is invisible outside Europe. This is the correct way to use analytics.

Here's the embed code:

<!-- Analytics by volument.com  -->
<script async src="https://cdn.volument.com/beta/volument-full.js"
  token="YOUR_TOKEN"></script>

Cookie banner configuration

When you use the banner you must have your own privacy policy documents in place. This is how you setup the banner for your own spceial needs:

<!-- Analytics by volument.com -->
<script src="https://cdn.volument.com/beta/volument-full.js"></script>

<script>
  volument.start({
    token: 'YOUR_TOKEN',
    policy_url: '/privacy-policy',
    yes_text: 'Okay',
    // etc..
  })
</script>

Here are all the available options:

Tracking custom events

Volument collects traffic and engagement data automatically, but all custom events like button clicks or video playback starts must be tracked manually. This happens with volument.event() JavaScript call. For example:

// track a custom event to Volument
volument.event('Viewed pricing')

These events are shown on the UI as follows:

A good event name is something that makes sense on a trend box like above.

Tracking conversions

Conversions are special kind of custom events where the visitor is elevated on a higher level on the customer journey. For example when an anonymous visitor joins a mailing list and becomes a “contact”. Or when a visitor contacts sales and turns into a “lead”. Following methods are provided:

volument.convertToContact()

Call this method when the visitors join your mailing list and hand in their email address.

volument.convertToLead()

Call this method when the visitor becomes a sales lead by contacting sales and handing in their contact information.

volument.convertToUser()

Call this method when the visitor starts using your product.

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.convertToPromoter()

Call this method when the visitor converts to a promoter by inviting her friends or other associates to your product.

Custom conversion events

The above conversion types are “universal”: ie. they are well-known and suits all kinds of projects regardless of the business model or industry. However, you might have some custom conversion types that won't fit the above calls. On this case you'll use the more general volument.convert(type) call. For example:

// a "highly qualified lead" conversion was made
volument.convert('Highly qualified leads')

Single-page applications

If your site is a single-page application (SPA) and the page change is built around pushState (PJAX, Turbolinks, or similar) you can use volument.route() to track page switches, for example:

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

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 by default.

This website, for example, is a single-page application.

Google Tag Manager

If you want to setup Volument with GTM, please create a Custom HTML tag with the following embed code:

<script src="https://cdn.volument.com/beta/volument.js"></script>
<script>window.volument && volument.start({ token: 'YOUR_TOKEN' })</script>

Set the Triggering to “All pages”.