bem-contrib / stat-counters

The library, which provides statistics counters, e.g. Google analytics, Yandex metrica, etc
MIT License
18 stars 8 forks source link
bem counter google-analytics google-tag-manager statcounter yandex-metrika

Statistics counters BEM library

Build Status Coverage Status

A library for web analytics that provides site statistics counters to any BEM-based project.

Blocks inside

Get the library:

via bower:

$ bower install bem-stat-counters --save

via npm:

$ npm install https://github.com/bem-contrib/stat-counters.git --save

How 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:

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:

Example

{
    block: 'google-tag-manager',
    params: {
        id: 'GTM-XXXX'
    }
}

google-analytics

Set the following parameters of the block:

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:

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

1) CSP header

Content-Security-Policy:
 ...
 script-src 'nonce-FOO'
 ...

2) counter block declaration

{
    block: 'google-analytics', // or any another block of the library
    params: {
        id: 'UA-XXXXXXXX-X'
    },
    nonce: 'FOO'
}

License

MIT License