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:
You can see two configuration variables on the script tag:
The analytics token you receive after creating a new project. This is required. Tracking is disabled if there is no token.
This standard script- tag attribute ensures that the script will be fetched in parallel to parsing and evaluated as soon as it is available. That is: the script won't block the execution of the page and makes the page load faster.
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:
Consent banner configuration
Here are all the available options:
The analytics token you receive after creating a new project. This is required.
The label of the “no” button in the consent dialog. The setting is remembered during all the page loads on a visit. Default value: “Not now”
The label of the “yes” button in the consent dialog. This setting is remembered forever. Default value: “Yes”
Whether the default CSS styling should be applied on the popup. Setting this to
false allows you to style the dialog from scratch. Defaults to
true and minimal default styling are applied. You can override the default styles with your CSS.
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
You can disable auto-tracking by setting
data-dnt=true on the button element. DNT stands for “do not track”.
You can provide custom selectors for actions and conversions in the configuration. For example:
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
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:
Call this method when the visitors join your mailing list and hand in their email addresses.
Call this method when the visitor becomes a sales lead by contacting sales and handing in their contact information.
Call this method when the visitor starts using your product.
Call this method when the visitor converts to a customer by handing their payment information such as the credit card and no money is paid on the spot.
Call this method when the visitor converts to a promoter by inviting her friends or other associates to your product.
Conversion with a custom label. For example:
volument.convert('Highly qualified leads')
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:
Then update HTML embed code on your website:
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:
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:
The subject or topic of the page
The type of content. Good example values include “article”, “product”, “index”, “podcast”, “webinar”
The intended target audience such as “developers” or “designers”
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:
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:
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.