Стало интересно как работает код счетчика метрики, но в 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. Объявление и вызов главной функции
(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]
Здесь вы находите первый попавшийся у вас на сайте тег