10

Стало интересно как работает код счетчика метрики, но в 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
  • для тех кто найдет это - предполагаю, что код уже совсем не такой и этот должен быть заменен на тот.
    – romanown
    11 июл 2022 в 8:19

2 ответа 2

15

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

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]

Здесь вы находите первый попавшийся у вас на сайте тег <script>. Метрике это нужно, чтобы вот этой командой..

n.parentNode.insertBefore(s, n);

..вставить новый созданный ею скрипт перед вашим имеющимся. Перед или после - не имеет значения, главное поместить скрипт на страницу, и метрика делает это гарантированным способом.

Можно было бы помещать скрипт в конец <body> или <head>, но эти теги с недавних пор в верстке необязательны. А вот тег <script> у вас на сайте будет однозначно хотя бы один - с кодом счетчика метрики.

s = d.createElement("script")
s.type = "text/javascript";
s.async = true;
s.src = "https://mc.yandex.ru/metrika/watch.js";

Здесь метрика как раз создает тот тег <script>, который потом вставит в страницу, и после вставки скрипт начнет асинхронно загружаться.

f();

Вот здесь это и происходит, вызывается функция f, которая вставляет тег <script> метрики в DOM. Чуть выше видно исключение, в случае, если используется браузер Opera:

d.addEventListener("DOMContentLoaded", f, false);

Которое точно так же выполнит функцию f, но после полной загрузки DOM'а браузером.

4. Выполнение асинхронно загруженного скрипта

В итоге у вас асинхронно загружается скрипт watch.js, а в window["yandex_metrika_callbacks"] у вас хранятся функции-конструкторы объектов Яндекс.Метрики.

Когда скрипт watch.js загрузится, он просто вызовет все эти функции подряд, инициализировав таким образом все счетчики Яндекс.Метрики, которые вы захотели видеть на сайте.

4
  • Отличный ответ! :) А Вы могли бы дать наводку на информацию о том, как хранить функции в объекте window? Покопался на learn.javascript.ru, но не нашел информации. Нашел общие слова об объекте и методах. 2 сен 2016 в 9:10
  • 4
    @kover-samolet, здесь нужно подумать о том, зачем вам нужны глобальные функции? И сколько таких функций вам нужно? Хорошей практикой считается по возможности избегать глобальных объектов и функций, а если и хранить их - то в виде толстых объектов, вмещающих в себя все нужные функции для работы с чем-то конкретным. Например редактор CKEditor хранит все свои данные и функции в window.CKEDITOR, и именно через него в своих скриптах вы можете работать с редактором. 2 сен 2016 в 9:18
  • спасибо за ответ! Буду думать :) 2 сен 2016 в 9:45
  • 1
    <body> и <head> необязательны в вёрстке. Но в DOM они всё равно будут гарантированно присутствовать, поэтому document.getElementsByTagName("body")[0] всегда что-то вернёт. 7 сен 2016 в 7:25
5

Конструкция в начале не создает обЪект Ya.Metrika, как в верно заметили, на этом этапе его еще нет. Этак конструкция лишь добавляет в массив window. yandex_metrika_callbacks функцию, которая должна создать этот объект. А сама эта функция вызывается в скрипте watch.js, когда объект Ya.Metrika уже создан.

На счет добавления скрипта watch.js: Он добавляется динамически перед первым тегом script на странице в данный момент. Если вы смотрите код страницы через view page source, то вы его естественно там не увидите, вам нужно воспользоваться инструментом разработчика в браузере (что бы ее открыть, можно кликнуть по странице правой кнопкой и выбрать пункт inspect element).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.