Setting up

Website integration

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

<!-- Analytics by volument.com  -->
<script async src="https://cdn.volument.com/v1/volument.js"
  onload="volument('YOUR_TOKEN')"></script>

Remember to replace YOUR_TOKEN with your site-specific unique key that you can get from your account. As soon as this code is in place, you can see visitors appear on the user interface in real-time.

Tracking conversions

Volument collects engagement and retention data automatically. However, all conversion events, like registrations and purchases, must be set up programmatically. This happens by calling the following JavaScript methods.

volument.convertToContact()

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

volument.convertToLead()

Call this method when the visitor beceoms a sales lead by contacting sales and handing their contact infromation.

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 converst to a promoter by inviting her friends or other associates to your product.

volument.pay(amount)

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

volument.invite(peers)

Call this method when the visitor invites the given amount of peers to the site. The visitor is automatically converted to a promoter so no additional convertToPromoter call is needed.

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 emulate 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. Here's a blog entry about it.

We offer a specialized initialization method, volument.consent(), to abstract all the complexities in the cookie consent dialogs. Please use the full version of the client volument-full.js (7.4K) in place of the default version volument.js (5.6K) as follows:

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

<script>
  volument.consent({ region: 'Europe', country: 'FI', token: your_token })
</script>

token

The analytics token specific to your project. This is available on your account. Likewise all the configuration variables described above are passed described above are passed directly to volument. This is a required parameter.

policy_url

Link to the privacy policy. Default value: “https://volument.com/privacy”

Name of the target window where the privacy policy document is opened. Leaving this empty opens it in the same window. Default value: “policy”

The content for countries, where opt-in is required. Any text inside brackets becomes a link to the privacy policy. Default value: “Allow [privacy-friendly analytics] to access your device?“

notice_text

The content for the European countries, where notice is enough. Any text inside brackets becomes a link to the privacy policy. Default value: “We use [privacy-friendly analytics] to improve the experience.“

no_text

The label on the “no” button in consent dialog that disables tracking. Default value: “Not now”

yes_text

The label on the “yes” button in consent dialog that enables tracking. Default value: “Yes”

ok_text

The label on the “OK” button on a notice dialog. Default value: “OK”

use_css

Whether the default CSS styling should be applied on the popup. Setting this to false allows you to style the dialog from scratch.

Default: true

dnt

Whether the navigator.doNotTrck- setting should disable tracking. This also enables statistics for this setting.

Default: true

Detecting visitor's country

To show the banner to European visitors only, we must have away to detect where the visitor is coming from. One good way is to use a geo-location service. There are a lot of good services available and many of them are free up to a certain limit. We use ipgeolocation.io as follows:

// a geo-location function
function geolocate(fn) {

  // return cached info
  var loc = localStorage.location
  if (loc) { loc = loc.split('/'); return fn(loc[0], loc[1]) }

  // use a location service
  $.get('https://api.ipgeolocation.io/ipgeo', { apiKey: 'your_key' }, function(loc) {
    var country = loc.country_code2,
      region = loc.continent_name

    // save to cache for later requests
    localStorage.location = country + '/' + region
    fn(country, region)
  })

}

geolocate(function(country, region) {

  // start tracking, request consent if needed
  volument.consent({
    token: '<our_token>',
    country: country,
    region: region,

  }, function(was_ok, reason) {
    // a callback function for custom stuff

  })

})
{"style":"/learn/syntax","desc":"// How to embed it on your website.","title":"Setting up","url":"/learn/setting-up","key":"setting-up","created":"2019-01-17T06:05:43.000Z","modified":"2021-03-02T08:23:07.121Z","createdISO":"2019-01-17","modifiedISO":"2021-03-02"}