A library for web analytics that provides site statistics counters to any BEM-based project.
- yandex-metrica — uses Yandex.Metrica service.
- google-tag-manager — uses Google Tag Manager service.
- google-analytics — uses Google Analytics service.
- statcounter — uses StatCounter service.
via bower:
$ bower install bem-stat-counters --save
via npm:
$ npm install https://github.com/bem-contrib/stat-counters.git --save
Include the library to the levels declaration in your compiler tool configuration (e.g. ENB or bem-tools):
ENB example
function getLevels(config) {
return [
// vendors levels
{
path: 'vendors/bem-stat-counters/common.blocks',
check: false
},
// your own levels
].map(function(levelPath) { return config.resolvePath(levelPath); });
}
bem-tools example
exports.getConfig = function() {
return extend({}, this.__base() || {}, {
bundleBuildLevels: this.resolvePaths([
// vendors levels
'vendors/stat-counters/common.blocks'
// your own levels
])
});
};
bem-tools example if you use bem-project-stub
getLevelsMap: function() {
return {
desktop: [
// vendors levels
'vendors/stat-counters/common.blocks'
// your own levels
]
};
}
Declare a counter in your project BEMJSON:
{
block: 'footer',
content: [
// smth content,
{
block: 'yandex-metrica',
params: {
id: '0000000',
webvisor: true,
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
v2: true
}
}
]
}
Set the following parameters of the block:
id
— requiredwebvisor
— optionalclickmap
— optionaltrackLinks
— optionalaccurateTrackBounce
— optionalv2
— optional
Example
{
block: 'yandex-metrica',
params: {
id: '0000000', // required param
webvisor: true,
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
v2: true
}
}
Set the following parameters of the block:
id
— required
Example
{
block: 'google-tag-manager',
params: {
id: 'GTM-XXXX'
}
}
Set the following parameters of the block:
id
— required
Example
{
block: 'google-analytics',
params: {
id: 'UA-XXXXXXXX-X'
}
}
Also the block has a simple API to track custom user events on page. Click here to learn more.
Set the following parameters of the block:
id
— requiredsecurity
— required
Support only invisible mode.
Example
{
block: 'statcounter',
params: {
project: XXXXXXXX,
security: 'YYYYYYYY'
}
}
You can use counters even if your web server has CSP settings which forbid inline scripts using. In this case you should provide the same value of the nonce
-parameter in the CSP http header and the html attribute for inline script.
Example
- CSP header
Content-Security-Policy:
...
script-src 'nonce-FOO'
...
- counter block declaration
{
block: 'google-analytics', // or any another block of the library
params: {
id: 'UA-XXXXXXXX-X'
},
nonce: 'FOO'
}
MIT License