Как работает код счетчика метрики?

#javascript #яндекс #yandex_metrika_api

Стало интересно как работает код счетчика метрики, но в JavaScript я не очень силен,
знакомился с ним буквально по верхам. 

(function(d, w, c) {
(w[c] = w[c] || []).push(function() {
    try {
        w.yaCounterCOUNTER_ID = new Ya.Metrika({
            id: COUNTER_ID,
            clickmap: true,
            trackLinks: true,
            accurateTrackBounce: true,
            webvisor: true
        });
    } catch (e) {}
});
var n = d.getElementsByTagName("script")[0],
    s = d.createElement("script"),
    f = function() {
        n.parentNode.insertBefore(s, n);
    };
s.type = "text/javascript";
s.async = true;
s.src = "https://mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
    d.addEventListener("DOMContentLoaded", f, false);
} else {
    f();
}
})(document, window, "yandex_metrika_callbacks");


Не очень ясна конструкция в самом начале функции. Каким образом будет создан новый
объект Ya.Metrika, если его фактически в коде нет, а сам скрипт watch.js подгружается
в коде позже? 

И как здесь все-таки работает добавление самого скрипта watch.js? Ведь если посмотреть
код страницы с установленным счетчиком, тег script с параметрами и путем к watch.js
не будет виден в коде страницы. 

Заранее спасибо за объяснения!
    

Ответы

Ответ 1

Отличный вопрос! Давайте по-порядку:

1. Объявление и вызов главной функции

(function(d, w, c) {
  ...
})(document, window, "yandex_metrika_callbacks");


Здесь вы объявляете некую функцию, и сразу после объявления - ее же и вызываете с
параметрами document, window и строковым ключом Яндекс.Метрики. Эти параметры используются
внутри функции.

2. Сохранение конструктора метрики

w[c] = w[c] || []


w - это ваше окно браузера. В нем вы можете хранить функции или данные, и они будут
доступны глобально в других скриптах. По сути, здесь вы обращаетесь к w["yandex_metrika_callbacks"],
и там либо уже будут какие-то значения (например, с других счетчиков Яндекс.Метрики),
либо объявленный вами пустой массив.

.push(function() {
  ...
);


И далее в этот массив (уже существующий или только что созданный) вы добавляете элемент
- функцию, которая попытается создать объект счетчика метрики.

w.yaCounterCOUNTER_ID = new Ya.Metrika({
  ..
});


Создаете объект снова у окна w, чтобы он был доступен в любых других скриптах.

3. Асинхронная загрузка скрипта метрики

n = d.getElementsByTagName("script")[0]


Здесь вы находите первый попавшийся у вас на сайте тег