Statistics counters BEM library
A library for web analytics that provides site statistics counters to any BEM-based project.
Blocks inside
- yandex-metrica — uses Yandex.Metrica service.
- google-tag-manager — uses Google Tag Manager service.
- google-analytics — uses Google Analytics service.
- statcounter — uses StatCounter service.
Get the library:
via bower:
$ bower install bem-stat-counters --savevia npm:
$ npm install https://github.com/bem-contrib/stat-counters.git --saveHow to use
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
}
}
]
}How to declare blocks
yandex-metrica
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
}
}google-tag-manager
Set the following parameters of the block:
id— required
Example
{
block: 'google-tag-manager',
params: {
id: 'GTM-XXXX'
}
}google-analytics
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.
statcounter
Set the following parameters of the block:
id— requiredsecurity— required
Support only invisible mode.
Example
{
block: 'statcounter',
params: {
project: XXXXXXXX,
security: 'YYYYYYYY'
}
}Content Security Policy (CSP) support
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'
}License
MIT License