Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.08.2014, 02:21
GDR GDR вне форума
Новичок на форуме
Отправить личное сообщение для GDR Посмотреть профиль Найти все сообщения от GDR
 
Регистрация: 17.08.2014
Сообщений: 7

Что именно делает код Яндекс метрики?
Доброго времени суток всем!
Будучи любознательным от природы пытаюсь сейчас освоить JavaScript в различных, прикладных областях применения.

В частности, заинтересовался, как именно работает код Яндекс-метрики, который устанавливается на страницы сайтов для подсчета количества посетителей и другой статистики.

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

Ниже код счетчика яндекс метрики созданный под выдуманный аккаунт с id=12345678. Если не возражаете, я попробую самостоятельно изложить то, что я на данный момент могу сказать о его работе, приводя фрагменты кода и описывая их работу. в ходе рассуждения буду отмечать возникающие вопросы при помощи фразы "_НЕ_ПОНЯТНО_".

Начну с самого легкого - с раздела <noscript> в конце кода, а именно:
<noscript><div><img src="//mc.yandex.ru/watch/12345678" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
как я понимаю, этот кусок кода срабатывает, если в браузере заблокирован обработчик JS и, в этом случае, просто происходит вызов именной страницы счетчика на сайте яндекса по адресу //mc.yandex.ru/watch/12345678 что, по-видимому, вызывает инкремент счетчика на стороне сервера яндекса.

Далее, по структуре я могу сказать, что оставшийся код в рамках <script> </script> представляет из себя описание и вызов на месте функции (function (d, w, c) { ...}) которой в качестве параметров передаются глобальные document, window и параметр "yandex_metrika_callbacks" представляющий из себя свойство объекта window (или w внутри самой функции) для доступа в формате w[c].
_НЕ_ПОНЯТНО_, что делает вот этот кусок строки: " w[c] = w[c] || [] "?

Теперь вот это:
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter12345678 = new Ya.Metrika({id:12345678,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true});
} catch(e) { }
});

Про приведенный выше кусок кода могу сказать следующее:
в конец массива объектов w.yandex_metrika_callbacks при помощи функции push добавляется новый объект w.yaCounter12345678 cо значениями свойст передаваемыми при создании объекта типа Ya.Metrika при помощи оператора new. При этом используется конструкция try {...} 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 = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";

if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }

Тут вроде более-менее ясночто происходит: в html коде страницы ищется первый элемент с тегом script и присваевается в переменную n. Затем создается новый элемент того же типа в переменной s, у которого среди прочих аттрибутов (после некоторых пассов) задается источник с адресом "http://mc.yandex/metrik/watch.js". Далее идет проверка на "оперность" ,браузера и при ее отсутствии запускается функция f, которая просто вставляет тег s в начала всего блока тегов типа script.
_НЕ_ПОНЯТНО_, почему нельзя было сразу в html код включить код с вызовом адреса http://mc.yandex.ru/metrika/watch.js? Для чего все эти усилия по поиску массива тегов типа script и вставке туда этого адреса?
Неужели это для того, чтобы выяснить какой используется протокол (http или https)? Ведь, в итоге все равно в "живом" html коде странице банально появляется вызов JS-скрипта со страницы яндекса (.../watch.js), который наверное и осуществляет увеличение счетчика?

Вот такие мысли роятся в голове любознательного ламера .
Если лень будет комментировать мои наивные вопросы, просьба просто дать свое видение работы кода счетчика приведенного для удобства полностью ниже.

с уважением, Дмитрий



