Skip to content

The library, which provides statistics counters, e.g. Google analytics, Yandex metrica, etc

License

Notifications You must be signed in to change notification settings

bem-contrib/stat-counters

Repository files navigation

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:

  • id — required
  • webvisor — optional
  • clickmap — optional
  • trackLinks — optional
  • accurateTrackBounce — optional
  • v2 — 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 — required
  • security — 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

  1. CSP header
Content-Security-Policy:
 ...
 script-src 'nonce-FOO'
 ...
  1. counter block declaration
{
    block: 'google-analytics', // or any another block of the library
    params: {
        id: 'UA-XXXXXXXX-X'
    },
    nonce: 'FOO'
}

License

MIT License