Setting up

Setup without consent banner

This tiny, 2.8Kb (minzipped) version tracks everyone without asking permission. This is a legal risk because according to ePrivacy directive, all analytics needs a banner for European visitors. 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/v1/volument.js"
  token="YOUR_TOKEN"></script>

You can see two configuration variables on the script tag:

Setup with the consent banner

This 3.5Kb version displays a consent banner for European visitors. ie. the banner is invisible outside Europe. This is the risk-free way to use analytics.

Here's the embed code:

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

Consent banner configuration

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

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

<script>
  window.volument_opts = {
    token: 'YOUR_TOKEN',
    policy_url: '/privacy-policy',
    yes_text: 'Okay',
    // etc..
  }
</script>

Here are all the available options:

Automatic event tracking

Volument automatically tracks all the actions and conversions your visitors make as follows:

• All form submissions are tracked as an “action”
• If the form has a valid email address in one of the input fields the submission is tracked as a “conversion”

The action name is the label of the <button> that was pressed. You can customize the label with data-label attribute:

<button data-label="Lead conversion">Submit</button>

You can disable auto-tracking by setting data-dnt=true on the button element. DNT stands for “do not track”.

Auto-track customization

You can provide custom selectors for actions and conversions in the configuration. For example:

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

<script>
  window.volument_opts = {
    token: 'YOUR_TOKEN',

    // select all elements with data-label attribute as actions
    actions: `[data-label]`,

    // all form submit buttons create a conversion
    conversions: `form button[type=submit]`
  }
</script>

Any standar document.querySelector will work as the value.

Manual event tracking

Sometimes auto-tracking is too tricky to setup, in which case you can wire your events manually 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.

Manual conversion tracking

Conversions are special kinds of custom events where the visitor is elevated to 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”. The following methods are provided:

Ad-blocker prevention

Some ad-blockers have taken the stance that they want to block every tracking script regardless of whether they are good (privacy-friendly) or not.

If you are using nginx, here's how you can prevent ad-blockers from blocking the requests:

# load volument.js locally (with non-tracking related filename)
location = /js/visits.js {

  # use volument-full.js for the banner version
  proxy_pass https://cdn.volument.com/v1/volument.js;
  proxy_set_header Host cdn.volument.com;

  # Performance improvement: cache the script for two hours
  proxy_cache jscache;
  proxy_cache_valid 200 2h;
  proxy_cache_use_stale updating error timeout invalid_header http_500;
}


# forward tracking events to volument edge servers
location ~/visits/([123])(/.*)? {
  # google
  resolver 8.8.8.8 8.8.4.4;
  proxy_pass https://$1.t1.volument.com$2;
}

Then update HTML embed code on your website:

<script async src="/js/visits.js"></script>

<script>
  window.volument_opts = { token: 'YOUR_TOKEN', api: '/visits/%' }
</script>

Content tagging

Content tagging is a way to know a little more about your content. For example, you can tag your content with a subject tag to understand which subjects or topics work best for your audience. Here's how they look on the UI:

Content tags are standard HTML meta tags on your page's source code. For example:

<!-- standard based HTML subject tag -->
<meta name="subject" content="Development">

Most content management systems allow editing of HTML meta tags. In WordPress for example, you have a Meta tag manager plugin or you can tweak your static site generator (SSG) to insert meta tags from the Markdown front matter.

Here are all the meta tags that Volument uses to enrich your analytics:

Google tag manager

You can use “Google Tag Manager” to add Volument tracking code to your website. Please navigate to the Custom HTML section and insert this snippet:

<script>
  var script = document.createElement('script')
  script.async = true
  script.setAttribute('token', 'YOUR_TOKEN')
  script.src = 'https://cdn.volument.com/v1/volument.js'
  document.head.appendChild(script)
</script>

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()
})