Code Monkey home page Code Monkey logo

metrica-tag's Introduction

Metrica tag

This repository contains source code for Metrica tag. Once built the tag can be placed on a web page, where after initialization it starts gathering analytics information about the page usage.

The codebase contains most of the features of the tag delivered by Metrica with exception for some proprietary stuff. Modular code allows for easily inclusion/exclusion of any feature, thus providing a way to achieve required balance between amount of collected data (affecting analytics quality) and script size.

Documentation

For documentation about Metrica, please visit our website: JS API

Usage

Installation

The project is based on nodejs.

If nvm installed, you can run this command to install and use the required version of the nodejs.

nvm install

To install dependencies use the following command:

npm ci

Build

The project contains a single build target output into _build/public/watch.js file. To build it run:

npm run build

The code is build for web and by default is uglified in order to achieve smaller size. If needed (e.g. for debugging purpose) the script can be build without uglification:

npm run build:raw

Features

The code consists of basic code (always included into the build) and a collection of features. The features are listed in the features.json file. By default all features are included (except for those which are explicitly marked as disabled). In order to exclude a feature from the build add a "disabled": true attribute. By enabling/disabling certain features the build can be tweaked to include only the desired capabilities.

Development

Add a feature

All the features listed in features.json can be divided into two distinct types:

  • A feature adding a large amount of code with isolated functionality (e.g. provider, middleware, transport, etc.). This is the main mechanism for adding new functionality. Those features usually have defined "path" field in their description object.
  • A feature adding a small code block into an existing functions in order to enhance its behavior. Mostly used for small experiments and allows to add/exclude code, e.g. for a local testing build.

In order to add a new provider, do the following:

  1. Add a feature to the features.json file in the following format:
{
    "code": "SOME_NEW_FEATURE", // The name of generated variable to be used in code.
    "path": "someNewProvider", // The path to the folder within src/providers with the module that defined the new provider.
    "desc": "Any meaningful description goes here",
    "disabled": true, // Set only if you want to exclude a feature from build.
    "exp": true, // A semantic attribute indicating an experimental feature. Doesn't affect the build process.
    "weight": 1000, /* A feature weight; defaults to 0 if not specified.
        Used for sorting features within feature initialization code in ascending order
        (the lower the weight, the earlier the provider initializes).
        Used for predictable initialization order.
        For example see the STACK_PROXY_FEATURE that must be initialized in the very end. */
},
  1. Generate new feature set by running:
npm run features
  1. Create a folder within src/providers.
    • The index.ts should contain only the initialization code and extensions to existing types. The file must export an initProvider function:
export const initProvider = () => {
    /* The code is wrapped by a feature flag.
       If the feature is not included into a build, the code is cut off by rollup.
       The resultant empty function is cut off as well */
    if (flags[SOME_NEW_FEATURE]) {
        // Required code
        providersSync.push(someNewProvider);

        // Optional code for any additional setup
        addMiddlewareForProvider(SOME_NEW_PROVIDER, watchSyncFlags(), 1);
        providerMap[SOME_NEW_PROVIDER] = useSenderWatch;
        nameMap[SOME_NEW_PROVIDER] = fullList;
    }
};
- The provider itself and all the utility code is put into separate files within the provider folder.
  1. Write the provider code.
  2. Write the test in the __tests__ folder. Use .spec.ts extension.

Tests

For test coverage the following packages are used:

  • mocha - test runner;
  • sinon - stubs;
  • chai - assertions.

Stubs

sinon is used for stubbing functions within tests. In order to provide the best TypeScript experience make sure all stubs are assigned proper types, but do not include too much detail about stubbed function. Prefer the code style as follows:

import * as sinon from 'sinon';
import defer from 'src/utils/defer';

describe('test', () => {
    const sandbox = sinon.createSandbox();
    let setDeferStub: sinon.SinonStub<
        Parameters<typeof defer.setDefer>,
        ReturnType<typeof defer.setDefer>
    >

    beforeEach(() => {
        setDeferStub = sandbox.stub(defer, 'setDefer');
    });

metrica-tag's People

Contributors

cvgalagan avatar enovikov11 avatar lisitsyn avatar nickshevr avatar robot-piglet avatar stanislavsky34200 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

metrica-tag's Issues

Chrome: Third-party cookie will be blocked. Learn more in the Issues tab.

Hello.

On my website, I am facing this issue. It seems Chrome is not allowing Yandex's 3rd party cookies and will not allow them in the future.

Reading cookie in cross-site context will be blocked in future Chrome versions
Cookies with the SameSite=None; Secure and not Partitioned attributes that operate in cross-site contexts are third-party cookies. In future Chrome versions, reading third-party cookies will be blocked. This behavior protects user data from cross-site tracking.
Please refer to the article linked to learn more about preparing your site to avoid potential breakage.
13 cookies
10 requests

What is the ideal way around this? Is it going to be solved if we use Partitioned attribute to the cookies? (i.e. CHIPS)

Registers an unload listener

I have been using the metrica for years but this warning has been there for a long time and is reducing my ranking and score. So, this case is the same for all sites using metrica. To be honest, I don't think you will care much about Google, but can't you find another solution for this unload event?

The warning is :

The unload event does not fire reliably and listening for it can prevent browser optimizations like the Back-Forward Cache. Use pagehide or visibilitychange events instead. Learn more about unload event listeners

With Yandex Metrica

image

Without Yandex Metrica

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.