<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter12345678 = new Ya.Metrika({id:12345678,
clickmap:true,
trackLinks:true,
accurateTrackBounce: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 = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";

if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/12345678" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
Ответить с цитированием
  #2 (permalink)  
Старый 17.08.2014, 04:29
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,672

GDR, кури watch.js
Ответить с цитированием
  #3 (permalink)  
Старый 17.08.2014, 05:03
GDR GDR вне форума
Новичок на форуме
Отправить личное сообщение для GDR Посмотреть профиль Найти все сообщения от GDR
 
Регистрация: 17.08.2014
Сообщений: 7

Сообщение от Rise Посмотреть сообщение
GDR, кури watch.js
а к чему тогда все эти танцы с установкой кода который только что и делает что ставит на страницу линк на watch.js?
Ответить с цитированием
  #4 (permalink)  
Старый 17.08.2014, 05:14
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,672

GDR, вот там и написано, разбирайся, если так интересно.
Ответить с цитированием
  #5 (permalink)  
Старый 17.08.2014, 05:22
GDR GDR вне форума
Новичок на форуме
Отправить личное сообщение для GDR Посмотреть профиль Найти все сообщения от GDR
 
Регистрация: 17.08.2014
Сообщений: 7

Наткнулся вот на такой вариант установки счетчика - понятней некуда, но он, насколько я понимаю не одобрен яндексом.
Зачем нужно было так усложнять код?

<!-- Yandex.Metrika counter -->
<script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript"></script>
<div style="display:none;"><script type="text/javascript">
try {
var yaCounterXXXXXX = new Ya.Metrika({id: XXXXXX, enableAll: true});
var yaCounterYYYYYY = new Ya.Metrika({id: YYYYYY, enableAll: true});
//...
}
catch(e) { }
</script></div>
<noscript><div><img src="//mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<noscript><div><img src="//mc.yandex.ru/watch/YYYYYY" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
Ответить с цитированием
  #6 (permalink)  
Старый 17.08.2014, 05:26
GDR GDR вне форума
Новичок на форуме
Отправить личное сообщение для GDR Посмотреть профиль Найти все сообщения от GDR
 
Регистрация: 17.08.2014
Сообщений: 7

Сообщение от Rise Посмотреть сообщение
GDR, вот там и написано, разбирайся, если так интересно.
Боюсь, я в коде watch.js на текущем этапе разобраться не смогу - там около 10 экранов кода сплошным текстом без отступов.

Мне хотя бы понять логику вызова счетчика...
Ответить с цитированием
  #7 (permalink)  
Старый 17.08.2014, 05:31
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,672

GDR, ты хотя бы learn.javascript.ru прочитай для начала.
Ответить с цитированием
  #8 (permalink)  
Старый 17.08.2014, 05:31
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,136


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

Последний раз редактировалось MallSerg, 17.08.2014 в 05:36.
Ответить с цитированием
  #9 (permalink)  
Старый 17.08.2014, 05:42
GDR GDR вне форума
Новичок на форуме
Отправить личное сообщение для GDR Посмотреть профиль Найти все сообщения от GDR
 
Регистрация: 17.08.2014
Сообщений: 7

Сообщение от MallSerg Посмотреть сообщение

По сути метрика развешивает обработчики на все события на странице и внимательно следит куда и как двигается мышка какие клавиши нажимаются на клавиатуре куда и какой текст вводится
раз в 30 секунд все это отправляется на сервера яндекса все это привязывается к IP печенькам от яндекса логину на яндексе и т.д.
спасибо за дельный ответ! не подскажете, в каком месте кода происходит это навешивание и каким боком тут объект типа Ya.Metrika?
Ответить с цитированием
  #10 (permalink)  
Старый 17.08.2014, 05:51
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,136

Сообщение от GDR
в каком месте кода происходит это навешивание
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Что делает оператор % theYozh Общие вопросы Javascript 14 11.09.2016 08:13
Что за оператор !! и что он делает? demoniqus Общие вопросы Javascript 2 23.11.2010 18:54
Что делает .function(e)? savenko jQuery 1 03.07.2010 15:29
Что делает этот скрипт? Wallkost Оффтопик 4 19.03.2010 14:54
что делает этот скрипт?)) jek Общие вопросы Javascript 5 10.01.2010 17:24